Reference

Guide

image

A single image

Preview

Default snippet

/site/snippets/blocks/image.php
<?php if ($image = $block->image()->toFile()): ?>
<figure<?= attr(['data-ratio' => $block->ratio(), 'data-crop' => $block->crop()->isTrue()], ' ') ?>>
  <?php if ($block->link()->isNotEmpty()): ?>
  <a href="<?= $block->link()->toUrl() ?>">
    <img src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
  </a>
  <?php else: ?>
  <img src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
  <?php endif ?>

  <?php if ($block->caption()->isNotEmpty()): ?>
  <figcaption>
    <?= $block->caption() ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>

Default blueprint

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: 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
      - 3/2
      - 4/3
      - 16/9
  crop:
    label: field.blocks.image.crop
    type: toggle
    width: 1/2

Default Vue Component

https://github.com/getkirby/kirby/blob/master/panel/src/components/Blocks/Types/Image.vue