image cropper width only crop size - Extending Umbraco and using the API

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Andy Westley 16 posts 86 karma points

Jun 21, 2016 @ 13:59

0

Image Cropper width-only crop size?

Hi there,

Does anyone know whether there's a way to define a crop size by just the width?

We'd like to define some crop sizes that maintain the aspect ratio of an image but does so based on a fixed width. We'd like to pre-crop some images to allow us to server appropriately sized ones based on screen size, and for the most part they'll be 4:3 shaped. But occasionally we might want tall, thin infographic-style images. We'd like to store them all in the same media type, and we won't know how tall they might be.

If it's not possible to pre-define the crop size to control this, does anyone know of any workarounds? It feel like it should be possible to query the image's dimensions and if they fall outside a certain ratio, use a custom crop size?

Cheers Andy

Copy Link
Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jun 21, 2016 @ 14:24
0
Hi Andy,

How about something like this:
```
@{
    var mediaItem = Umbraco.TypedMedia(1000);
    var imageUrl = Url.GetCropUrl(mediaItem, 100);
}
<img src="@imageUrl"/>
```
It will use the blue focal point to create a crop that is as close to 100 pixels wide.

Jeavon
Copy Link
Andy Westley 16 posts 86 karma points

Jun 21, 2016 @ 14:30

0

So if I only specify the width in GetCropUrl, the crop maintains the original aspect ratio?

Copy Link
Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jun 21, 2016 @ 14:33

0

Yes, well ImageProcessor does underneath it all

Copy Link
Louis Ferreira 69 posts 266 karma points

Nov 08, 2016 @ 12:02
0
Hi Jeavon,

I too am having problems with this... I have a Image in the Media Library (2300x1400) and I want to use the GetCropUrl to specify a crop in razor based on a CSS media query.

So basically, I have this in my razor:
```
    var bgImage = Umbraco.TypedMedia(Model.Content.gbImage);
    <style>
    .my-image {
         background-image: url('@bgImage.GetCropUrl(1600, 900))')
      }
    @@media all and (max-width: 900px){
      .my-image {
         background-image: url('@bgImage.GetCropUrl(300, 900')
      }
     }
    </Style>
<div class="my-image"> some stuff here</div>
```
Now I can see the url getting generated with the crop setting as querystring params, but the image coming back from the server is not changing size at all.

What I'm wanting is to get a different aspect ratio for mobile and desktop based around the focal point set in the Media Library. Is this possible?

I'm using 7.5.3
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Image Cropper width-only crop size?