Skip Navigation

[Resolved] Show all images with same size even when uploading them with different sizes

This support ticket is created 4 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 8 replies, has 2 voices.

Last updated by Nigel 4 years, 8 months ago.

Assisted by: Nigel.

Author
Posts
#1524341

Tell us what you are trying to do?

Hi,
I'm creating a website using toolset Real Estate reference site. In the search view the images are in different sizes.
I tried to user

[types field="property_images" width="300" height="300" align="center"][/types]

to show all images in same size but still not working.

#1525249

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2020-02-24 at 14.49.57.png

When you insert an image field you have various options for how to resize or crop the images as required to fit the specified dimensions (see screenshot), and in your case it sounds like you want to choose to crop the images so that they are always the same size, resulting in a shortcode something like

[types field='slides' title='%%TITLE%%' alt='%%ALT%%' align='left' size='custom' width='300' height='300' resize='crop' separator=', '][/types]
#1526585

I have used the shortcode you send me but still the images appears with different sizes.

#1526797

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

That's unexpected, unless your images are smaller than 300px * 300px, as the crop option won't expand the images to fill that size.

Can I take a look at your site to see?

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

Which page is the search View on?

#1528495

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Thanks for that, looking at your site I can confirm that the issue is with upscaling small images.

There are essentially two options available when inserting the shortcode for the image, one being to "pad" the image so that the image takes up the designated amount of space on the page even if that means some blank space where the image is too small, the other being to stretch the image to expand to the required size.

But in my testing, I found these only work for custom image sizes (rather than registered sizes such as "medium"), and they also only appear to have an effect on portrait images rather than landscape images.

And what I think you want—to upscale the images without distortion—doesn't appear to be possible at all.

I've escalated this so that I can get some clarification from my colleagues about what is intended and whether that works, and I'll get back to you when they share their findings.

#1534901

Thank you. I will be waiting for your reply.

#1535499

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

I had confirmation that this is expected, as registered sizes perform cropping/scaling etc. at the time the images are added, and so cropping/scaling is only applied when outputting images in custom sizes which have not already had it applied.

My colleague did identify a minor problem with padding portrait images that is being looked into further, but it doesn't apply in your case where you are dealing with landscape images that are smaller than the size you want to display them at, for which the stretch option will expand the width as required.

#1538249

What would be the solution in my case?

#1538459

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

There isn't a "WordPress" solution because WordPress doesn't upscale images, full stop.

You can let the browser handle the upscaling by applying a CSS rule of width: 100% to your images on that page.

100% width in this case doesn't mean 100% of the image width, it means 100% of the container width, i.e. it will expand to the width of the column.