Jump to content
Martin Wuehr

Image resize functions | aspect ratio and croping

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Pauline
  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...