[feat] Show Multiple Images as a Carousel

config/project/entryTypes/gallery--0a3f8849-b320-4a0e-929f-d5d0fddc7c45.yaml

@@ -0,0 +1,44 @@
+allowLineBreaksInTitles: false
+color: null
+description: null
+fieldLayouts:
+  91588f5f-7383-49e3-aecf-93c77f1f26d5:
+    cardThumbAlignment: end
+    cardView:
+      - 'layoutElement:217a2c90-eeb9-495e-8605-be8adfd8e58d'
+    tabs:
+      -
+        elementCondition: null
+        elements:
+          -
+            dateAdded: '2026-03-03T11:10:08+00:00'
+            editCondition: null
+            elementCondition: null
+            elementEditCondition: null
+            fieldUid: 861f15c4-66e5-4a20-8b69-3bca664a1602 # Images
+            handle: null
+            instructions: null
+            label: null
+            required: true
+            tip: null
+            type: craft\fieldlayoutelements\CustomField
+            uid: 217a2c90-eeb9-495e-8605-be8adfd8e58d
+            userCondition: null
+            warning: null
+            width: 100
+        name: Inhalt
+        uid: dd2bee79-b80d-4118-bc69-ed1561abee55
+        userCondition: null
+    thumbFieldKey: 'layoutElement:217a2c90-eeb9-495e-8605-be8adfd8e58d'
+handle: gallery
+hasTitleField: false
+icon: null
+name: Gallery
+showSlugField: false
+showStatusField: false
+slugTranslationKeyFormat: null
+slugTranslationMethod: site
+titleFormat: '{{ "{n,plural,=0{No image} =1{1 Image} other{# Images}}"|t(''site'', {n: images.count()}) }}  '
+titleTranslationKeyFormat: null
+titleTranslationMethod: site
+uiLabelFormat: '{title}'

config/project/fields/modules--1bf40018-82e4-4e44-bbd6-6f49c132678d.yaml

@@ -104,6 +104,14 @@ settings:
         -
           - group
           - Blocks
+    -
+      __assoc__:
+        -
+          - uid
+          - 0a3f8849-b320-4a0e-929f-d5d0fddc7c45 # Gallery
+        -
+          - group
+          - Blocks
     -
       __assoc__:
         -

config/project/fields/textEntryTypes--13a0aaca-3bd8-4653-b163-69738ce277c3.yaml

@@ -26,7 +26,14 @@ settings:
         -
           - uid
           - c08345c7-f10a-42ce-b893-7f2e82a46fbb # Embed
+    -
+      __assoc__:
+        -
+          - uid
+          - 0a3f8849-b320-4a0e-929f-d5d0fddc7c45 # Gallery
+  expandEntryButtons: false
   fullGraphqlData: false
+  parseEmbeds: false
   purifierConfig: null
   purifyHtml: true
   showUnpermittedFiles: false

config/project/project.yaml

@@ -1,4 +1,4 @@
-dateModified: 1772469373
+dateModified: 1772546154
 elementSources:
   craft\elements\Entry:
     -
@@ -190,6 +190,7 @@ fs:
     url: /uploads
 meta:
   __names__:
+    0a3f8849-b320-4a0e-929f-d5d0fddc7c45: Gallery # Gallery
     0a7d996f-dc9c-416e-ab72-2d475eaa550b: Talk # Talk
     0b9eb562-64e5-4b3c-9478-8cefd24e8039: Text # Text
     0d857c68-7bb1-4ce7-b61f-671446aa8bb3: SEO # SEO

package.json

@@ -18,6 +18,7 @@
     "vite-plugin-restart": "^2.0.0"
   },
   "dependencies": {
+    "@splidejs/splide": "^4.1.4",
     "@zackad/prettier-plugin-twig": "^0.16.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "react": "^19.1.0",

src/js/components/gallery-carousel.js

@@ -0,0 +1,30 @@
+import "@splidejs/splide/css/core";
+
+export class GalleryCarousel extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  async connectedCallback() {
+    const { default: Splide } = await import("@splidejs/splide");
+
+    const instance = new Splide(this.querySelector(".splide"), {
+      arrows: false,
+      pagination: false,
+      padding: "calc(var(--spacing) * 5)",
+      gap: 24,
+      autoWidth: true,
+      drag: "free",
+      snap: false,
+      easingFunc: (t) => 1 - Math.pow(1 - t, 5),
+      breakpoints: {
+        767: {
+          padding: "calc(var(--spacing) * 2)",
+          gap: 16,
+        },
+      },
+    });
+
+    instance.mount();
+  }
+}

src/js/main.js

@@ -5,21 +5,24 @@ import { MainNav } from "./components/main-nav";
 import { TextAnimation } from "./components/text-animation";
 import { ProjectFilters } from "./components/project-filters";
 import { PixelGrid } from "./components/pixel-grid";
