Image transforms and modal gallery

Question

I'm using a gallery where when an image is clicked it opens a larger version in a modal.

<li><a href="{{ varGalleryImages.getUrl('galleryLarge') }}"><img src="{{ varGalleryImages.getUrl('galleryThumb') }}" alt=""></a></li>

Initially the larger 'galleryLarge' images wouldn't load because the transform hadn't been created. After some digging around on here I found that adding 'generateTransformsBeforePageLoad' => true, to craft/config/general.php would create the transforms (all of them) before the page loads. This worked a treat and now my modal works as expected!

Problem: The page now takes forever to load. I stopped this issue by removing the line from general.php but now of course, any new images added by the client won't get transformed.

Any ideas around this issue would be great.

Many thanks

Martin

Answer 1

When 'generateTransformsBeforePageLoad' => true is set, is it taking a long time to load because of the sheer number of images you have or is it only on the first request when all of the transforms are being generated?

After they are generated, they are quickly served directly by Apache (or whatever your webserver is) and Craft doesn't get involved.

If it's because of the sheer number of images you have, then you'll probably want to look at a front-end method of lazy loading the images as they are needed.