Image

Bild-block (Standard Size)

Bild-Block (Full Width )

Bild-Block (Align: center)

Bild-Block (Align: Left)

The Bild-Block can be aligned to the left with text floating around it on the right side.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild-Block (Align Right)

The Bild-Block can be aligned to the right with text floating around it on the left side.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

{
  "image": {
    "fieldMappings": {
      "@default": {
        "image": "url",
        "@id": "href",
        "title": "alt"
      }
    },
    "blockSchema": {
      "properties": {
        "url": {
          "title": "Image",
          "widget": "image"
        },
        "alt": {
          "title": "Alt Text"
        },
        "href": {
          "title": "Link",
          "widget": "object_browser",
          "mode": "link"
        }
      }
    },
    "schemaEnhancer": {
      "childBlockConfig": {
        "defaultsField": "itemDefaults"
      }
    }
  }
}

{
  "@type": "image",
  "url": "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%2377aadd%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 fill=%27white%27 text-anchor=%27middle%27 font-size=%2724%27%3ETest Image%3C/text%3E%3C/svg%3E",
  "alt": "A description of the image",
  "href": [
    {
      "@id": "/target-page"
    }
  ]
}

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

  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']">
    <a v-if="href" :href="href" data-edit-link="href">
      <img data-edit-media="url" :src="block.url" :alt="block.alt" />
    </a>
    <img v-else data-edit-media="url" :src="block.url" :alt="block.alt" />
  </div>
</template>

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

<script>
  export let block;
  $: href = block.href?.[0]?.['@id'] || block.href;
</script>

<div data-block-uid={block['@uid']}>
  {#if href}
    <a {href} data-edit-link="href">
      <img data-edit-media="url" src={block.url} alt={block.alt} />
    </a>
  {:else}
    <img data-edit-media="url" src={block.url} alt={block.alt} />
  {/if}
</div>

{
  "image": {
    "fieldMappings": {
      "@default": {
        "image": "url",
        "@id": "href",
        "title": "alt"
      }
    },
    "blockSchema": {
      "properties": {
        "url": {
          "title": "Image",
          "widget": "image"
        },
        "alt": {
          "title": "Alt Text"
        },
        "href": {
          "title": "Link",
          "widget": "object_browser",
          "mode": "link"
        }
      }
    },
    "schemaEnhancer": {
      "childBlockConfig": {
        "defaultsField": "itemDefaults"
      }
    }
  }
}

{
  "@type": "image",
  "url": "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%2377aadd%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 fill=%27white%27 text-anchor=%27middle%27 font-size=%2724%27%3ETest Image%3C/text%3E%3C/svg%3E",
  "alt": "A description of the image",
  "href": [
    {
      "@id": "/target-page"
    }
  ]
}

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

  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']">
    <a v-if="href" :href="href" data-edit-link="href">
      <img data-edit-media="url" :src="block.url" :alt="block.alt" />
    </a>
    <img v-else data-edit-media="url" :src="block.url" :alt="block.alt" />
  </div>
</template>

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

<script>
  export let block;
  $: href = block.href?.[0]?.['@id'] || block.href;
</script>

<div data-block-uid={block['@uid']}>
  {#if href}
    <a {href} data-edit-link="href">
      <img data-edit-media="url" src={block.url} alt={block.alt} />
    </a>
  {:else}
    <img data-edit-media="url" src={block.url} alt={block.alt} />
  {/if}
</div>

{
  "image": {
    "fieldMappings": {
      "@default": {
        "image": "url",
        "@id": "href",
        "title": "alt"
      }
    },
    "blockSchema": {
      "properties": {
        "url": {
          "title": "Image",
          "widget": "image"
        },
        "alt": {
          "title": "Alt Text"
        },
        "href": {
          "title": "Link",
          "widget": "object_browser",
          "mode": "link"
        }
      }
    },
    "schemaEnhancer": {
      "childBlockConfig": {
        "defaultsField": "itemDefaults"
      }
    }
  }
}

{
  "@type": "image",
  "url": "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27400%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%2377aadd%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 fill=%27white%27 text-anchor=%27middle%27 font-size=%2724%27%3ETest Image%3C/text%3E%3C/svg%3E",
  "alt": "A description of the image",
  "href": [
    {
      "@id": "/target-page"
    }
  ]
}

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

  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']">
    <a v-if="href" :href="href" data-edit-link="href">
      <img data-edit-media="url" :src="block.url" :alt="block.alt" />
    </a>
    <img v-else data-edit-media="url" :src="block.url" :alt="block.alt" />
  </div>
</template>

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

<script>
  export let block;
  $: href = block.href?.[0]?.['@id'] || block.href;
</script>

<div data-block-uid={block['@uid']}>
  {#if href}
    <a {href} data-edit-link="href">
      <img data-edit-media="url" src={block.url} alt={block.alt} />
    </a>
  {:else}
    <img data-edit-media="url" src={block.url} alt={block.alt} />
  {/if}
</div>