Resize images ACF loop

[ICT73]

How can I resize images to container, if not have same dimension?

thanks

[tristup]

Hi @xonetit,

Thanks for reaching out.
Sometimes the only screenshot doesn’t help us to recognize the issue you are having. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific page URL where you are having this issue
– WordPress Editor username/password to check the editor’s view

To create a secure note, click the key icon underneath any of your posts.

Thanks

[ICT73]

[kory]

Howdy, @xonetit! Thanks for writing in…the Better Faster Stronger template’s gallery was setup to accommodate images that were pre-cropped to the same size before outputting them into the design. If you are wanting to make accommodations for images of a potentially variable size, you will need to make a few adjustments to the template. To start, I’ve added an image that is much taller than the others in my Looper Provider:

The first thing we’ll need to do is go up to the Figure Element above the Image and set a hard height in its dimensions. You can of course experiment with using the “Minimum” and “Maximum” values as well similar to the techniques I employed on the width settings, but for this demonstration I am just going to set a “Base” value to illustrate things:

Notice that once we place the height of 240px on the Figure, our very tall image has become cut off due to it extending past the bounds of the Figure, while our other images which have a shorter proportional height have a bit of a gap beneath them as they are not filling out our now 240px tall Figure. To address this, the next setting to update is the height control on our Image Elements:

Since we have a hard height on our Figure, we can now use 100% as the height value on our Image, which will ensure that it stretches to fill the entire dimensions of its parent container (or does not extend beyond the bounds of the container in the case of our taller image). However, you will notice that doing this has distorted our tall image (and our shorter ones, it is simply not as visible for these instances). This is due to the Image’s default Object Fit setting, which is fill. This is the native browser default for images, and it is what creates this scrunched and / or stretched version of our images in situations like this. To avoid this look, we will need to change this setting to cover, which will keep our src's intrinsic values and place it within our canvas like so:

You will of course need to make these adjustments to suit your tastes, and then apply them to your “Second Line” as well, but this is the general strategy to take when trying to accomplish what you are after. Hopefully this helps to point you in the right direction…cheers!

[ICT73]

thanks kory

[prakash_s]

You are welcome @xonetit