Adding media to the library
Before you continue, you might find the "Creating content: Media section" video from Umbraco.TV useful.
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.
- Find the folder where you want to create the media item.
- Use the standard three dot menu to "create" your item
- 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)
- Use folders to organise your files
- Whatever you are uploading you will need to give your media item an name
- 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
- For images you get a "Click to upload" link
- For files you get a "Choose file" button
- Use the button/link to find & upload your file/image
6. Tweaking your image (optional)
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:
Then you post it on Twitter and you get this:
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:
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:
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.
