Copied to clipboard

Flag this post as spam?

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

  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Jun 24, 2019 @ 10:21
    Jesper Skjønnemand

    How to render image crop URL in v8?

    I am trying to recreate a v7 site on v8. Rendering (cropped) images are causing me some trouble though.

    In the v7 template this works well

    @if (Model.Content.HasValue("pageImage")) {
    var foto = Model.Content.GetPropertyValue<IPublishedContent>("pageImage").GetCropUrl("100,100");

    Rewriting it for v8 like this does not

       @if (Model.HasValue("pageImage")) {
        var foto = Model.Value<IPublishedContent>("pageImage").GetCropUrl("100,100");

    If I just replace the stuff within {} with <p>Image goes here</p> the text renders nicely, so it must be the Model.Value string that needs adjusting. I can't figure it out. Any ideas?

  • Marc Goodson 2149 posts 14354 karma points MVP 8x c-trib
    Jun 24, 2019 @ 11:28
    Marc Goodson

    Hi Jesper


       var foto = Model.Value<IPublishedContent>("pageImage").GetCropUrl(100,100);

    The overloads for width and height are expecting integer values



  • k 256 posts 654 karma points
    Jan 24, 2020 @ 09:44

    Hello Jesper,

    I am using umbraco version 8.2.2.

    When activating the culture on my document type, image cropper no more works.

    is it the case for you as well ?



  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Jan 24, 2020 @ 10:26
    Jesper Skjønnemand

    Hi Kusum

    I haven't really tested a live U8 site yet, so I do not really know, sorry.

    Hope you find a solution.


  • Bo Jacobsen 601 posts 2399 karma points
    Jan 24, 2020 @ 10:37
    Bo Jacobsen

    If you have activated the culture on your document type then you need to pass it like this

    var foto = Model.Value<IPublishedContent>("pageImage", "en-US").GetCropUrl(100,100);
  • k 256 posts 654 karma points
    Jan 26, 2020 @ 12:16

    Hello Bo,

    Thank for the reply. But code is not working. It is givinge the below error:

    Value cannot be null.
    Parameter name: mediaItem
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
    Exception Details: System.ArgumentNullException: Value cannot be null.
    Parameter name: mediaItem

    In my case, Culture is allowed on the document type but not on the field. Please see below : enter image description here

    Also, should we continue to include the alias of cropping as below : enter image description here

  • Bo Jacobsen 601 posts 2399 karma points
    Jan 26, 2020 @ 18:23
    Bo Jacobsen

    If its not allowed in the property then this should work

    var foto = Model.Value<IPublishedContent>("pageImage");

    I always do it this way

    var foto = Model.Value<IPublishedContent>("pageImage");
    if (foto != null) {
       var cropUrl = foto.GetCropUrl("thumb");
  • auroris 3 posts 76 karma points
    Jun 29, 2020 @ 03:51

    I might be necroing an old thread, but the official documentation and even the answers given above appear to not work as of the current version (8.6.3).

    Calling Model.Value<IPublishedContent>("pageImage") just gives back null because it's not an IPublishedContent, it's an ImageCropperValue.

    Here is the partial view that I created that appears to work properly.

    @inherits Umbraco.Web.Mvc.UmbracoViewPage
    @using Umbraco.Web
    @using Umbraco.Core.PropertyEditors.ValueConverters
    @if (Model.HasValue("pageImage", fallback: Fallback.ToAncestors))
        ImageCropperValue image = Model.Value<ImageCropperValue>("pageImage", fallback: Fallback.ToAncestors);
        if (image == null)
            throw new Exception("pageImage is null");
        String url = image.Src + image.GetCropUrl("Badge");
        <img src="@url" />

    Check out the class definition for ImageCropperValue for some other neat features it has.

Please Sign in or register to post replies

Write your reply to: