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

Steve Suderman · Answer

Hi @Daniel Kozma I am working on connecting lightGallery to my Contentful CMS. I am not quite sure of a few details on getting them connected. Would you happen to have a read-only link you could share of how you did it

Daniel Kozma · Answer

LightGallery didn't work with responsive images for me, I ended up using Fancybox instead. It works fine but not perfect. Link https://p-e39a4771-4814-436c-b94c-56db991e7ed7.apps.webstudio.is/?authToken=62db8483-6e0f-46e7-9ba5-6ac5d0466bc9&mode=preview

I also made a lightbox using swiper.js, which is probably a better solution. It gives you much better control for responsive images, easier to style, also free. It's work-in-progress, but here's a link: https://p-7df346fb-a3da-497a-bbc6-af34cd28e659.apps.webstudio.is/?authToken=19b833bb-6e76-4f7a-b71d-7d3f3325d0c2&mode=preview

Steve Suderman · Answer

Thanks for sending this! much appreciated.

Oleg Isonen · Answer

always turn on client only on those scripts

Steve Suderman · Answer

@Oleg Isonen can you tell me what that means?

Steve Suderman · Answer

I know where to do that. But not sure why.

Oleg Isonen · Answer

https://docs.webstudio.is/university/core-components/html-embed#client-only

Steve Suderman · Answer

@Daniel Kozma I've wasted an entire day on this and maybe I am hitting the same problem you did? Attempting swiper-js.If you drop the attached file into your browser it will work perfectly.

Steve Suderman · Answer

Embedding the same content into WS and the images will no longer respect container size. when going to a smaller window size / container size, it pushes outside of parent div.

Steve Suderman · Answer

https://p-0c2b96a6-f55c-4ef5-b0c1-333a1c62e5b4.apps.webstudio.is/?authToken=833b380c-da1f-4b8f-b771-0db9026a7906&mode=preview

Steve Suderman · Answer

https://swiper-sykzb.wstd.io/

Daniel Kozma · Answer

@Steve Suderman it might not be the right solution but setting width: 100vw on the body in the webstudio style panel seems to solve it

Join the Webstudio community

Responsive images in lightgallery.js