Image Resizer functionality applied to the images on the page

Wappler General
#1

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).

Any suggestions?

#2

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.

#3

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?

#4

Hi Teodor,
I’m using the App Connect functionality that allow to load images from a folder:
https://community.wappler.io/t/masonry-gallery-system-with-the-images-display-from-a-folder-is-possible

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?

#5

I think what Michele means is the kind of functionality from Webassist Image Resizer http://www.webassist.com/dreamweaver-extensions/image-resizer

#6

Yes, you’re right.
I don’t mention WebAssist here because is a competitor.

#7

Hey Michele,
no issues mentioning whoever you like here :slight_smile:
WA stopped being a competitor many years back.

Let me check this and i will come back with a solution.

1 Like
#8

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.

2 Likes
#9

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).

#10

App Connect Preloader shows a preloader until the content is being loaded :slight_smile: It’s not a lazy-load script.

#11

Any other solution to suggest me?
The gallery will have more that 50/60 images and I think is not a good idea to wait until all the content is loaded.

#12

Yes, please hold on i will update you on this later.

1 Like
#13

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

#14

@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.

Client-side image resizing before upload

#15

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.

#16

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.

1 Like
#17

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!

#18

While we are talking ‘images’…

What makes an image rotate to an upside down orientation in the dataUrl file preview when selected by the file input?

Are there any remedies for this quirk that I can do locally?

#19

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)

#20

Thanks for the info! This app – as you mention – is Windows only. Maybe I can use Photoshop.