Add excert image as content element with alt text handling.

rogoit · Apr 29, 2024 · 984c46a · 984c46a
1 parent 84617e6
commit 984c46a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git a/config/templates/includes/tailwind/blocks.xml b/config/templates/includes/tailwind/blocks.xml
@@ -13,6 +13,8 @@
         <types>
             <xi:include href="blocks/image.xml"
                 xpointer="xmlns(sulu=http://schemas.sulu.io/template/template)xpointer(/sulu:properties/sulu:block/sulu:types/sulu:type)"/>
+            <xi:include href="blocks/excerpt-image.xml"
+                xpointer="xmlns(sulu=http://schemas.sulu.io/template/template)xpointer(/sulu:properties/sulu:block/sulu:types/sulu:type)"/>
             <xi:include href="blocks/hero.xml"
                 xpointer="xmlns(sulu=http://schemas.sulu.io/template/template)xpointer(/sulu:properties/sulu:block/sulu:types/sulu:type)"/>
             <xi:include href="blocks/hero-startpage.xml"

diff --git a/config/templates/includes/tailwind/blocks/excerpt-image.xml b/config/templates/includes/tailwind/blocks/excerpt-image.xml
@@ -0,0 +1,25 @@
+<properties xmlns="http://schemas.sulu.io/template/template"
+            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+            xmlns:xi="http://www.w3.org/2001/XInclude"
+            xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">
+  <block name="blocks" default-type="excerpt-image">
+    <!-- @see https://docs.sulu.io/en/2.1/reference/content-types/block.html -->
+    <types>
+      <type name="excerpt-image">
+        <meta>
+          <title>Excerpt Image</title>
+        </meta>
+        <properties>
+          <property name="headline" type="text_line">
+            <meta>
+              <title>Überschrift</title>
+            </meta>
+            <params>
+              <param name="headline" value="true"/>
+            </params>
+          </property>
+        </properties>
+      </type>
+    </types>
+  </block>
+</properties>
diff --git a/templates/includes/tailwind/blocks.html.twig b/templates/includes/tailwind/blocks.html.twig
@@ -2,7 +2,8 @@
     {% for block in content.blocks %}
         <section aria-label="{{ block.type|capitalize }}" class="mx-auto max-w-7xl px-4 pt-12 pb-4">
         {% include 'includes/tailwind/blocks/' ~ block.type ~ '.html.twig' with {
-            content: block
+            content: block,
+            extensionexcerpt: extension.excerpt
         } only %}
         </section>
     {% endfor %}

diff --git a/templates/includes/tailwind/blocks/excerpt-image.html.twig b/templates/includes/tailwind/blocks/excerpt-image.html.twig
@@ -0,0 +1,5 @@
+{% if extensionexcerpt.images[0] is defined and extensionexcerpt.images[0] is not empty %}
+  {% set source = extensionexcerpt.images[0].thumbnails['content-full.webp'] %}
+  {% set alt = extensionexcerpt.images[0].description %}
+  <img class="h-auto max-w-full" src="{{ source }}" alt="{{ alt }}">
+{% endif %}