Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • SGB 27 posts 73 karma points
    May 13, 2014 @ 14:53
    SGB
    0

    Using the ImageCropper datatype on Media - razor output?

    Hi everyone

    I hope someone will be able to help me :)

    What I'm trying to do:

    I have a Node with several Childnotes, and I want to loop through those and output a cropped image from each.

    So I created a new datatype called "ImageCropper" with the "Image Cropper" property editor.

    I then added it to the "Image" Media type with the alias "crop", added a crop named "gallerithumb" (80x40 px) and uploaded an image (with a crop, of course). The Media Picker I'm using on each childnode has the alias of "billede".

    Now my code looks like this, but I'm getting an internal server on the URL that's beeing added:

     

    @foreach(var slideItem in CurrentPage.Children){
     var image = Umbraco.Media(slideItem.billede.ToString());
       <*img src="@image.GetCropUrl("crop", "gallerithumb")" />
    }

     

    The URL output is: http://xyz.dk/media/1006/galleridemo.jpg?crop=0.0000000000000005329070518201,0.15708915145005381,-0.0000000000000010658141036402,0.14473684210526266&cropmode=percentage&width=80&height=40&rnd=130444646360000000

    The error I'm getting: Index was outside the bounds of the array.

    Does anyone have an idea? :)

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    May 13, 2014 @ 15:08
    Jan Skovgaard
    0

    Hi Signe and welcome to our :)

    Have you had a peek at the documentation on the image cropper here http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Image-Cropper ?

    Perhaps that can give you some inspiration in order how to loop through the images.

    Hope this helps.

    /Jan

    Copy Link
  • SGB 27 posts 73 karma points
    May 13, 2014 @ 15:21
    SGB
    0

    Hi Jan

    Thank you for your reply! :)

    I've read the documentation, but unfortunately couldn't get it to work. I tried using this, as described:

    @Umbraco.Media(1234).GetCropUrl("banner")

    With my aliases etc. that would be (I think?):

    var image2 = @Umbraco.Media(slideItem.billede);
    <img src="@image2.GetCropUrl("gallerithumb")" /> 

    This gives me the following src: /media/1001/galleridemo.jpg?mode=pad&rnd=130444646360000000

    So now the crop is completely ignored. 

    I'm super confused because I do think the docs make sense, but it's just not working with my site :)

     

     

    Copy Link
  • Robert Dyson 50 posts 147 karma points c-trib
    May 13, 2014 @ 15:26
    Robert Dyson
    101

    To use the cropper I alter the property for the "Image" media type to use the Image Cropper instead of the "upload" property.

    For the sub nodes I then just use a normal media picker and the following code in the parent content Item:

    @foreach (var banner_content in CurrentPage.Descendants("BannerImage"))
{
    var image = Umbraco.Media(banner_content.bannerImage);
    var cropUrl = image.GetCropUrl("umbracoFile", "HomePageBanner");
<img src="@cropUrl" />
}
    Copy Link
  • SGB 27 posts 73 karma points
    May 13, 2014 @ 15:34
    SGB
    0

    Hi Robert

    That sounds exactly like what I'm trying to do :)


    Unfortunately your snippet gives me the same result as the one in the docs:  src: /media/1001/galleridemo.jpg?mode=pad&rnd=130444646360000000

    (Crop being ignored)
    Did you ever experience this?

     

    BTW: I'm using Umbraco 7.1.2 if that helps

    Copy Link
  • Robert Dyson 50 posts 147 karma points c-trib
    May 13, 2014 @ 15:37
    Robert Dyson
    1

    I only experienced this when I hadn't set up the media type correctly. Ensure that the Media Type for the Image is as the default except you just chand the data type (i.e. it's still called "umbracoFile")

    Then ensure the alias of the crop is typed correctly.

    Then sometimes. I just open the image and save it again..This seems to ensure the crops are saved. 

    Sometimes I got the huge almost zero crops as you did and so I just tried altering the zoom of the crop a little and that seemed to help.

     

    Copy Link
  • SGB 27 posts 73 karma points
    May 13, 2014 @ 15:48
    SGB
    0

    I got it working, thank you guys! :)

    Roberto, your method worked for me too (once I realized I had a typo in my code, meh), so this is the final result (inside the loop):

    var image = Umbraco.Media(slideItem.billede);
    var cropUrl = image.GetCropUrl("crop", "gallerithumb");
    <img src="@cropUrl" />

     

     

     

    Copy Link
  • Robert Dyson 50 posts 147 karma points c-trib
    May 13, 2014 @ 15:56
    Robert Dyson
    1

    Great... Glad you got it working.

    Please can you mark my post with a high five?

    Rob

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    May 13, 2014 @ 21:19
    Jeavon Leopold
    0

    @Robert, #h5yr x 2

    Copy Link
  • SGB 27 posts 73 karma points
    May 14, 2014 @ 08:04
    SGB
    0

    I'd love to Roberto, but I can't seem to do that yet.. Will get back to that though ;)

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    May 14, 2014 @ 08:19
    Jeavon Leopold
    1

    @Signe, you should be able to find a green tick on @Robert correct solution, click that

    Copy Link
  • SGB 27 posts 73 karma points
    May 14, 2014 @ 08:21
    SGB
    2

    Ah got it, sorry :)

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    May 14, 2014 @ 08:23
    Jeavon Leopold
    1

    Marking correct solution is same as 20 h5's :-)

    Copy Link
  • Robert Dyson 50 posts 147 karma points c-trib
    May 14, 2014 @ 08:24
    Robert Dyson
    0

    Great. Thanks for that! I'm loving the Umbraco community!!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft