What is the media section?

The media section is your central library of images and files that can be embedded or linked to from your content pages. Having the Media Section separated this way enables media files to be reused and also eases management. The Media Section consists of:

Folders are just like you have on your computer and their sole purpose is to help you organise your files and images.

Files are any kind of file that is not an image. I know that’s maybe a strange definition, but images are special on the web, as we’ll see in a minute. On the web you would typically share documents in the PDF file format. You can also upload other types of file to the media folder, these include Word, Excel etc.

Images are any image format, typically jpg, png or gif. There are other types of image such as tiff, but those would not be suitable for use on the web.

Images come with many more considerations than files (which are standalone objects) because they are embedded into your webpages and are part of the visual presentation. They also effect page load times and performance.
Because of this, most of this article is dedicated to images.

Take a look around

Access the Media Section from the link in the top left menu of the Umbraco back office:

Hopefully you should see a perfectly organised list of folders! You create folders in the Media tree on the left-hand side of the screen. To rename a folder, just select it and edit the Name field in the top of the main editing area, then click Save.

You can move a folder by right clicking the folder in the Media tree and selecting ‘Move’ from the context menu (you will also see options for sorting and deleting). Moving a folder will not break any links to the media contained in the folder – they are solely here to keep you organised in the Umbraco back office.

You can create a media item (file or image) in two ways:

  • Select the folder where you want the new item and click the 3 dots to bring up the context menu which will give you the option to create a new file, image or folder. Note: depending on the way your site is configured, some folder may only allow images.

Then in the editing area, give the item a Name, then upload the file as a separate step.

  • You can also select the folder where you the new item(s) and then you can either drag and drop files from your desktop onto the ‘drop panel’ or click the link “or click here to choose files”. You can select one or more files from your desktop.

Filename vs Name

Files and images have a filename, which is the is the original name of the physical file that you upload. When it is uploaded to Umbraco, it is given a Name which is a more user-friendly, human readable name. You can change the Name of a file or image without it breaking any links to it from your content, and I would encourage you do so to help with organisation and searching.

In this example you will see the physical filename is grey.png but the Name we have given the image is a more descriptive ‘Umbraco Certified Partner Logo’.

Crops

Depending on your website configuration, you may have one or more predefined image crops to the right of your image.

These are used to automatically render the image in the correct dimensions for where it is used. For example, if you use the image in a banner it will have different dimensions when used in a preview box.

You can edit these crops by clicking on them and shifting/zooming to get the desired crop and focus point for its intended use.

Info tab

Clicking on the Info tab in the top right-hand menu will provide you with information about the file or image.

The Links field shows you the filename and clicking on it will open the image in a new browser tab.

The ‘Used in Documents’ field shows where the image is used. This is really useful for housekeeping and deleting old unused images.

Searching

To search the Media section, select the folder you want to search, then click the search button in the tool bar on the right of the editing area.

How images are processed

In modern websites, the final image you see on a web page is often not the original image that you uploaded into your Content Management System. We put a lot of effort into automating the rendering of images to best suit where it used. For example, they may be:

  • Cropped to have consistent size in galleries or preview cards.
  • Resized to the smallest possible size whilst retaining the highest quality.
  • Filtered – a visual filter such as black and white.

These options can vary on different pages - that’s part of our job as developers to work out how this is all configured. What’s important to the you, the editor, is that it’s uploaded once and reused or reformatted automatically behind the scenes.

 

Before you upload

Above all, make you have a good quality image. That’s the most important thing, but there are some other things you should consider that will make your life easier in the long run.

  1. Make a copy of the original image in a web-friendly size
    We all have image editing software on our computers. Most programs will give you the option to ‘Save for web’. What you’re trying to achieve here is to make sure you are not uploading a huge 20MB file. Even though the final image is processed on the front end of your website, that big file will still need to be processed and uploaded, taking up valuable resources and slowing your site down. They should always be below 1MB in file size and we recommend no more than 2000 pixels wide.
  2. Give the image a descriptive file name
    By default, Umbraco will use the file name as the Image Name in the Media Section. So, if you upload an image called DSC0000234234234.jpg, it will use this as the Name in the Media Section. Consider using something like ‘man-in-coffee-shop.jpg’ and then Umbraco will save it with a human readable name ‘Man In Coffee Shop’. This will be a huge help to you when searching for images in Umbraco.
  3. Use the right format
    jpg is good for photos
    png is good for graphics (like logos)
    png or gif are good for graphics that need transparent backgrounds

 

Helping you stay organised

Always use folders to organise your images.

Rename and reorganise your folders over time. As you add more images, you will probably need more folders – go ahead. Moving an image, renaming a folder or even changing the Image Name will not break the link to the image from the content page. This is all here to help you keep organised.

Delete unused images. This is good practice and will really help you over time. Do this often to avoid creating a big task for yourself later.

Empty the recycle bin. Deleted images and files are saved in the recycle bin. This is a very useful feature, but don’t forget to empty it from time to time.

 

Hopefully this has given you a great insights into the Umbraco Media Section. As always, please get in touch with us if you have any questions.