# image

A single image

****

- Source: <https://github.com/getkirby/kirby/tree/5.5.3/config/blocks/image/>

****

## Preview

![](https://assets.getkirby.com/media/pages/docs/reference/panel/blocks/image/a2daa23875-1717846665/image-block.png?width=1416&height=1000&enlarge=0)

## Default files

### Snippet

By default, Kirby uses the following snippet to render the image block:

```php
<?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()->esc();
} elseif ($image = $block->image()->toFile()) {
	$alt = $alt->or($image->alt());
	$src = $image->url();
}

?>
<?php if ($src): ?>
<figure<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
  <?php if ($link->isNotEmpty()): ?>
  <a href="<?= Str::esc($link->toUrl()) ?>">
    <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
  </a>
  <?php else: ?>
  <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
  <?php endif ?>

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

```

To overwrite [this default snippet](https://github.com/getkirby/kirby/tree/5.5.3/config/blocks/image/image.php), place your custom file in `/site/snippets/blocks/image.php`.

### Blueprint

By default, Kirby uses the following blueprint for the image block:

```yaml
name: field.blocks.image.name
icon: image
preview: image
fields:
  location:
    label: field.blocks.image.location
    type: radio
    columns: 2
    default: "kirby"
    required: true
    options:
      kirby: "{{ t('field.blocks.image.location.internal') }}"
      web: "{{ t('field.blocks.image.location.external') }}"
  image:
    label: field.blocks.image.name
    type: files
    query: model.images
    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

```

To overwrite [this default blueprint](https://github.com/getkirby/kirby/tree/5.5.3/config/blocks/image/image.yml), place your custom file in `/site/blueprints/blocks/image.yml`.

### Vue component

[`kirby/src/components/Forms/Blocks/Types/Image.vue`](https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Blocks/Types/Image.vue)