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.


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.


The quickest is to simply drag an image into the main media library.


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.


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.


Add in a title and click ‘Save’.


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.


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:



To add an image into the image picker, click on the ‘+’ icon.


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

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *