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.
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:
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);
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
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