Ability to center image when performing resize_crop on-the-fly manipulation

[pyrobob83]

The resize_crop on-the-fly image manipulation isn't working correctly in that it's not cropping to the center of the image like you get when using regular directory manipulations. For example:

<img src="{image_1:resize_crop resize:width='510' resize:height='10000' crop:height='220' crop:maintain_ratio='n'}">

does resize the image to 510px wide then crop to 220px high, but the crop is not vertically centered, eg the top here is the generated image and the bottom is the original:

On a separate (but related) note, I don't think the 'resize' should require both width and height values - both aren't required in regular directory manipulations. In my example above, you must specify the resize:height parameter otherwise the aspect ratio isn't maintained and the image is stretched to the specified width but keeps the original image's height (even though resize:maintain_raito is defaulted to 'yes'). I believe this is also why I have to specify crop:maintain_ratio='n' in my example to get the right output since I'm not specifying crop:width. IMO, the behaviors should mirror the regular directory manipulations and we should be able to use something like:

<img src="{image_1:resize_crop resize:width='510' crop:height='220'>

to first resize to 510px wide whilst maintaining the aspect ratio, then cropping to 220 tall but vertically centered.

[intoeetive]

@pyrobob83 sorry it took so long to get to this!

Looking at our resize_crop docs, I does not look like centering the image is supported. You can specify offset, but you can't really center.

Adding more cababilities for image management is certainly on our roadmap, but for the time being what we did with these new modifiers is that we exposed the functionality that already existed in our image manipulation library to the template tags. We will do more, but that would be larger undertake, so just not happening right now. Qualifying this as feature request for now

[robinsowell]

I had someone asking about this one today- wonder how hard it would be to add crop from center? I think we'd just need to do the math to find the x/y and plug those in. Good examples in https://stackoverflow.com/questions/6891352/crop-image-from-center-php

[intoeetive]

Code PR: #3729

User Guide PR: ExpressionEngine/ExpressionEngine-User-Guide#735

[ic360-com]

I'm looking forward to seeing this feature. :-)

[pyrobob83]

@intoeetive I saw this was mentioned as being included in the EE7.4.6 release, but I just upgraded and tested it and can't see how this is supposed to work. With the following code:

<img
    loading="lazy"
    alt="{content:alt}"
    src="{content:file:resize_crop resize:width='510' resize:height='10000' crop:width='510' crop:height='220' crop:maintain_ratio='n'}"
/>
<br>
<img
    loading="lazy"
    alt="{content:alt}"
    src="{content:file:resize width='510' height='10000'}"
/>

the output is:

I had to add the crop:width='510' otherwise the resultant crop was only 100px wide, but as you can see, it's still not centering the crop.

All I wanted was a way to replicate the way the regular upload directory manipulations work but using on-the-fly manipulations, eg:

Is there a particular syntax/parameter combination you have that does the same as this with the resize_crop on-the-fly manipulation? Am I missing something here?

[intoeetive]

@pyrobob83 the default behavior did not change. You need to specify position="center" parameter: https://docs.expressionengine.com/latest/fieldtypes/file.html#crop

[pyrobob83]

@intoeetive Ah, sorry I missed that - I was using and looking at https://docs.expressionengine.com/latest/fieldtypes/file.html#resize_crop in the docs. I'll test again!

[pyrobob83]

Confirmed, that does it - thanks Yuri!

[pyrobob83]

@intoeetive After further review, this does allow you to crop from the center, but still isn't what I was hoping for - I still can't find a way to replicate the functionality of traditional upload directory manipulations... I tried every combination of parameters I could think of and just can't get this to work the same. It looks like #79 is asking for the same thing I am, so I'll bump the discussion that issue got turned into with as much detail as possible.