Copied to clipboard

Flag this post as spam?

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


  • Steven Applegate 18 posts 178 karma points
    Nov 15, 2017 @ 03:56
    Steven Applegate
    0

    Getting an image crop URL returns the image ID

    I have a custom Media Type called "Banner Image". The media type has an Image Cropper property, with one crop size named "Main".

    I have a document type for a blog post that has a Media Picker property with alias named "mainImage", with a start node set to a folder that only contains Banner Image media type images.

    In my template for my blog post, I'm trying to display this image. I've tried both of these methods:

    @CurrentPage.GetCropUrl("mainImage", "Main")
    
    @Url.GetCropUrl(Model.Content, "mainImage", "Main")
    

    These are both returning the same value: "1223?mode=pad&rnd=131551648280000000"

    I noticed that "1223" is the Id of the image in the Properties tab.

    Is there a different method I need to call instead of those two? They were the ones I saw at https://our.umbraco.org/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Image-Cropper

  • Matt Darby 28 posts 391 karma points c-trib
    Nov 15, 2017 @ 08:09
    Matt Darby
    1

    Hi Steven,

    The first parameter of Url.GetCropUrl() needs to be the media item you want to crop. For example:

    var mediaItem = Model.Content.GetPropertyValue<IPublishedContent>("mainImage");
    if (mediaItem != null)
    {
        <img src="@Url.GetCropUrl(mediaItem, "Main")"/>
    }
    

    Using models builder, the tidier version:

    @Url.GetCropUrl(Model.Content.MainImage, "Main")
    

    This is assuming the property alias of your Image Cropper on "Banner Image" is "umbracoFile".

    If it is not, you will need to add the alias as another parameter in GetCropUrl, for example:

    @Url.GetCropUrl(Model.Content.MainImage, "alias", "Main")
    
  • Steven Applegate 18 posts 178 karma points
    Nov 15, 2017 @ 21:49
    Steven Applegate
    0

    Hey Matt, thanks for the response.

    Unfortunately I've tried your first solution and , and they aren't returning any value at all for the image. The media item isn't null, for some reason Url.GetCropUrl just returns an empty string.

    Just to double-check, here's what I have for my Blog Post data type Media Picker property:

    enter image description here

    Which is restricted to a folder containing only this Banner Image media type:

    enter image description here

    Which is just an Image Cropper containing this one crop:

    enter image description here

    I feel like maybe all the variable names are getting mixed up somewhere.

  • Ben Palmer 180 posts 866 karma points c-trib
    Nov 15, 2017 @ 23:07
    Ben Palmer
    1

    Hi Steven,

    What does Model.Content.GetPropertyValue("mainImage") return?

    I'd try:

    IPublishedContent image = Model.Content.GetPropertyValue<IPublishedContent>("mainImage");
    
    @image.GetCropUrl("Main");
    

    There's a chance that it'll return an IEnumerable however so that may become more like this:

    IEnumerable<IPublishedContent> images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("mainImage");
    
    @if(images != null && images.Any())
    {
        @images.First().GetCropUrl("Main");
    }
    

    Hope that helps. The key is probably first figuring out what GetPropertyValue is returning so if the above doesn't help, let us know what that is and it'll give us a bit of a helping hand to find a solution :)

  • Steven Applegate 18 posts 178 karma points
    Nov 16, 2017 @ 00:06
    Steven Applegate
    0

    Hey Ben, thanks for these, your first solution doesn't return anything. Looking at the view in VS debugger, it returns the correct Media object, but I noticed the Url property is empty (not sure if that matters):

    enter image description here

    But nevertheless, calling GetCropUrl on it returns an empty string.

    For your second solution, images is coming back as null.

    I also tried just deleting the image and reuploading it, then selecting the new image for my page, just in case something weird happened, but that didn't work either.

    Am I maybe doing this the wrong way? Not sure if it's best practice to create a media type with a Image Cropper property, then have a Media Picker property to choose that on my data type...

  • Matt Darby 28 posts 391 karma points c-trib
    Nov 16, 2017 @ 05:05
    Matt Darby
    101

    Hi Steven,

    Try adding the alias of the Image Cropper to GetCropUrl(). In your case you've set it to "image", so:

    IPublishedContent mediaItem = Model.Content.GetPropertyValue<IPublishedContent>("mainImage");
    
    @mediaItem.GetCropUrl("image", "Main");
    

    Does this still return nothing?

  • Ben Palmer 180 posts 866 karma points c-trib
    Nov 16, 2017 @ 08:08
    Ben Palmer
    1

    Ah, you might have half solved your own problem there.

    If Matt's solution doesn't work:

    I don't use the Image Cropper data type much - you might try swapping that out for a 'Media Picker'.

    The way I tend to approach this is add crops to the standard Image Cropper data type that ships with Umbraco. Then use a Media Picker for the actual data type. Then my above answers should work for you.

  • Steven Applegate 18 posts 178 karma points
    Nov 16, 2017 @ 23:51
    Steven Applegate
    0

    Hey Matt, yep that worked!

    Thanks for the help everybody!

Please Sign in or register to post replies

Write your reply to:

Draft