Image resize functions | aspect ratio and croping

[Martin Wuehr]

Hello Everybody!

I'm using a lightbox (fancybox) within a project site and stumbled over following problem:

I want to use Thumbs of the images, being scaled to 100px height. Aspect Ratio should be considert. So the Thumbs have all the same height and different widths.

This was easy to get by this code:

$options = array(
   'quality' => 50,
   'upscaling' => false,
   'cropping' => 'center'
); 
$thumb = $img->height(100, $options);

But, unfortunatly, I have some Thumbs with 100px heigt and 600px width. I want to crop these to 200px maximum width.

When using:

$thumb = $img->size(200,100, $options);

all the thumbs are scaled to 200px width. Now the portrait orientated Images are also 200px width and are croped at top and bottom.

You can have a look at the site here:

http://relaunch2014.bw-architekten.de/projekte/forschung/friedrich-loeffler-institut/

Thank you for you help

Martin

[yellowled]

Now the portrait orientated Images are also 200px width and are croped at top and bottom.

Well, that's what you're telling size() to do – “return a thumbnail of $img which is 200px wide, 100px high, has a quality of 50 (which, by the way, is really bad), is not upscaled and is center-cropped”.

I'm not entirely sure what you want to do there, but I guess you want to treat landscape and portrait images differently? I'm not entirely sure that's a good idea in terms of performance, but I guess you could get the image's dimensions first and switch between two size() calls (with different options even) depending on the aspect ratio.

[LostKobrakai]

You want a dynamic cropping, which the default api doesn't offer. You need your own logic for selecting between a free crop to 100px height or a fixed size of 100px height and 200px width.

[Pauline]

Hey Martin,

basicaly you need to check for portrait or landscape oriented image first:

$options = array('cropping'=>true, 'upscaling'=>false);  // cropping => true is default and same like 'center'

foreach($page->images as $img) {
    if($img->width > $img->height) {              // check for orientation
        $thumb = $img->size(200, 100, $options);  // we have a landscape oriented image
    } else {
        $thumb = $img->height(100, $options);     // we have a portrait oriented image
    }
    // output your markup here
    echo "<img src='{$thumb->url}' alt='{$thumb->description}' />";
}

In your special case you need to check for landscape oriented images that have a width more than two times the height:

    if($img->width > (2 * $img->height)) {        // check for images with more than two times the width compared to the height
        $thumb = $img->size(200, 100, $options);  // we have a landscape oriented image
    } else {
        $thumb = $img->height(100, $options);     // we have a portrait oriented image
    }

Edited June 30, 2014 by Pauline

[Martin Wuehr]

Thank you so much Pauline. Works perfectly fine!

I tried something similar with $thumb->width and an if statement which didn't worked out for some reason.