Copied to clipboard

Flag this post as spam?

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


  • Gordon Saxby 1461 posts 1883 karma points
    Aug 02, 2016 @ 11:05
    Gordon Saxby
    0

    Can Image Cropper Pad?

    We are using the following to ensure images are not bigger than we want:

    1066x400.jpg?anchor=center&mode=crop&width=2000&height=400&rnd=131146113340000000
    

    But if the image is smaller than the size(s) specified, can we make it just pad out the remaining space? So, if an image is less than 2000px wide then display as-is, otherwise crop to 2000px.

  • James Patterson 53 posts 192 karma points
    Aug 02, 2016 @ 13:10
    James Patterson
    0

    Hi Gordon,

    It does pad but not sure it does what you want.

    Here are the list of options from the Image Processor site; http://imageprocessor.org/imageprocessor/imagefactory/resize/#example

    If you want your output image to be 2000px wide, no matter how wide (or narrow) the image is, then mode=pad should do this and the image will always be 2000px wide (or always 400px tall) but with a padding added.

    Trouble is that this keeps the original image's aspect ratio so if you have a 800w 800h image and use the options above with 200w 300h then you will have 50 pixels padding top and bottom instead of just cropping down the image.

    Not sure if this will help!

    Cheers

  • Gordon Saxby 1461 posts 1883 karma points
    Aug 02, 2016 @ 14:20
    Gordon Saxby
    0

    What needs to happen is that the image needs to be "no more than" 2000 x 400. So, if it is only 1190 x 360 then the resultant image will be 1190 x 360.

    If the image is bigger then it will be cropped.

    We are trying the upScale = false option at the moment, that may work the required way.

  • David Peck 690 posts 1896 karma points c-trib
    Aug 02, 2016 @ 14:45
    David Peck
    0

    Can't you just have a look at the width and height of the image, as stored by Umbraco, and make a call based on that?

    @using Umbraco.Core;
    @{
        IPublishedContent myImage;
        var width = Math.Min(400, myImage.GetPropertyValue<int>(Constants.Conventions.Media.Width));
        var height = Math.Min(2000, myImage.GetPropertyValue<int>(Constants.Conventions.Media.Height));
    }
    <img src='@Html.Raw(string.Format("{0}?mode=pad&width={1}&height={2}, myImage.Url, width, height)' />
    

    You can always look at the crops if necessary too:

    var imageCrops = JsonConvert.DeserializeObject<ImageCropDataSet>(content.GetPropertyValue<string>(Constants.Conventions.Media.File))
    
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 04, 2016 @ 08:35
    Jeavon Leopold
    0

    Are you using GetCropUrl?

    You can pass in a CropMode parameter such as this to make ImageProcessor Pad rather than Crop:

    Url.GetCropUrl(mediaItem, width:2000, height:400, imageCropMode: ImageCropMode.Pad);
    
  • David Peck 690 posts 1896 karma points c-trib
    Aug 04, 2016 @ 12:38
    David Peck
    0

    Yeh. What Jeavon said. That's much neater.

  • Stephen Garside 3 posts 75 karma points
    Mar 22, 2024 @ 07:04
    Stephen Garside
    0

    You could use the 'boxpad' function vs 'pad' - that won't stretch your image but pad it out to the required size

Please Sign in or register to post replies

Write your reply to:

Draft