Hello,
I've a Masonry gallery on a page with the images showed from a folder.
The problem is that the gallery has a lot of images and the page loading could be very slow.
My question... is there a functionality on App Connect framework (or an extension) that allow me to resize the images automatically when the page load, storing the thumb files in a "cache folder" (e.g. /images/images_cache/"?
The resize would have three options:
"Stretch to fit" (will resize the image to fit the width and height specified, this will not maintain the original image's aspect ratio);
"Fit to box" (will resize the image so that it fits within the dimensions specified);
"Crop from center" (will crop the image from the center to fit the specified dimensions);
"Proportioned to box" (resizes the image to fit within the box dimensions specified in the HTML without adding a fill color to fill any empty space);
Other solution (and perhaps the best) could be a "lazy load system", loading the images on the website asynchronously (above-the-fold content is fully loaded only when the images appears in the browserâs viewport, if the users donât scroll all the way down, images placed at the bottom of the page wonât even be loaded).
For image resizing there are many options while uploading through server connect.
Also I am almost sure that there is an option for reszing images that already exist in a folder. Never used it though this is why I am saying that I am almost sure.
Hi Michele - how is that supposed to work?
Should the folder be scanned, then images resized once or do you expect it to resize them every time a user loads the page?
How are the images added in the folder?
So the images are loaded manually on the folder through ftp.
I think (reading your comments above) that the best solution should be a lazy load system.
As an example you can see your Masonry showcase: https://showcase.dmxzone.com/MasonryPortfolio/index.html
Iâd like to load the images below the browserâs viewport only if I scroll down.
âApp Connect Preloaderâ extension has this functionality?
We already have an image resizing component in server connect - so it should be pretty easy to build an image resizer your self as server connect action. Usually executed after uploading a new image.
Then you can resize it as often as you want and save those different sizes in the cache.
Ok George but Iâm loading the images from a folder, there isnât any uploading process (the user load manually the images from his ftp software).
Anyway I think that for Masonry gallery a âlazy load systemâ could be a better solution.
Iâll wait for Teodorâs solution (e.g. if I can use App Connect Preloader).
I think there is a solution to this by using cookies.
Consider this.
Create a paged query
Set a cookie value to 10
Set limit for the paged query the value of the cookie
With the use of âbrowser componentâ , when the browser reaches a certain spot, update the cookie value to +10 (10+10=20)
This will force the paged query to load 20 etc
@Teodor I donât know if this has any relevance but the following is a thread that @George had promoted to a Feature Request, maybe he has made some progress on it, and maybe it can be adapted to what is being discussed here.
If I understand correctly, there are two issues: 1) lazy loading of images and 2) creating images of different sizes automatically - as pages are loaded.
Regarding the first issue, it would be good if options were built into the image components to enable this. Until they are, perhaps something like this might be an option. There are quite a few examples of live sites using this script.
Regarding the second issue, I think I might need a feature like this, where images are uploaded via FTP, not necessarily via a website at all. A method I might use is where the sizes you need are set up in an htaccess file which redirects to a PHP file which does the resizing/sharpening, and stores the images in a cache. When a page loads, images are only created if theyâre not already in the cache - unless the cached versions are out of date (ie an image has been replaced).
Obviously this is only useful if you have an htaccess file and have access to it. I found the script some time ago and experimented with it - and it seemed to work well. The site where I found it no longer exists. If itâs of interest I can send you the PHP file and the htaccess examples I created.
Never tried it but there would seem to be the functionality to write a routine to do this with server connect.
Use the file management option to collect all the file names from the folder, set up a repeat to iterate through all the file names, perform an image resize on each image then re save them after resize.
exactly and with the file exists, you can even check if the image is already resized in the cached folder. So you can do this way only resizes for the not yet resized images. Run this daily and you are done!
This is a problem my clients often have - and, at least in my experience, it's always caused by EXIF metadata. It's such a common issue that I built an EXIF removal feature into some software I develop. This is some information I include to explain the problem (it's not particularly technical and may not be 100% accurate technically, but hopefully it makes sense):
EXIF data is information embedded in image files by digital cameras. This may include a lot of detailed information about the camera, settings, dates and location etc. It may also include information about the orientation of images - information which may be interpreted incorrectly by some software. Eg an image may appear correctly when viewed on your camera but may appear on a website rotated incorrectly.
Many digital cameras and phones have orientation sensors. To display images with the correct orientation, orientation information is saved as part of the EXIF metadata in the image - rather than actually rotating the image. One solution to avoid confusion is to remove the EXIF data and rotate images if necessary - so they will appear in the correct orientation in any situation.
You may want to keep the EXIF data for other reasons, but if you do want to remove it, a program I use for batch processing is https://www.irfanview.com/ (Windows only)
It's not a lazy-load script.