Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Resized images look wrong #2986

Closed
rmens opened this issue May 3, 2024 · 9 comments · Fixed by #2998
Closed

[BUG] Resized images look wrong #2986

rmens opened this issue May 3, 2024 · 9 comments · Fixed by #2998
Labels
bug has-patch needs-fix We know what we need to do, fix the dang thing!
Milestone

Comments

@rmens
Copy link
Contributor

rmens commented May 3, 2024

Expected Behavior

Resized images to not look squashed or stretched.

Actual behavior

Resized images get squashed or stretched.

Steps to reproduce behavior

  1. Install WP 6.5
  2. Install the Timber Starter Theme
  3. Make a post with this image as thumbnail as example https://www.pexels.com/nl-nl/foto/zwart-en-wit-zwart-wit-vrouw-mevrouw-19501709/
  4. Publish the post
  5. Look at the post and you will see that the image looks very squashed or stretched
Scherm­afbeelding 2024-05-03 om 22 35 12 Scherm­afbeelding 2024-05-03 om 22 34 54

Notes

Also happens in a theme that's not the Timber starter theme. To rule out any user error, I tested with the starter theme.

What version of Timber are you using?

Timber 2.1.0

What version of WordPress are you using?

WordPress 6.5.2

What version of PHP are you using?

PHP 8.2

How did you install Timber?

Installed or updated Timber through Composer

@rmens rmens changed the title [BUG] Resizes images look wrong [BUG] Resized images look wrong May 3, 2024
@rmens
Copy link
Contributor Author

rmens commented May 3, 2024

Maybe relevant: PHP Version 8.2.18

Scherm­afbeelding 2024-05-03 om 22 47 10 Scherm­afbeelding 2024-05-03 om 22 47 04

@Levdbas
Copy link
Member

Levdbas commented May 5, 2024

Thanks for your report @rmens, this only seems to occur when you don't set the third parameter in resize:

<img src="{{ post.thumbnail.src|resize(1200, 300, 'right') }}" />

leads to a correct image, although cropped from the right of the image.

The error seems to lie in this logic:

        if (!$crop || $crop === 'default') {
            return [
                'x' => 0,
                'y' => 0,
                'src_w' => $src_w,
                'src_h' => $src_h,
                'target_w' => $w,
                'target_h' => $h,
            ];
        }

https://github.com/timber/timber/blob/2.x/src/Image/Operation/Resize.php#L20

which has been changed from the 1.x version

edit:

removing || $crop === 'default') from the linked block of code seems to fix the issue. That code of block is meant to force a image in a particular set of dimensions, not cropping it. Can you confirm that works for you as well @rmens ?

This change was introduced in 18bf358 to fix integration tests from what I can see,

@rmens
Copy link
Contributor Author

rmens commented May 7, 2024

Yes that works @Levdbas! It would be most logical to default to a center crop when a third parameter isn't specified. Alternatively, we could update the documentation to mandate a third parameter for resizing, although that may not be the most practical solution.

@gchtr
Copy link
Member

gchtr commented May 8, 2024

To me, this sounds like a bug if it changed from how it used to be in v1.

I would first fix the issue and then we could also discuss whether changing the default would make sense. But that would be a breaking change for which we have to provide the proper upgrade information.

So, I’m wondering, rather than removing || $crop === 'default'), shouldn’t it be || $crop === null)? Because the way I read the code, the default value for $crop is null when not provided.

@Levdbas Levdbas added bug needs-fix We know what we need to do, fix the dang thing! labels May 8, 2024
@rmens
Copy link
Contributor Author

rmens commented May 8, 2024

I’m wonder what the default behavior in 1.x was. That was probably center cropping and not top right cropping.

@Levdbas
Copy link
Member

Levdbas commented May 8, 2024

$dest_ratio = $w / $h;
$src_wt = $src_h * $dest_ratio;
$src_ht = $src_w / $dest_ratio;
$src_x = $src_w / 2 - $src_wt / 2;
$src_y = ($src_h - $src_ht) / 6;

Well this was the default behaviour in 1.x and should have also been de the default behavior in 2.x were it not for the shortcircuit bug that was introduced.

What this exactly does however is kinda hard to wrap my head around :D This could use some documentation. Its is also kind of strange that you can pass a default option but that is not an actual option in the codebase that runs something explicitly. It just prevents the running of a specific crop behaviour.

@rmens
Copy link
Contributor Author

rmens commented May 8, 2024

According to ChatGPT it's a center-ish crop

$dest_ratio = $w / $h;
This line calculates the aspect ratio of the desired output image, where $w is the width and $h is the height that you want the cropped image to have. The aspect ratio is the ratio of width to height.

$src_wt = $src_h * $dest_ratio;
This line calculates the width of the crop area from the source image. It uses the height of the source image ($src_h) and multiplies it by the desired aspect ratio ($dest_ratio). This ensures that the width of the crop area maintains the aspect ratio of the target image dimensions.

$src_ht = $src_w / $dest_ratio;
Here, the height of the crop area is calculated using the width of the source image ($src_w) divided by the desired aspect ratio. This also helps in maintaining the aspect ratio consistency with the target dimensions.

$src_x = $src_w / 2 - $src_wt / 2;
This line determines the horizontal starting point ($src_x) of the crop area. It centers the crop area horizontally within the source image. It does this by taking half of the source width ($src_w / 2) and subtracting half of the calculated crop width ($src_wt / 2).

$src_y = ($src_h - $src_ht) / 6;
Finally, this line calculates the vertical starting point ($src_y) of the crop area. The formula takes the difference between the source height and the crop height, subtracts it from the source height, and then divides by 6. This is a somewhat unusual choice and suggests that the crop area is intended to be closer to the top of the image rather than being perfectly centered vertically.

@gchtr
Copy link
Member

gchtr commented May 8, 2024

I remember that Jared once mentioned that the default crop is not fully from the top, but in the upper part of the image. This is a cropping area that works well in a lot of cases, and mostly works better than just a top or center crop.

@rmens
Copy link
Contributor Author

rmens commented May 8, 2024

When I was still using 1.x without an off-site image resizer (which lead to not seeing this bug with the upgrade to 2.x of my theme) the crops always looked good. So cropping from the upper part of the image seems to be good choice imho. Documenting that behavior would be a win.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug has-patch needs-fix We know what we need to do, fix the dang thing!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants