Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Eddie Foreman 215 posts 288 karma points
    Apr 25, 2012 @ 16:18
    Eddie Foreman
    0

    Cropping landscape and portrait images

    Hi,

    Currently working on a site, which is using the proffessional features of ImageGen.  So far the script is working fine for landscape images using the following:

    <img src="/ImageGen.ashx?image={umbraco.library:GetMedia(mediaItem, '0')/umbracoFile}&amp;height=189&amp;constrain=true"><!-- //Uses height for thumbnail, then css to hide width > 190px  -->

    But on portrait images,  the resized image fills the height of the box, but not the width.  Using the following makes a perfect thumbnail, but does no maintain the aspect ratio.

    <img 
    src="/ImageGen.ashx?image={umbraco.library:GetMedia(mediaItem, 
    '0')/umbracoFile}&amp;width=190&amp;height=189&amp;crop=resize&amp;valign=top
     ">//Creates thumbnail, but does not constrain-->

    I was wondering what the best approach would be to cover both portrait and landscpace. Were no matter what size the initial image is.  It is resized to the correct width and height, with no padding and maintains the ascpect ratio.

    Thanks,
    Eddie

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Apr 25, 2012 @ 16:46
    Douglas Robar
    1

    Hi, Eddie,

    Your second example works perfectly for me. When you crop and specify both the height and width you'll get an image of the precise height and width, filled to the edges, without distorting the image in the process. 

    I've just double-checked it with ImageGen 2.5.2 and 2.5.7 without problem with portrait, landscape, and square images.

    Some things that might interfere -- if your source image is smaller than either of the height or width dimensions you're asking for and you don't allow upsizing. Or perhaps you have a previously-cached version of the image on disk or in the browser so you aren't seeing the correct result (I always use the nocache=true option when testing until I settle on the correct parameters).

    cheers,
    doug. 

  • Eddie Foreman 215 posts 288 karma points
    Apr 25, 2012 @ 18:30
    Eddie Foreman
    0

    Hi Doug,

    Thanks for this.  Have updated the xslt to use the second option, along with enabling the upsizing.  Now getting nice thumbnails. Also added valign=center&amp;align=center to centre the cropped images.

    Cheers,
    Eddie

Please Sign in or register to post replies

Write your reply to:

Draft