Exercise 6.1 - Uploading and using media

In this exercise you will upload an image directly to the media library (Part 1) and then use that image when creating content (Part 2).

Part 1: Upload media file

1. Navigate to the Media page by clicking on Content then Media on the Admin menu.

2. Click the Add Media button at the top left of the page.

   

   Showing Add Media button
3. Click Image to upload an image file.

   
4. Upload an image file:

   1. Give it a short, descriptive name.

   2. Choose a file from your computer, using the Browse button.

   3. Click Open to upload the file.

5. Add Alt text.

   Note Image alt text is required to enable screen readers and facilitate vision-impaired people.

6. Click Save

   

   Uploading an image

Part 2: Add media to a Page

1. Create a new Page following the instructions in Exercise 3.1

2. Click on Banner and then expand "Banner featured image". There you will see an Add media button. Note - you may not have a "Banner" tab if you are not using CivicTheme. In that case, find any Media upload field and use that.

   

   Add media button
3. Select the image and then click on Insert selected.

   

   Select image and click on Insert selected
4. Once the image is selected you will see a preview in your content like the this screenshot:

   

   Preview of image
5. Fill out any required fields for your Page and click the Save. The image now appears on the frontend. The location of the image may be different on your site depending on your theme.

   

   Frontend of newly uploaded image
6. Navigate to Content → Files from the Admin menu and locate the image file you uploaded. It should be at the top of the list as it is the most recently added file. Note the name of the file.

   

   Recently uploaded image in File tab
7. Next, click on the Media tab button and locate the Media entity that that points to the file you uploaded.

   

   Recently uplaoded media entity
8. Discuss with the trainer, why the Name of the file (from the Files tab) is different to the Media name (from the Media tab).

Tip: The Media entity allows you to enter a more user-friendly Name (and other metadata) rather than using the name of the file.