Copied to clipboard

Flag this post as spam?

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


  • Richard Jackson 17 posts 127 karma points MVP c-trib
    Feb 06, 2023 @ 22:16
    Richard Jackson
    0

    Rendering an image in a template

    Hi there!

    I have a Document Type set up as follows:

    • Document Type: "HomePage"

    • Group: "Content"

    • Property: "image"

    • Editor: Image Media Picker

    In the "HomePage" template how do I reference this? I'd thought it'd be something like:

    <img src="@Model.Value("image")"/>
    

    ...but it's not!

    Would greatly appreciate the guidance!

    Cheers!

    Rich

  • Meni 271 posts 528 karma points
    Feb 07, 2023 @ 05:10
    Meni
    100

    I don't know, Umbraco 11 got wired. In 7 it was much simpler. Also for me the way you do didn't work.

    So here's how I did it and it works for me (I migrated to 11, but I think this code should also work on 9).

    For each image do like this:

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

    Don't ask me why you need to split it to two lines - I don't know. But it works for me.

    After 7 Umbraco got wired.

    If the code above works for you (also) , use it

  • Richard Jackson 17 posts 127 karma points MVP c-trib
    Feb 07, 2023 @ 08:30
    Richard Jackson
    0

    Huzzah! Thanks for the advice!

    I had some errors when directly copying/pasting your suggestion but the below worked perfectly (which is, largely, exactly the same):

    @{
    var image = Model.Value<IPublishedContent>("image");
    }
    <img src="@image.Url()" class="img-fluid" />
    

    Cheers!

    Rich

  • Meni 271 posts 528 karma points
    Feb 07, 2023 @ 15:19
    Meni
    0

    Oh yeah, of course you need @{ , because this is how you integrate c# code in Razor pages.

    I just make sure to check before if the image exists (which is a good practice) so I’ll do something like:

    @{if node.hasValue(“image”) etc etc , so the if condition gives me anyway the @{

  • Johannes Lantz 156 posts 839 karma points c-trib
    Feb 07, 2023 @ 09:52
    Johannes Lantz
    1

    I would recommend to put a if statement around the <img />!

    If the media picker doesn't have a image selected. Then you would get an Yellow screen of death.

    //Johannes

  • Richard Jackson 17 posts 127 karma points MVP c-trib
    Feb 07, 2023 @ 09:54
    Richard Jackson
    0

    Ah great shout, yes absolutely!

Please Sign in or register to post replies

Write your reply to:

Draft