Copied to clipboard

Flag this post as spam?

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

  • Sjoerd Stottelaar 25 posts 175 karma points
    Feb 11, 2019 @ 13:34
    Sjoerd Stottelaar

    Render media in Umbraco 8

    What is the best way to render media (image) in a template using Umbraco 8? I can't get it to work and the documentation doesn't say much about it for version 8. At the moment I've tried:


    Which returns an object called:


    When trying to get the URL of that image I get an error. I've tried getting the URL using: nieuwsItem.Value("artikelAfbeelding").Url; which returns an error. I presume this has to do with the new ModelBuilder in Umbraco 8, but I can't figure it out.

    Is there any documentation that specifies how this should be done?


  • Sjoerd Stottelaar 25 posts 175 karma points
    Feb 11, 2019 @ 15:14
    Sjoerd Stottelaar

    I've found the solution for my problem. I forgot to cast the value as an IPublishedContent item:

    var image = nieuwsItem.Value<IPublishedContent>("artikelAfbeelding");

    After that I can call the URL like so:


    Maybe this is useful to somebody someday!

  • Nancy A. 44 posts 175 karma points
    May 22, 2019 @ 12:10
    Nancy A.

    This was useful to me - thank you!

  • Daniel 19 posts 122 karma points
    Jul 20, 2019 @ 14:20

    And to me as well :-)

  • Niels Hartvig 1949 posts 2379 karma points admin hq c-trib
    Sep 02, 2019 @ 08:17
    Niels Hartvig

    Out of curiosity - where does nieuwsItem come from? Because depending on how you get the data, there's the option of getting the content item as a proper ModelsBuilder based object which makes the code simpler and easier to read.

  • kapil 21 posts 114 karma points
    Sep 09, 2019 @ 15:20

    Hi Niels,

    I think that nieuwsItem is model.

    I have used the following and it works.

    @using ContentModels = Umbraco.Web.PublishedModels;
        Layout = "master.cshtml";
        var image = Model.Value<IPublishedContent>("logo");
    <img src="@image.Url" width="250" height="204" alt="@Model.Value("Name") logo" />
  • Niels Hartvig 1949 posts 2379 karma points admin hq c-trib
    Sep 02, 2019 @ 08:22
    Niels Hartvig

    The reason I ask is that I'd like for us to work on making templating with Umbraco simpler and easier to understand, so when I see questions like these it's clear to me that we can do better.

    My dream is that no matter the skill level of a developer, it should be intuitive to create templates and query data in Umbraco. This might involve different techniques for different types of people, but ultimately it should lead to the same code (thus the difference should be in the tooling - not the syntax).

  • Colm Garvey 40 posts 65 karma points
    Oct 10, 2019 @ 19:36
    Colm Garvey

    Hi Niels,

    When assembling template based websites I frequently find myself doing the same things - replacing static HTML with Umbraco field references. Swapping out text is relatively easy, even inexperienced developers can use the Template : Insert > Value dropdown control to insert a reference.

    However I have never understood why there isn't an image reference link in there as well. Instead we have to tediously copy and paste boilerplace code as per the above. Surely it's time for a shortcut method which can be used to render an image tag with the accompanying src and alt tags?

    Similarly, now it appears that a reference to a URL (using the Multi-Node URL picker) also requires boilerplate code. Again, this is a very common requirement.

    These two small improvements would dramatically improve the user experience when creating Umbraco templates from Templates such as those sole on Themeforest.

    I know it doesn't seem like much, but reducing unnecessary complexity really speeds things up and allows novice developers to get much more done.

    Just my 2c

Please Sign in or register to post replies

Write your reply to: