How To Work With Images In The Umbraco Backend

A web page would be pretty boring without images.  To display an image on one of your Umbraco pages it must be loaded into the Umbraco Media library. Many companies will provide you with a pre-set library of images that you can use, while other companies will trust their content editors to upload images themselves.  Before we start talking about images, I’ll briefly discuss the ‘Media Library’ and how you can access it. umbraco_media_library In the main menu on the left-hand side, select the 'Media' section, to open the 'Media Library'.  This is the area you can add and manage your media.  In the media library, you can see all the images, documents, videos etc.. that have uploaded to your website. What type of media items that you can upload to your website will be based on your IT department, so if you can’t upload a certain file you might need to speak with them and get it allowed. Adding an image to the media library is easy, in the main 'Media' library panel, you have two options. umbraco_media_library_4 The quickest is to simply drag an image into the main media library. umbraco_media_library_1 The second option is to use the media picker.  To use the media picker, click on the link labeled 'or click here to choose files'.  This will open an image/media picker and allow you to insert an image.

Browsing The Media Library

After you have added several items to your media library, you can now browse your assets.  If you simply add images to the library without organizing it, the library will soon become a nightmare to find and manage content.  Instead, I would highly recommend that you use folders to help you organize your library. umbraco_media_library_2 To create a new folder, click the '...' button on the right-hand side of the item, this should load the create dialog.  Click on the 'Folder' icon. umbraco_media_library_3 Add in a title and click 'Save'. umbraco_media_library_5 You will now see your new folder in the media library where you can organize how you please.  Copying, moving and cloning media is exactly the same as you would normal content. umbraco_adding_image_editing_1 If you right-click on an image the icon dialog will appear.  In here, you can do the same things you can do with normal content.  It's probably a good time to note that if you delete a file, image etc..  it will be sent to the recycle bin before it's permanently deleted.

Adding An Image

You add images to a page using the image picker, which looks like the below: umbraco_media_library_6   To add an image into the image picker, click on the '+' icon. umbraco_media_library_7 From here you can browse your media library, or simply drag an image in. Tips When Inserting Images Within Umbraco Getting a high ranking in Google is key to your company's success. When you add images to your page, I would highly recommend that you always add an image description and title.  The more useful information you can add to a page, the easier it is for Google to understand your page and consequently Google will rank your web pages higher.


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