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 39 posts 274 karma points
    Jun 24, 2019 @ 10:21
    Jesper Skjønnemand
    0

    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");
    <p>@foto</p>}
    

    Rewriting it for v8 like this does not

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

    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 1246 posts 8422 karma points MVP 5x c-trib
    Jun 24, 2019 @ 11:28
    Marc Goodson
    100

    Hi Jesper

    Try

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

    The overloads for width and height are expecting integer values

    regards

    Marc

  • k 255 posts 652 karma points
    Jan 24, 2020 @ 09:44
    k
    0

    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 ?

    Thanks,

    Kusum

  • Jesper Skjønnemand 39 posts 274 karma points
    Jan 24, 2020 @ 10:26
    Jesper Skjønnemand
    0

    Hi Kusum

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

    Hope you find a solution.

    Best

  • Bo Jacobsen 392 posts 1629 karma points
    Jan 24, 2020 @ 10:37
    Bo Jacobsen
    0

    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 255 posts 652 karma points
    Jan 26, 2020 @ 12:16
    k
    0

    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 392 posts 1629 karma points
    Jan 26, 2020 @ 18:23
    Bo Jacobsen
    0

    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 1 post 73 karma points
    Jun 29, 2020 @ 03:51
    auroris
    2

    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:

Draft