Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Mike Manusama 45 posts 195 karma points
    Oct 03, 2022 @ 16:51
    Mike Manusama
    0

    Rendering a cropped Image

    Using Umbraco And Getting Started
    Umbraco 9

    Hey all, I have been an Umbraco user for a few years now, but only just starting down the path of using cropped images instead of the antiquated process of manually cropping images and uploading them since I am now using Umbraco 9 and learning this version.

    I have a document type that I am using an "image cropper" data type on. I have listed out the different crops I want with their associated aliases.

    As a side note, I have also added crops to all the media files within the media section as I heard we can do that as well!

    So while I was able to successfully add the data type to the doc type, I have not been able to render it in a template.

    Here is what I have at the moment:

    @{
        var croppedImg = Model.Value<MediaWithCrops>("featureImage");
        if (croppedImg != null)
        {
            <img class="w-100" src="@croppedImg.MediaUrl("oneToOne")" />   
        }
    }

    As always, I am sure there is one tiny little thing missing that I am not aware of that is causing this not to render, and this forum is typically really. helpful with things like these. Is there a glaring mistake I am making to this that is preventing my image to render on the frontend?

    Copy Link
  • Huw Reddick 1727 posts 6066 karma points MVP c-trib
    Oct 04, 2022 @ 07:59
    Huw Reddick
    0

    try

    src="@croppedImg.GetCropUrl("oneToOne")"
    Copy Link
  • Mike Manusama 45 posts 195 karma points
    Oct 04, 2022 @ 13:27
    Mike Manusama
    0

    I tried that one originally as it was in the Image Cropper documentation and that didnt work either

    Copy Link
  • Huw Reddick 1727 posts 6066 karma points MVP c-trib
    Oct 04, 2022 @ 13:43
    Huw Reddick
    0

    what is it returning?

    Have you definitely defined the crop oneToOne

    Copy Link
  • Mike Manusama 45 posts 195 karma points
    Oct 04, 2022 @ 15:54
    Mike Manusama
    0

    Currently, nothing gets rendered. Here is how I have defined it below. I created crops at both the media picker data type as well as the image cropper data type:

    Media picker: enter image description here

    Image cropper: enter image description here

    Doc type: enter image description here

    Template: enter image description here

    Copy Link
  • Huw Reddick 1727 posts 6066 karma points MVP c-trib
    Oct 04, 2022 @ 16:40
    Huw Reddick
    0

    shouldn't featureImage be a MediaPicker not an ImageCropper because you are casting it as MediaWithCrops?

    Copy Link
  • Mike Manusama 45 posts 195 karma points
    Oct 05, 2022 @ 13:09
    Mike Manusama
    0

    I changed it to a media picker, and I still get nothing. hmmmenter image description here

    Copy Link
  • Huw Reddick 1727 posts 6066 karma points MVP c-trib
    Oct 05, 2022 @ 14:27
    Huw Reddick
    0

    not sure TBH, it is working fine for me. I'll grab some screen shots of my setup see if you can notice anything different

    Copy Link
  • Huw Reddick 1727 posts 6066 karma points MVP c-trib
    Oct 05, 2022 @ 14:54
    Huw Reddick
    0

    can't see anything different myself, but here goes

    Product Image Media Picker definition

        var typedprodImg = model.Value<MediaWithCrops>("productImage");
    if (typedprodImg != null)
    {
        imageurl = typedprodImg.GetCropUrl("ProductThumb");
    }
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft