Forum

Thread tagged as: Question

Unexpected behaviour when resizing and cropping image

I have the following code:

srcset="<perch:pages type="image" id="image" width="100" height="100" crop="true" /> 100w,
    <perch:pages type="image" id="image" width="200" height="200" crop="true" /> 200w,
    <perch:pages type="image" id="image" width="400" height="400" crop="true" /> 400w"

What this should do is create a 400px thumbnail. Providing the base image is greater than 400px in either dimension this works fine.

However say, if the image has a width of less than 400px and a height greater than 400px it results in a non-square crop.

I think I understand what's going on, the image is resizing first, then cropping.

What I want is a guaranteed square image, even if it defaults to a smaller image to achieve the proportions.

Is this possible?
Tony Astley

Tony Astley 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

It's giving you an image that fits within the specified 400px square. The template tag says that the image should fit into a bounding box of 400 x 400 px, cropping if necessary to make that happen.

If your content editor is uploading images that don't meet the spec, then you're into the realms of error handling. What works for you in your scenario might be different for what works best for someone else. Could you address this with CSS on the containing element to make sure the space taken up by the element is square?
Tony Astley

Tony Astley 0 points

3 years ago

Yeah, I've fixed it in CSS - just wondered if there was a specific way to get the target I was missing.

Thanks Drew.