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’.

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

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

UMBRACO DEVELOPER?

UMBRACO HOSTING GUIDE

Sponsers

Connect

Hi, I'm Jon, I write articles about creating and optimizing websites as well as making money from your online business. I am technical architect and technology fanatic by profession. You can find out more about me by signing up to my newsletter.