Hi all!
I’m using the Gallery Extra for a simple image gallery.
It all works fine, but if I have too many images in there, it causes an error on iOS16 on iPhone.
I’ve checked the PHP INI file, and the memory limit is set to 1024M which I would have thought would be enough?
Anything else I can try?
I have 72 images in the gallery - so it’s not huge!
Is this timeout in the manager or on the frontend?
If it was a memory problem on the server, wouldn’t that be the case for all browsers on all devices (and not specific to iOS)?
Hi Harry,
It’s on the front end. Yes that’s a good point - I just wondered if iOS on certain devices were more sensitive to the memory it’s using? (I’m clutching at straws i know!)
Weirdly, I’ve tried on an older iPhone (iPhone XS) running iOS16 and it’s fine! So it isn’t just the OS, but the model of iPhone! (iPhone 12)
This is my snippet call which works fine:
[[!Gallery? &album=`[[*assignedGallery]]` &thumbTpl=`galleryThumb` &thumbWidth=`300` &thumbHeight=`300` &useCss=`0` &limit=`48` ]]
but if I change the limit to 72, it no longer works. Which made me think it could be an issue with memory.
I suppose it could be possible that it’s an issue with an image file?!
This is really weird.
Is there anything special in the chunk galleryThumb? Do you output the thumbnail and not the original image?
In general these images are loaded one by one from the server and they should all be cached. If it is a memory problem, then is has to be client-side.
Yeah it is wierd!
This is my galleryThumb chunk:
<div class="cssbox">
<a id="img-[[+idx]]" href="[[~[[*id]]]]#img-[[+idx]]"><img class="cssbox_thumb" loading="lazy" src="[[+image_absolute:imgix=`w=500&h=500&fit=crop&crop=faces&auto=format`]]" />
</a>
<span class="cssbox_full"><img src="[[+image_absolute:imgix=`w=1500&auto=format`]]" loading="lazy" /></span>
<a class="cssbox_close" href="[[~[[*id]]]]#void"></a>
<a class="cssbox_prev" href="[[~[[*id]]]]#img-[[+idx:decr]]"><img src="/assets/ui/chevron-left.svg"/></a>
<a class="cssbox_next" href="[[~[[*id]]]]#img-[[+idx:incr]]"><img src="/assets/ui/chevron.svg"/></a>
</div>
I am loading the thumbnail AND the larger image for the CSS modal.
The images are hosted on a CDN called IMGIX - but I have tried it with the images hosted locally and it’s still the same problem.
And what exactly does the imgix output modifier do?
With this chunk the Gallery extra is barely involved at all. (But it probably generates a thumbnail for every image that is then never used at all.)
The imgx output modifier works similar to pthumb, but it’s more intelligent - it crops the photo with facial recognition, and serves the images from an External CDN. You’re correct, I’m not using the gallery thumbnail at all.
And where are the original images stored? On your server or on imgix.com?
Can you even create a gallery item in Gallery with an external source?
With this setup, the Gallery extra only outputs a simple list of gallery items. So I doubt the problem is the Gallery extra.
I suppose you use the Imgix extra that in turn uses the imgix/imgix-php library.
Is this library up to date (as this MODX extra is already 4 years old)?
The original images are uplaoded to the server via the gallery extra, so the gallery items are all created in Gallery - it’s just that the thumbnails and larger versions are created and stored within Imgix.
That’s corret I’m using the IMGIX extra.
But the issue occurs even if I change the chunk to bypass imgix and use pthumb.
I just recreated the gallery using migx instead, and it works better - but is a little clunky.
The main use for this is the Face recognition to be honest - the thumbnails are brilliant - whereas with pthumb they are pretty uncontrollable so end up cropping of heads!
A client-side memory error sounds to me like JavaScript is probably involved. Maybe a gallery or lightbox script that is trying to (pre)load the images into memory?
Could also use MoreGallery with the manual cropper to have full control over the thumbnails. Just to offer another alternative to Gallery and MIGX. 
Ah Ok Mark thanks. The lightbox is pure CSS so can’t be a JS error 
I’d love to use MoreGallery, but the problem is there are a lot of imags, so it’s nice that the facial recognition can crop all the thumbnails nicely without manually cropping - but will bear it in mind for future projects!
Load up dev tools (ctrl-shift-i) and try it. Check the Console tab for errors, and the Network tab (after clearing it and reloading the page) for clues about where it’s breaking down.