Skip to content

[feat] Show Multiple Images as a Carousel#302

Merged
superextinct merged 8 commits intomainfrom
feature/image-gallery
Mar 4, 2026
Merged

[feat] Show Multiple Images as a Carousel#302
superextinct merged 8 commits intomainfrom
feature/image-gallery

Conversation

@superextinct
Copy link
Copy Markdown
Collaborator

This PR enables editors to display multiple images in a carousel.

Changes

  • Adds a new Gallery entry type in Craft CMS with an images field and auto-generated title (e.g. "3 Images")
  • Adds the Gallery entry type to the modules matrix field and the textEntryTypes rich-text field so editors can insert galleries anywhere
  • Adds a <gallery-carousel> custom element powered by Splide
  • Lazily loads Splide via dynamic import() to keep the initial JS bundle small
  • Renders each image at a 3:2 crop with caption, credit
    (pipe-separated), and optional secondary rich-text caption
  • Gallery breaks out of the text column to full viewport width in the columns rich-text layout
  • Refactors the srcset macro: Stops generating srcset urls for unsupported image formats (gif/svg), removes "unkown" from the output

@superextinct superextinct requested a review from harryfk March 3, 2026 14:07
@harryfk
Copy link
Copy Markdown
Collaborator

harryfk commented Mar 3, 2026

Yay, web components! I took a look, good stuff! Noticed a few minor things:

  • There doesn’t seem to be any margin top/bottom for me, it goes right to the edge of the next module
  • Long secondary image captions stretch the slide container, causing gaps, instead of breaking into multiple lines
  • I double-checked the figma and apparently the grey captions should be uppercased

Screenshot showing missing margins and the caption issue:
Screenshot 2026-03-03 at 21 39 29

I’m also wondering whether we should indeed crop the images to a fixed aspect ratio … this will cause issues with portrait images, for sure. On Publix we have a similar slider and the images all get the same height, while keeping their original ratio. Maybe this would be a better fit?

Screenshot 2026-03-03 at 21 45 26

@superextinct
Copy link
Copy Markdown
Collaborator Author

Thanks for being thorough, @harryfk! I've fixed the spacing and width issues and also modified the transform to use the asset's original aspect ratio:

Bildschirmfoto 2026-03-04 um 12 07 02

@harryfk
Copy link
Copy Markdown
Collaborator

harryfk commented Mar 4, 2026

Woah, that looks ace! I’ll quickly check it locally.

Copy link
Copy Markdown
Collaborator

@harryfk harryfk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coool, this looks much better now! I’ve tested it locally and it all looks great to me. In my RSS reader the markup structure with slides as a list and then also another list in the figcaption is a bit odd, but also makes sense … I’m leaning towards keeping it like this.

Image

Also works great as a standalone module! All good from my end.

@superextinct superextinct merged commit 45a9491 into main Mar 4, 2026
1 check passed
@superextinct superextinct deleted the feature/image-gallery branch March 4, 2026 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants