Initial commit

kirby/config/blocks/image/image.php

@@ -0,0 +1,35 @@
+<?php
+
+/** @var \Kirby\Cms\Block $block */
+$alt     = $block->alt();
+$caption = $block->caption();
+$crop    = $block->crop()->isTrue();
+$link    = $block->link();
+$ratio   = $block->ratio()->or('auto');
+$src     = null;
+
+if ($block->location() == 'web') {
+    $src = $block->src();
+} elseif ($image = $block->image()->toFile()) {
+    $alt = $alt ?? $image->alt();
+    $src = $image->url();
+}
+
+?>
+<?php if ($src): ?>
+<figure<?= attr(['data-ratio' => $ratio, 'data-crop' => $crop], ' ') ?>>
+  <?php if ($link->isNotEmpty()): ?>
+  <a href="<?= $link->toUrl() ?>">
+    <img src="<?= $src ?>" alt="<?= $alt ?>">
+  </a>
+  <?php else: ?>
+  <img src="<?= $src ?>" alt="<?= $alt ?>">
+  <?php endif ?>
+
+  <?php if ($caption->isNotEmpty()): ?>
+  <figcaption>
+    <?= $caption ?>
+  </figcaption>
+  <?php endif ?>
+</figure>
+<?php endif ?>

kirby/config/blocks/image/image.yml

@@ -0,0 +1,59 @@
+name: field.blocks.image.name
+icon: image
+preview: image
+fields:
+  location:
+    label: field.blocks.image.location
+    type: radio
+    columns: 2
+    default: "kirby"
+    options:
+      kirby: Kirby
+      web: Web
+  image:
+    label: field.blocks.image.name
+    type: files
+    multiple: false
+    image:
+      back: black
+    uploads:
+      template: blocks/image
+    when:
+      location: kirby
+  src:
+    label: field.blocks.image.url
+    type: url
+    when:
+      location: web
+  alt:
+    label: field.blocks.image.alt
+    type: text
+    icon: title
+  caption:
+    label: field.blocks.image.caption
+    type: writer
+    icon: text
+    inline: true
+  link:
+    label: field.blocks.image.link
+    type: text
+    icon: url
+  ratio:
+    label: field.blocks.image.ratio
+    type: select
+    placeholder: Auto
+    width: 1/2
+    options:
+      1/1: "1:1"
+      16/9: "16:9"
+      10/8: "10:8"
+      21/9: "21:9"
+      7/5: "7:5"
+      4/3: "4:3"
+      5/3: "5:3"
+      3/2: "3:2"
+      3/1: "3:1"
+  crop:
+    label: field.blocks.image.crop
+    type: toggle
+    width: 1/2