Adding media to the library

Before you continue, you might find the "Creating content: Media section" video from Umbraco.TV useful.

Note: Do not rely on the Umbraco system to store documents; it should only contain copies as system administrators may delete orphaned* documents during housekeeping.
The originals must be kept in your file system.
[* 'orphaned' means in the system but not linked from any published web page.]

Adding media one file/image at a time:

This gives you complete control over the Umbraco media title and in the case of images allows you to do some manipulation to tweak the various image sub types.

  1. Find the folder where you want to create the media item.
  2. Use the standard three dot menu to "create" your item
    Create media menu
    • Use folders to organise your files
      (please don't dump it in the 'root' folder - we'll move or delete it without warning)
    • Select image (for images) or file (for everything else)
  3. Whatever you are uploading you will need to give your media item an name
    item name field
  4. Depending on whether you are uploading a file or image, the link to open the file selector is slightly different
    • For files you get a "Choose file" button
      upload file button
    • For images you get a "Click to upload" link
      upload image link
  5. Use the button/link to find & upload your file/image

Preparing a multi-use image and fully optimising it for use in all areas of the site is a specialist task - speak to the Digital team if you are going to make heavy use of images.

There are however one or two tweaks you can make to images so that they look better in the various places you may use them.

Shifting the "focal point"

Because Umbraco can use your image in several contexts it needs to crop the image into sub-images with various aspect ratios. A result of this is that parts of the image you don't want to lose can get cropped off.

A common example is the Twitter headless torso.

You take a picture with a smartphone and the image looks like this:

portrait image

Then you post it on Twitter and you get this:

portrait cropped for Twitter

The same happens on Umbraco if you use this image in a news item for example and the answer is to tweak the point of focus for the cropping; you want everything centred on the subject's face.

In the media item image tab you will see a blue dot on the main image:

the blue dot

Notice that all the sub-images on the right are focused on the blue dot. Where the image is too tall to fit in the size allocated, Umbraco crops the bits it can't use and you get the headless (and legless) torso. Move the dot to focus on the portarit's face and the crop is much more suitable - check the result in the sub-images to the right of the main image below:

the blue dot moved

Selective editing of sub-images

You can select each of the right sub-images and zoom and pan them to produce more sutable versions as you can see done below with the "homepage_menu_icon" which has been zoomed in to concentrate on the portrait's face.

media zoomed and panned


Help us improve Gloucestershire County Council

Don’t include personal or financial information like your National Insurance number or credit card details.