Image

    image: {
        id: 'image',
        // The chooser group, stated: a block's group is never made up.
        group: 'common',
        title: 'Image',
        // Mirrors Volto's ImageSchema (core Image/schema.jsx), with two
        // deliberate differences.
        //
        // 1. `url` is declared. Volto leaves it out of `properties` because the
        //    upload widget writes it, not a sidebar field — but hydra reads the
        //    schema to learn that `url` is a MEDIA field, which is what makes
        //    data-edit-media="url" an editable target rather than an unknown
        //    attribute. Undeclared, the image is uneditable on the canvas.
        //
        // 2. `url` is REQUIRED. An image block exists to hold an image, so while
        //    editing an empty one is always shown, like a revealed field: the
        //    bridge seeds the same stand-in the reveal toggle uses, with no
        //    toggle needed, giving the author something to click. The frontend
        //    draws no placeholder of its own (no data ⇒ no element), so a visitor
        //    never sees one; the admin refuses to save it empty anyway. Reveal's
        //    toggle is for OPTIONAL fields that are absent until asked for (a
        //    hero's image).
        //
        // Volto states the rest as a schema FUNCTION of formData (alt/align/size
        // and the link fieldset appear only once a url exists). A function can't
        // cross postMessage to a frontend, so the same rule is expressed as
        // fieldRules, which travels as data.
        blockSchema: {
            fieldsets: [
                { id: 'default', title: 'Default', fields: ['url', 'alt', 'align', 'size', 'title', 'description', 'credit', 'copyright_and_sources', 'allow_image_download'] },
                { id: 'link_settings', title: 'Link settings', fields: ['href', 'openLinkInNewTab'] },
            ],
            properties: {
                title: { title: 'Title' },
                description: { title: 'Description', widget: 'textarea' },
                credit: { title: 'Credit' },
                copyright_and_sources: { title: 'Copyright and sources' },
                allow_image_download: { title: 'Allow image download', type: 'boolean' },
                url: { title: 'Image', widget: 'image', placeholder: 'Browse the site or type a URL' },
                alt: { title: 'Alt text' },
                align: { title: 'Alignment', widget: 'align', default: 'center' },
                size: { title: 'Size', widget: 'image_size', default: 'l' },
                href: {
                    title: 'Link to',
                    widget: 'object_browser',
                    mode: 'link',
                    selectedItemAttrs: ['Title', 'Description', 'hasPreviewImage'],
                    allowExternals: true,
                },
                openLinkInNewTab: { title: 'Open in a new tab', type: 'boolean' },
            },
            required: ['url'],
        },
        schemaEnhancer: {
            fieldRules: {
                alt: { when: { url: { isSet: true } }, else: false },
                align: { when: { url: { isSet: true } }, else: false },
                // Volto's own Image schema drops the size choice for a
                // full-width image: the width IS the page, so there is nothing
                // to choose. Written as a LIST of rules — the first whose
                // condition holds wins, and the bare `false` at the end is the
                // catch-all that hides the field when none does.
                size: [
                  { when: { url: { isSet: true }, align: { isNot: 'full' } } },
                  false,
                ],
                href: { when: { url: { isSet: true } }, else: false },
                openLinkInNewTab: { when: { url: { isSet: true } }, else: false },
            },
        },
        // A frontend's fieldMappings REPLACE the admin's (mergeFrontendBlock),
        // so the admin's conversion from a teaser is listed here too.
        fieldMappings: {
            '@default': { '@id': 'href', 'title': 'alt', 'image': 'url' },
            teaser: { 'href': 'href', 'title': 'alt', 'preview_image': 'url' },
        },
    }

{
  "@type": "image",
  "url": "../images/image-block-edit.png",
  "alt": "The image-block example block being edited in Inka",
  "align": "center",
  "size": "l"
}

import { getImageUrl } from './utils.js';

function ImageBlock({ block }) {
  const src = getImageUrl(block.url);
  const alt = block.alt || '';
  const href = block.href?.[0]?.['@id'] || block.href;

  // No image ⇒ no element. While editing, Inka hands an empty image a
  // stand-in to click; a visitor sees nothing.
  if (!src) return <div data-block-uid={block['@uid']} />;
  const img = <img data-edit-media="url" src={src} alt={alt} />;

  return (
    <div data-block-uid={block['@uid']}>
      {href ? (
        <a href={href} data-edit-link="href">{img}</a>
      ) : (
        <>{img}</>
      )}
    </div>
  );
}

<template>
  <div :data-block-uid="block['@uid']">
    <!-- No image ⇒ no element. While editing, Inka hands an empty image a
         stand-in to click; a visitor sees nothing. -->
    <template v-if="imgSrc">
      <a v-if="href" :href="href" data-edit-link="href">
        <img data-edit-media="url" :src="imgSrc" :alt="block.alt" />
      </a>
      <img v-else data-edit-media="url" :src="imgSrc" :alt="block.alt" />
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { getImageUrl } from './utils.js';
const props = defineProps({ block: Object });
const href = computed(() => props.block.href?.[0]?.['@id'] || props.block.href);
const imgSrc = computed(() => getImageUrl(props.block.url));
</script>

<script>
  import { getImageUrl } from './utils.js';
  export let block;
  $: href = block.href?.[0]?.['@id'] || block.href;
  $: imgSrc = getImageUrl(block.url);
</script>

<!-- No image ⇒ no element. While editing, Inka hands an empty image a
     stand-in to click; a visitor sees nothing. -->
<div data-block-uid={block['@uid']}>
  {#if imgSrc && href}
    <a {href} data-edit-link="href">
      <img data-edit-media="url" src={imgSrc} alt={block.alt} />
    </a>
  {:else if imgSrc}
    <img data-edit-media="url" src={imgSrc} alt={block.alt} />
  {/if}
</div>