feat: add image gallery content element with configurable columns and backend preview

packages/base/ContentBlocks/ContentElements/imagegallery/templates/frontend.html

@@ -0,0 +1,63 @@
+<f:layout name="Default" />
+<f:section name="Header"></f:section>
+<f:section name="Main">
+  <f:if condition="{data.header}">
+    <h2 class="text-center mb-8">{data.header}</h2>
+  </f:if>
+
+  <f:if condition="{data.image}">
+    <f:variable name="columnClass">
+      <f:switch expression="{data.columns}">
+        <f:case value="2">md:grid-cols-2</f:case>
+        <f:case value="3">md:grid-cols-3</f:case>
+        <f:case value="5">md:grid-cols-5</f:case>
+        <f:defaultCase>md:grid-cols-1</f:defaultCase>
+      </f:switch>
+    </f:variable>
+
+    <div class="grid grid-cols-1 {columnClass} gap-6 md:gap-8">
+      <f:for each="{data.image}" as="image">
+        <div class="relative">
+          <f:if condition="{image.link}">
+            <f:then>
+              <f:link.typolink parameter="{image.link}" class="block w-full h-full">
+                <picture class="block w-full h-full">
+                  <source
+                    type="image/webp"
+                    srcset="{f:uri.image(image:image, width:'320', cropVariant:'default', fileExtension:'webp')} 320w,
+                            {f:uri.image(image:image, width:'768', cropVariant:'default', fileExtension:'webp')} 768w"
+                    sizes="(max-width: 767px) 90vw, 33vw" />
+                  <img
+                    src="{f:uri.image(image:image, width:'768', cropVariant:'default')}"
+                    srcset="{f:uri.image(image:image, width:'320', cropVariant:'default')} 320w,
+                            {f:uri.image(image:image, width:'768', cropVariant:'default')} 768w"
+                    sizes="(max-width: 767px) 90vw, 33vw"
+                    alt="{image.alternative}"
+                    class="w-full h-full object-cover"
+                  />
+                </picture>
+              </f:link.typolink>
+            </f:then>
+            <f:else>
+              <picture class="block w-full h-full">
+                <source
+                  type="image/webp"
+                  srcset="{f:uri.image(image:image, width:'320', cropVariant:'default', fileExtension:'webp')} 320w,
+                        {f:uri.image(image:image, width:'768', cropVariant:'default', fileExtension:'webp')} 768w"
+                  sizes="(max-width: 767px) 90vw, 33vw" />
+                <img
+                  src="{f:uri.image(image:image, width:'768', cropVariant:'default')}"
+                  srcset="{f:uri.image(image:image, width:'320', cropVariant:'default')} 320w,
+                          {f:uri.image(image:image, width:'768', cropVariant:'default')} 768w"
+                  sizes="(max-width: 767px) 90vw, 33vw"
+                  alt="{image.alternative}"
+                  class="w-full h-full object-cover"
+                />
+              </picture>
+            </f:else>
+          </f:if>
+        </div>
+      </f:for>
+    </div>
+  </f:if>
+</f:section>