New Inline Gallery Type

LiveWhale
1

I am struggling with creating a new inline gallery type. I read the Gallery Types documentation but it’s not helping much.

What I want is an inline gallery that functions the same as the “default” one, that opens the exact same modal slideshow. But I want the inline gallery widget to show small thumbnails of all images in the gallery, not just the first one. No captions or anything else. Just thumbnails that can be clicked to open the modal slideshow.

What is the best way to do this?

2

Hi Jon,

Sure thing – the default.xml shows the one thumbnail in <arg id="format_widget"> and then the rest are encoded into <div class="lw_gallery_slide_image"> inside of <arg id="format">. You could try revamping that <field var="gallery_image" cast="encoded"/> to remove the encoding and/or swap gallery_image with gallery_thumbnail to get the smaller wise. You’d then probably need to adjust the JS/CSS to show it at all times.

Otherwise, to work something up from scratch, I think you’d used <arg id="format"> (formatting for each gallery result) and then {gallery_thumbnail} inside there to show the image tag. Hope this helps!

3

I do not see an easy way to make this work. The thumbnails are marked up inside <arg id="format"> but they are used in <arg id="format_widget"> inside .lw_gallery_modal to set up the carousel. So any changes I make to <arg id="format"> affect the modal. The JS that inits the modal expects things to be in a very specific format. For example, I can’t remove the encoding or the JS fails.

I guess I could use them outside the modal too, and use CSS to style them differently, but there is another issue. The JS wraps the whole gallery with a link that opens the modal (if there is more than one slide). I would want it to wrap each thumbnail with a link that opens the modal to that specific image.

So now it would require changes to the JS which I was trying to avoid. I was hoping to use the exact same JS so I’m not maintaining two separate scripts.

I’ll have to think more about this to decide if it’s worth it.

4

Thanks Jon – that makes sense, I imagine since the bundled JS is really purpose-built for this specific markup, probably revamping the gallery might just require new JS (or, using a separate JS like swiper or some other pre-existing slider plugin).

5

Yeah, we actually already have an inline gallery type that does what I want using the old Shadowbox JS. I was hoping to move away from it for a couple of reasons. One, it would be nice if all full-screen galleries on the site had the same appearance. Two, I don’t think Shadowbox has the best accessibility, while the default LW gallery has been designed with accessibility in mind.

6

Interestingly, the JS does look like it has the ability to open to a specific image…

// Opens the fullscreen gallery modal
// if an image is passed, it is displayed first
_open: function _open($image) {

But it still wraps the whole gallery with a single link, so there seems to be no opportunity to specify a specific image.