Copied to clipboard

Flag this post as spam?

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


  • Meni 281 posts 539 karma points
    Jan 31, 2023 @ 01:27
    Meni
    0

    Render images in Umbraco 11

    Hi, In my Umbraco 7.15.7 I'm displaying images in the Partial Views Macro Files as follow:

    figure>
                        @if (newsItem.HasValue("articleImg"))   
                        {
                            <img src="@Umbraco.Media(newsItem.articleImg.ToString()).Url" class="img-fluid news-img" alt="@newsItem.Last().photoAlt" />
                        }
    

    (the reason for the .ToString() is after I switched from Obsolete to Media.Picker2 - so since it's string)

    In my Umbraco 11.1 I was struggle to display the images. I tried the following and it didn't display the images, but also didn't throw an error, just didn't display the images:

    <img src="@Umbraco.Media(newsItem.Value<IPublishedContent>("articleImg").ToString()).Url()" class="img-fluid" alt="@Imaging_pagesToList.Last().Value("photoAlt")" />
    

    So I tried this one:

    <img src="newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="@newsItem.Value("photoAlt")" />
    

    And this one also doesn't show any image

    I also tried this one (the same as above, just with @ - @newsItem) , and this throw an error: "Argument 3: cannot convert from 'method group' to 'object?'":

    <img src="@newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="@newsItem.Value("photoAlt")" />
    

    So I tried this one:

    var image = newsItem.Value<IPublishedContent>("articleImg");
    <img src="@image.Url()" class="img-fluid" alt="@newsItem.Value("photoAlt")" />
    

    And this is finally works! And I don't understand why? (why this works, and why the previous didn't work)

    My question are:

    1. Why only the last one works?

    2. Why the first two doesn't work?

    3. Is this is the right way to render images in Umbraco 11.1 ?

    Please advise.

    Thanks.

  • Huw Reddick 1932 posts 6722 karma points MVP 3x c-trib
    Jan 31, 2023 @ 08:14
  • Meni 281 posts 539 karma points
    Jan 31, 2023 @ 15:19
    Meni
    0

    Yes, I have read it before, but what it shows in the examples is parsing the Guid:

    var mediaItem = Umbraco.Media(Guid.Parse("55240594-b265-4fc2-b1c1-feffc5cf9571"));

    So I wasn’t sure how to get the Guid of each image? It wasn’t clear from the docs. It seems in the examples that they pretty much hard coding the Guid. But if I iterate over a node, how do I get the Guid of each item in a node? (each item in the node represents a page with a feature image)

    Let’s say I have a node which I’m iterating, how do I get the Guid for each node to retrieve the image?

  • Huw Reddick 1932 posts 6722 karma points MVP 3x c-trib
    Feb 01, 2023 @ 08:07
    Huw Reddick
    0

    If you follow the links for mediapicker etc it shows examples using the alias as well

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

  • Meni 281 posts 539 karma points
    Feb 01, 2023 @ 19:20
    Meni
    0

    Since I migrated from 7 in my database I'm still using Umbraco.MediaPicker (and not Umbraco.MediaPicker3)

    So I can't use IEnumerable

  • Huw Reddick 1932 posts 6722 karma points MVP 3x c-trib
    Feb 01, 2023 @ 19:39
  • 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