arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

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).

hashtag
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.

  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.

  5. Add Alt text.

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

  6. Click Save

hashtag
Part 2: Add media to a Page

  1. Create a new Page following the instructions in

  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.

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

Click Open to upload the file.
Select the image and then click on
Insert selected
.

  • Once the image is selected you will see a preview in your content like the this screenshot:

  • 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.

  • 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.

  • Next, click on the Media tab button and locate the Media entity that that points to the file you uploaded.

  • Discuss with the trainer, why the Name of the file (from the Files tab) is different to the Media name (from the Media tab).

  • Exercise 3.1
    Showing Add Media button
    Uploading an image
    Add media button
    Select image and click on Insert selected
    Preview of image
    Frontend of newly uploaded image
    Recently uploaded image in File tab
    Recently uplaoded media entity