+import { GalleryCarousel } from "./components/gallery-carousel";
 
 if (
   !customElements.get("display-toggle") ||
   !customElements.get("main-nav") ||
   !customElements.get("bar-chart") ||
   !customElements.get("text-animation") ||
   !customElements.get("project-filters") ||
-  !customElements.get("pixel-grid")
+  !customElements.get("pixel-grid") ||
+  !customElements.get("gallery-carousel")
 ) {
   customElements.define("display-toggle", DisplayToggle);
   customElements.define("main-nav", MainNav);
   customElements.define("bar-chart", BarChartTest);
   customElements.define("text-animation", TextAnimation);
   customElements.define("project-filters", ProjectFilters);
   customElements.define("pixel-grid", PixelGrid);
+  customElements.define("gallery-carousel", GalleryCarousel);
 }
 
 window.addEventListener("beforeprint", () => {

templates/_macros.twig

@@ -1,46 +1,36 @@
 {% macro sizes(size) %}
-  {% apply spaceless %}
+  {%- apply spaceless -%}
   {% set sizes = {
     textCol: "(min-width: 1024px) 800px, 100vw"
   } %}
   {{ sizes[size] }}
-  {% endapply %}
+  {%- endapply -%}
 {% endmacro %}
 
-{% macro srcSet(image) %}
-  {{
-    [300, 800, 1200, 1500, 2000]|reduce(
-      (carry, v) => "#{carry}, #{image.getUrl("w" ~ v)} #{v}w",
-      ""
-    )
-  }}
+{% macro srcSet(image, widths = [300, 800, 1200, 1500, 2000], handleSuffix = '') %}
+  {%- apply spaceless -%}
+    {% if image.mimeType != 'image/gif' and image.mimeType != 'image/svg+xml' %}
+      {% set urls = [] %}
+      {% for width in widths %}
+        {% set urls = urls|merge([image.getUrl("w" ~ width ~ handleSuffix) ~ " #{width}w"]) %}
+      {% endfor %}
+      {{ urls|join(', ') }}
+    {% else %}
+      {{ image.getUrl() }} 100w
+    {% endif %}
+  {%- endapply -%}
 {% endmacro %}
 
 {% macro srcSetThreeByTwo(image) %}
-  {{
-    [800, 1200, 1600, 2000]|reduce(
-      (carry, v) => "#{carry}, #{image.getUrl("w" ~ v ~ "__3_2")} #{v}w",
-      ""
-    )
-  }}
+  {{- _self.srcSet(image, [800, 1200, 1600, 2000], '__3_2') -}}
 {% endmacro %}
 
 {% macro srcSetFourByThree(image) %}
-  {{
-    [800, 1200, 1600, 2000]|reduce(
-      (carry, v) => "#{carry}, #{image.getUrl("w" ~ v ~ "__4_3")} #{v}w",
-      ""
-    )
-  }}
+  {{- _self.srcSet(image, [800, 1200, 1600, 2000], '__4_3') -}}
 {% endmacro %}
 
 {% macro srcSetFiveByFour(image) %}
-  {{
-    [800, 1200, 1600, 2000]|reduce(
-      (carry, v) => "#{carry}, #{image.getUrl("w" ~ v ~ "__5_4")} #{v}w",
-      ""
-    )
-  }}
+  {{- _self.srcSet(image, [800, 1200, 1600, 2000], '__5_4') -}}
 {% endmacro %}
 
 {% macro fundingStatus(entry) %}{% apply spaceless %}
@@ -69,4 +59,4 @@
 
 {% macro inFunding(entry) %}{% apply spaceless %}
   {{ _self.fundingStatus(entry) in ["inDuration", "inDurationWithSecondStage"] }}
-{% endapply %}{% endmacro %}
+{% endapply %}{% endmacro %}

templates/_modules/modules.twig

@@ -96,6 +96,13 @@
               context: context
             })
           }}
+        {% case "gallery" %}
+          {{
+            module.render({
+              class: "mb-10",
+              context: context
+            })
+          }}
         {% default %}
       {% endswitch %}
     {% endfor %}

templates/_partials/entry/gallery.twig

@@ -0,0 +1,53 @@
+{% import "_macros" as macros %}
+{% set class = class ?? "my-[60px]" %}
+
+{% set images =
+  entry.images.eagerly().withTransforms(
+    ["w300", "w800", "w1200", "w1500", "w2000"]
+  ).all()
+%}
+
+<gallery-carousel
+  class="{{ class }} block cursor-grab overflow-hidden active:cursor-grabbing"
+>
+  <div class="splide">
+    <div class="splide__track">
+      <ul class="splide__list">
+        {% for image in images %}
+          {% set caption =
+            [image.caption, image.secondaryCaption, image.credit]|filter(
+              value => value is not null
+            )
+          %}
+
+          <li class="splide__slide">
+            <figure class="inline-flex flex-col gap-y-1">
+              <img
+                class="h-28 w-auto flex-none md:h-80"
+                src="{{ image.getUrl("w800") }}"
+                srcset="{{ macros.srcSet(image) }}"
+                alt="{{ image.alt|e("html_attr") }}"
+              />
+
+              {% if caption|length %}
+                <figcaption class="mt-1 w-0 min-w-full">
+                  {% if caption|length %}
+                    <ul class="text-body-14 text-secondary uppercase">
+                      {% for text in caption %}
+                        <li
+                          class="after:text-gray inline after:pr-1 after:pl-[5px] after:content-['|'] last:after:hidden dark:after:text-gray-500 [&>p]:inline"
+                        >
+                          {{ text }}
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  {% endif %}
+                </figcaption>
+              {% endif %}
+            </figure>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</gallery-carousel>

templates/_rich-text/columns.twig

@@ -12,6 +12,10 @@
     "md:[&>div]:mt-10",
     "md:[&>blockquote]:col-start-6",
     "md:[&>blockquote]:col-span-10",
+    "[&>gallery-carousel]:-mx-2",
+    "md:[&>gallery-carousel]:col-start-1",
+    "md:[&>gallery-carousel]:col-span-full",
+    "md:[&>gallery-carousel]:-mx-5",
     "lg:[&>*]:col-start-8",
     "lg:[&>*]:col-span-8"
   ]|join(" ") }}"