Displaying images on a website is a key aspect of 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'.


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:


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 an image, we need to use the Umbraco Library helper's, MediaById property.

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.

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