Responsive images in lightgallery.js

Question

I'm using lightgallery.js on this site: https://weareholis.org/lab/projects/placestogrow
For the lightbox view the site is loading unnecessarily huge versions of the images.
I'm pulling the images from Hygraph CMS into a data-src tag of a div (I assume the problem is that it's not an img with an src tag, but I can't do that with Lightgallery).
Lightgallery supports responsive images with a data-srcset tag, but I'm not sure how to work with that in Webstudio https://www.lightgalleryjs.com/demos/responsive/. Could anyone help me with that?

Oleg Isonen · Answer

based on their example you can just use the image component which is responsive automatically, you don't need their data-responsive attributes

Oleg Isonen · Answer

I am not sure what their api is, either data-responsive is optional and they provide some other ways of using it or I don't recommend using it at all

Oleg Isonen · Answer

whatever library you use make sure it works with standard <img> tags, no library-custom attributes

Oleg Isonen · Answer

you could hack it all together by reading the things from the dom from img tag and providing it to the library too, but that's more a workaround and requires some skill

Daniel Kozma · Answer

@Oleg Isonen I'm doing some tests, and it seems like the issue is unrelated to the library. Here I have only a set of tiny thumbnails pulled from the cms (and nothing else), and it looks like the site is still loading huge images. What am I missing?
https://weareholis.wstd.io/other/test

Oleg Isonen · Answer

your width/height in props

Daniel Kozma · Answer

In case anyone else is looking for a solution later:I used this little workaround to make the lightgallery.js lightbox images resposive:$('.light-gallery-item').each(function() { var img = $(this).find('img'); if (img.attr('srcset')) { $(this).attr('data-responsive', img.attr('srcset')); }
});

Daniel Kozma · Answer

for thumbnails: I ended up deleting the width and hight attributes, and added a sizes attribute like this: (max-width: 379px) 33vw, (max-width: 767px) 25vw, (max-width: 991px) 20vw, 200px

Daniel Kozma · Answer

@Oleg Isonen thanks a lot for the help! 🙇‍♂️

Oleg Isonen · Answer

nice, though for the love of god, don't use jquery

Oleg Isonen · Answer

document.querySelectorAll('.light-gallery-item').forEach(item => {
const img = item.querySelector('img');
if (img && img.hasAttribute('srcset')) {
item.setAttribute('data-responsive', img.getAttribute('srcset'));
}
});

Oleg Isonen · Answer

gpt converted your code, didn't test

Daniel Kozma · Answer

@Oleg Isonen one more question here. If I ditch lighgallery.js, is there a way to achieve similar results that you would recommend?

Oleg Isonen · Answer

just to be clear I don't know this package specifically and jquery has nothing to do with it, it works without jquery ...

Oleg Isonen · Answer

they don't recommend to use it with jquery either

Oleg Isonen · Answer

there are generally tons of lightbox/galleries packages

Join the Webstudio community

Responsive images in lightgallery.js