Copied to clipboard

Flag this post as spam?

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


  • Jacob Bach Pedersen 19 posts 73 karma points
    Aug 12, 2014 @ 15:57
    Jacob Bach Pedersen
    0

    Image cropper with media picker

    Hey

    Just developing my first Umbraco 7 site and miss the possibility to crop images.

    I have tested the new "Image Cropper"-datatype and likes the crop-function, but i don't like that the users are forced to upload an images to the site, instead of just selecting an existing image from thw media-folder. I think the "Image Cropper"-datatype was perfect, if just it was possible to select an exsisting images from the media-folder.

     

    Does anyone know about a datatype that supports that? Or any idea of cropping an image selected with a media picker?

     

     

  • Jeavon Leopold 3005 posts 13194 karma points MVP 7x admin c-trib
    Aug 12, 2014 @ 16:05
    Jeavon Leopold
    102

    Hi Jacob,

    Welcome to Our!

    You can use the image cropper with items in media. I would suggest you watch uHangout EP30 where I show all the various options for using the image cropper.

    The website code used in uHangout can be found on GitHub here

    I hope that helps?

    Jeavon

  • Jin Botol 130 posts 282 karma points
    May 31, 2017 @ 03:01
    Jin Botol
    0

    Hi Jeavon,

    I same problem with Jacob but mine is I want to get the images in the surface controller and in your video you didn't included it.

    I hope you can help with this.

    Thank you,

    Jin

  • Jin Botol 130 posts 282 karma points
    May 31, 2017 @ 09:57
    Jin Botol
    0

    Hi All,

    What I did is

    enter image description here

    Hope some will help me about this error.

    Jin

  • Simon 692 posts 1067 karma points
    Feb 17, 2015 @ 14:34
    Simon
    0

    Hi Jeavon,

    If I have an image and want to set it as a cover photo in  a page, with width 100% and a fixed height of 563px, how can I achive this with Image cropper pls and using the slimsy package?

    Thank you very much.

    Regards

  • Matt 75 posts 279 karma points
    Mar 13, 2015 @ 18:48
    Matt
    0

    Hey Jeavon,

    I'm actually looking for the same thing as Jacob - I need the Image Cropper as it is out of the box, but instead of an "upload experience", I'd prefer it to be a media picker and after picking the media you can change the crop (blue dot, zoom, etc) within the content without having to jump out to the media section like you showed in your uHangout.  I assume there is no configurable out of the box way to do that?

    Regards,
    Matt

     

  • Paul Lagmark 65 posts 140 karma points
    Aug 10, 2015 @ 10:02
    Paul Lagmark
    0

    Hi All,

    I'm also VERY interested to be able to pick images from Media Library like Media Picker does instead of uploading a new image when using the Image Copper. Can't figure out how to do this tho.

    Any help would be greatly appreciated :)

  • Carola 4 posts 79 karma points
    Sep 03, 2015 @ 15:03
    Carola
    3

    The explanation is in the video Jeavon posted, uHangout E030 , at about 12:30. I tested it because my customer wanted this feature, it works really well (I'm using Umbraco 7.1.8). Basically, you'll have to go to Settings > MediaTypes > Image, change the property for Upload Image from Type: Upload to Type: ImageCropper. In your document type, change the type for the property image that you want to crop to MediaPicker. In your code, you have to do something like

    @if (content.HasValue("TeaserImage"))
     {
            var teaserImage = Umbraco.TypedMedia((int) content.TeaserImage);
            <img src="@teaserImage.GetCropUrl(80,80)" alt=""/>
     }
    

    or, if you defined a crop size

    @if (content.HasValue("TeaserImage"))
     {
            var teaserImage = Umbraco.TypedMedia((int) content.TeaserImage);
            <img src="@teaserImage.GetCropUrl("cropSizeName")" alt=""/>
     }
    

    Hope this helps!

Please Sign in or register to post replies

Write your reply to:

Draft