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


  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    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?

    Copy Link
  • Marc Goodson 2157 posts 14431 karma points MVP 9x 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

    Copy Link
  • k 256 posts 654 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

    Copy Link
  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    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

    Copy Link
  • Bo Jacobsen 608 posts 2406 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);
    Copy Link
  • k 256 posts 654 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

    Copy Link
  • Bo Jacobsen 608 posts 2406 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");
}
    Copy Link
  • auroris 3 posts 76 karma points
    Jun 29, 2020 @ 03:51
    auroris
    3

    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.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft