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

    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 1932 posts 6722 karma points MVP 2x 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 1932 posts 6722 karma points MVP 2x 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 1932 posts 6722 karma points MVP 2x 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 1932 posts 6722 karma points MVP 2x 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 1932 posts 6722 karma points MVP 2x 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies