Add thumbs support?

Created on 6 July 2025, 8 days ago

Problem/Motivation

I need an entity/media/etc. gallery/carousel that has the classic single large image, plus a set of small thumbnails, look.

Proposed resolution

Add support for Swiper's "thumbs" module. https://swiperjs.com/swiper-api#thumbs

I just found swiper and swiper_formatter today. So far it seems to fit my needs, except for the lack of thumbnails. I've started looking at the code, but have not dug in very deep yet.

Where would I start if I wanted to develop this feature myself?

Remaining tasks

?

User interface changes

?

API changes

?

Data model changes

?

✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States jerrac

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jerrac
  • πŸ‡³πŸ‡±Netherlands nk_

    This is already possibly with usage of two View modes where one will render thumbs, each thumb will via settings on formatter link to Dialog (for example) that contains images. See screenshots below. The other way is to use some of provided hooks where. you basically have access to all Swiper config and can make logic for thumbnails too. Hope it helps, let us know!

  • πŸ‡ΊπŸ‡ΈUnited States jerrac

    Thanks for the quick reply. After a bit of figuring out my own misunderstandings, I did get something close to what your example does.

    It just is not quite what I need. https://swiperjs.com/demos#thumbs-gallery-loop is almost what I want. I'd just need to have it use a dialog to take over the full window if someone clicks the large image.

    I did start to dig into what it would take to implement the swiper.js thumbs module.

    I think I could just create a new formatter that is basically a wrapper around your formatters. That formatter would configure two instances of your formatters, one for the large image, and one for the thumbnails. It would pass the settings on to yours via the field formatter plugin manager's createInstance() method.

    Where I'm conceptually stuck, though, is how to get the large image gallery passed to the thumbs image gallery in javascript. swiper_formatter.js would run for both instances. But how would I tell it to take the swiper object for the first instance, and put in the second's `thumbs.swiper` setting? I can see how to just modify normal settings, numbers/bool/text, but this setting needs to be the initiated javascript gallery object for the large gallery.

    How would I get that object into the second gallery?

    I've done a lot using php as far as drupal module development is concerned, but I have not spent a lot of time on the javascript side of things. So any pointers would be helpful. In the meantime, I'll go see what I can learn in the docs.... If I can find the right ones...

    Thanks!

Production build 0.71.5 2024