Teaser

{
  "fieldsets": [
    {
      "id": "default",
      "title": "Default",
      "fields": [
        "href",
        "overwrite",
        "title",
        "head_title",
        "description",
        "preview_image"
      ]
    }
  ],
  "properties": {
    "href": {
      "title": "Target",
      "widget": "object_browser",
      "mode": "link",
      "allowExternals": true
    },
    "overwrite": {
      "title": "Customize teaser content",
      "type": "boolean",
      "default": false
    },
    "title": {
      "title": "Title"
    },
    "head_title": {
      "title": "Kicker"
    },
    "description": {
      "title": "Description",
      "widget": "textarea"
    },
    "preview_image": {
      "title": "Image override",
      "widget": "object_browser",
      "mode": "image",
      "allowExternals": true
    }
  },
  "required": [
    "href"
  ]
}

{
  "@type": "teaser",
  "description": "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.",
  "styles": {
    "align": "center"
  },
  "head_title": "Head title",
  "title": "Headline H2",
  "href": [
    {
      "@id": "/docs/examples/content-types/page",
      "@type": "Document",
      "Description": "The Page content type can be used to display content on a single page of the website. Pages can be structured using text, images and blocks.",
      "Title": "Page",
      "getRemoteUrl": null,
      "hasPreviewImage": true,
      "head_title": null,
      "image_field": "preview_image",
      "title": "Page"
    }
  ]
}

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

function TeaserBlock({ block }) {
  const hrefObj = block.href?.[0] || null;
  const useBlockData = block.overwrite || !hrefObj?.title;

  const title = useBlockData ? block.title : hrefObj?.title || '';
  const description = useBlockData ? block.description : hrefObj?.description || '';
  // Strip API origin from brain @id so the link resolves same-origin.
  const href = contentPath(hrefObj?.['@id'] || '');
  const imageSrc = block.preview_image
    ? getImageUrl(block.preview_image)
    : (hrefObj?.hasPreviewImage ? getImageUrl({ '@id': `${href}/@@images/preview_image` }) : '');

  if (!href) {
    return (
      <div data-block-uid={block['@uid']} className="teaser-placeholder">
        <p>Select a target page for this teaser</p>
      </div>
    );
  }

  return (
    <div data-block-uid={block['@uid']} className="teaser-block">
      {imageSrc && <img data-edit-media="preview_image" src={imageSrc} alt="" />}
      <h3 data-edit-text="title">{title}</h3>
      <p data-edit-text="description">{description}</p>
      <a href={href} data-edit-link="href">Read more</a>
    </div>
  );
}

<template>
  <div :data-block-uid="block['@uid']" class="teaser-block">
    <div v-if="!href" class="teaser-placeholder">
      <p>Select a target page for this teaser</p>
    </div>
    <template v-else>
      <img v-if="imageSrc" data-edit-media="preview_image" :src="imageSrc" alt="" />
      <h3 data-edit-text="title">{{ title }}</h3>
      <p data-edit-text="description">{{ description }}</p>
      <a :href="href" data-edit-link="href">Read more</a>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { getImageUrl } from './utils.js';
const props = defineProps({ block: Object });

const hrefObj = computed(() => props.block.href?.[0] || null);
const useBlockData = computed(() => props.block.overwrite || !hrefObj.value?.title);
const title = computed(() => useBlockData.value ? props.block.title : hrefObj.value?.title || '');
const description = computed(() => useBlockData.value ? props.block.description : hrefObj.value?.description || '');
const href = computed(() => contentPath(hrefObj.value?.['@id'] || ''));
const imageSrc = computed(() => {
  if (props.block.preview_image) {
    return getImageUrl(props.block.preview_image);
  }
  return hrefObj.value?.hasPreviewImage ? getImageUrl(`${href.value}/@@images/preview_image`) : '';
});
</script>

<script>
  import { getImageUrl } from './utils.js';
  export let block;

  $: hrefObj = block.href?.[0] || null;
  $: useBlockData = block.overwrite || !hrefObj?.title;
  $: title = useBlockData ? block.title : hrefObj?.title || '';
  $: description = useBlockData ? block.description : hrefObj?.description || '';
  $: href = contentPath(hrefObj?.['@id'] || '');
  $: imageSrc = block.preview_image
    ? getImageUrl(block.preview_image)
    : (hrefObj?.hasPreviewImage ? getImageUrl(`${href}/@@images/preview_image`) : '');
</script>

{#if !href}
  <div data-block-uid={block['@uid']} class="teaser-placeholder">
    <p>Select a target page for this teaser</p>
  </div>
{:else}
  <div data-block-uid={block['@uid']} class="teaser-block">
    {#if imageSrc}
      <img data-edit-media="preview_image" src={imageSrc} alt="" />
    {/if}
    <h3 data-edit-text="title">{title}</h3>
    <p data-edit-text="description">{description}</p>
    <a {href} data-edit-link="href">Read more</a>
  </div>
{/if}