Timber resize(width, height) filter is stretching images instead of cropping, when crop is 'default'

13 views Asked by At

I am trying to use Timber with WordPress, following the format in the Image Cookbook to resize an an image, eg. <img src="{{ post.thumbnail.src|resize(1200, 300) }}">

I would expect that this would crop my image to 1200px wide by 300px tall.

However when I do this, rather than cropping the image, I get an image that is stretched and squeezed to fix the exact dimensions specified, eg. the following is the original image:

Original image And this is what I get spits out after I do: <img src="{{ post.thumbnail.src|resize(1200, 300) }}"> Resized

I have found that when I specify a 'crop' of 'center', 'top', 'left' etc, this works as expected, but when I leave that option blank or use 'default' I get this apparently incorrect result.

I don't think this is what is supposed to happen, my understanding was this filter was meant to crop the image. https://timber.github.io/docs/v2/reference/timber-imagehelper/ says "New dimensions are achieved by cropping to maintain ratio." It doesn't indicate that 'default' should have different behaviour. Is there something wrong with my setup I should investigate?

I thought maybe this had something to do with the image functionality on my local development environment (I'm using XAMPP) - this is what I see in my PHPinfo:

GD Support  enabled
GD Version  bundled (2.1.0 compatible)
FreeType Support    enabled
FreeType Linkage    with freetype
FreeType Version    2.9.1
GIF Read Support    enabled
GIF Create Support  enabled
JPEG Support    enabled
libJPEG Version 9 compatible
PNG Support enabled
libPNG Version  1.6.34
WBMP Support    enabled
XPM Support enabled
libXpm Version  30512
XBM Support enabled
WebP Support    enabled
BMP Support enabled
TGA Read Support    enabled
Directive   Local Value Master Value
gd.jpeg_ignore_warning  1   1

Assuming it might be a local issue I also tried a test deploy of this site to Siteground (where it will eventually be hosted) and the resize behaviour is exactly the same there.

What am I missing here?

0

There are 0 answers