Copied to clipboard

Flag this post as spam?

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


  • Yaco Zaragoza 88 posts 362 karma points
    Apr 21, 2023 @ 13:43
    Yaco Zaragoza
    0

    How do I Render Images an image on the page

    When I use the Insert Value option on the templates area I get

    @Model.Value("image")
    

    Which renders

    Umbraco.Cms.Core.Models.MediaWithCrops`1[Umbraco.Cms.Web.Common.PublishedModels.Image]

    How do I convert it to the Image Path so I can add it inside the proper HTML?

  • mc2 13 posts 74 karma points
    Apr 21, 2023 @ 15:05
  • Yaco Zaragoza 88 posts 362 karma points
    Apr 21, 2023 @ 15:40
    Yaco Zaragoza
    0

    This is what I get when I try that.

    Argument 1: cannot convert from 'method group' to 'object?'

       @Model.Value<MediaWithCrops>("image").Url()
    
  • Marc Goodson 2155 posts 14406 karma points MVP 9x c-trib
    Apr 22, 2023 @ 15:51
    Marc Goodson
    0

    Hi Yaco

    This syntax keeps changing between the versions, but I think now it would be

    @Model.Value<MediaWithCrops>("image").MediaUrl()
    

    There are some examples here...

    https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3#mvc-view-example

    regards

    Marc

  • Yaco Zaragoza 88 posts 362 karma points
    Apr 22, 2023 @ 16:40
    Yaco Zaragoza
    0

    I still get the same error.

    This is all the code on the page

    @using Umbraco.Cms.Web.Common.PublishedModels;
    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.NewsPage>
    @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
    @{
        Layout = "Master.cshtml";
    }
    
    
    @Model.Value<MediaWithCrops>("image").MediaUrl()
    

    I downloaded the cheat sheet and will study it to become more familiar with it.

    I see the VS is telling me the following error but not sure why.

    enter image description here

    P.S I do have Modelsbuilder enable

  • Marc Goodson 2155 posts 14406 karma points MVP 9x c-trib
    Apr 22, 2023 @ 17:00
    Marc Goodson
    0

    Hi Yaco

    What type of property editor is your 'image' property??

    Is it a single MediaPicker3 or can the editor pick more than one Media Item?

    if it was multiple then you'd have to do something like this

    @{
        var typedMultiMediaPicker = Model.Value<IEnumerable<MediaWithCrops>>("image");
        foreach (var entry in typedMultiMediaPicker)
        {
            <img src="@entry.MediaUrl()" style="width:200px" />
        }
    }
    

    But with multiple not allowed, I think it would be this

    @using Umbraco.Cms.Core.Models @{ var typedMediaPickerSingle = Model.Value

    You might need to have

    @using Umbraco.Extensions
    

    at the top of your view to access the MediaUrl() method as I think it's an extension method.

    https://github.com/umbraco/Umbraco-CMS/blob/36069aa8139b6125398786d378ac712b5382d0b0/src/Umbraco.Core/Extensions/PublishedElementExtensions.cs#L274

    regards

    marc

  • Yaco Zaragoza 88 posts 362 karma points
    Apr 24, 2023 @ 13:14
    Yaco Zaragoza
    0

    Still stuck...

    The image type I am using is they "Image Media Picker (Umbraco.MediaPicker3)

    This is my page with all the Properties

    I already have @using Umbraco.Extensions in my "_viewImports.cshtml" file which should be included on all pages (correct?)

    If I try

    @{
        var typedMultiMediaPicker = Model.Value<IEnumerable<MediaWithCrops>>("image");
        foreach (var entry in typedMultiMediaPicker)
        {
            <img src="@entry.MediaUrl()" style="width:200px" />
        }
    }
    

    Visual Studio does not like "MediaWithCrops" saying "The type or namespace name 'MediaWithCrops' could not be found (are you missing a using directive or an assembly reference?)"

  • Marc Goodson 2155 posts 14406 karma points MVP 9x c-trib
    Apr 25, 2023 @ 08:43
    Marc Goodson
    0

    Hi Yaco

    That would suggest it's missing the namespace

    @using Umbraco.Cms.Core.Models
    

    which is where MediaWithCrops lives.

    regards

    Marc

  • Yaco Zaragoza 88 posts 362 karma points
    May 03, 2023 @ 18:20
    Yaco Zaragoza
    101

    Just in case anyone else has the same issue.

    This is what ended up working for me (Multiple disabled with Modelsbuilder)

    @using Umbraco.Cms.Core.Models
    @{
        var typedMediaPickerSingle = Model.MEDIA-NAME-HERE;
        if (typedMediaPickerSingle is MediaWithCrops mediaEntry)
        {
            <img src="@mediaEntry.MediaUrl()" style="width:200px"/>
        }
    }
    
  • Sidney 2 posts 71 karma points
    Mar 28, 2024 @ 15:24
    Sidney
    0

    Why use all the extra code when
    would do?

  • Sidney 2 posts 71 karma points
    Mar 28, 2024 @ 15:59
    Sidney
    100

    Just for info this can be cut down to just this line of code

    <img src="@Model.MEDIA-NAME-HERE.MediaUrl()" style="width:200px" />

Please Sign in or register to post replies

Write your reply to:

Draft