How To Display Media In Your Umbraco Site

Displaying images on a website is a key aspect on any build.  Luckily, Umbraco provides us with all the properties required to allow a content editor to attach images to a document type, as well as the API methods to display them.

Media Picker

The first thing we are going to do is add a property to a document type to allow a content editor to add an image. In your section menu, select -> Settings -> Document Type.  Pick the document type you want to modify, click on it and then select the 'Generic Properties' tab, and hit 'Add New Property'. umbraco_media_picker From the 'Add Properties' dialog, call the property whatever you want and set the type as 'MediaPicker'.  In the section content section, you can then attach an image to it: umbraco_media_picker_content

Displaying Your Media In Your Templates

Now we have a property on our document type, it's now time to display it.  In order to render image we need to use the Umbraco Library helper's, MediaById property.

  var media = Library.MediaById(Model.MediaPicker);
  <img src="@media.umbracoFile"/>}

Assuming you're using a strongly-typed view model, then 'MediaPicker' will be a property that relates to the property we defined above.  There is also an additional helper in the Umbraco media helper.

<img src="@Umbraco.Media(@CurrentPage.MediaPicker.ToString()).Url" alt="" />

Using @Umbraco.Media uses slighly more code then the Library helper but they both work

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top