Media Library

Last updated: July 10, 2023
 

The Media Library icon allows users to:

• upload new images
• browse the media library for existing images
• upload new documents (PDFs, Word docs)
• resize and crop images within the media library

Please do not use the Media Library to upload videos. Use the Video Embed icon to add videos to your page.

Adding a New Image to the Page

*Click here for image prep guidelines

1. Make sure that the Body Field's text format is toggled to Full HTML
    
2. Place your cursor at the start of the line where you want the image added
    

3. Click the Insert from Media Library icon
     

   

    

4. Click the Select files button under Add File 

   

    

5. Browse your computer and select the compressed/cropped image
    
6. Add the required alternative text. Alternative text is important for accessibility as it describes the content of images
    
7. Add title text (optional). Title text is used as a tool tip when the user hovers the mouse over the image
    

8. Click the blue Save and Select button
     

   

    

9. Click the blue Insert Selected button
     

   

    

10. Click the gray Edit Media button at the top left of the newly uploaded image if you'd like to update the alternative text, set image alignment or add an image caption
     
11. Click the blue Save button at the bottom of the page once done

Adding an Existing Media Library Image to the Page
 

• Place your cursor at the start of the line where you want the image added
   
• Click the Insert from Media Library icon
   
• Below the Add File dialog box, either type in the image file name in the Name search field or scroll through the image library
   
• Select the image and click the blue Insert Selected button
   
• Click the gray Edit Media button at the top left of the newly uploaded image if you'd like to update the alternative text, set image alignment or add an image caption
   
• Click the blue Save button at the bottom of the page once done

Upload a Document Media Type (pdf):

1. Using ‘Full HTML’ text format, within the Body field, click the ‘Insert from Media Library’ tool bar button. 

   

   
   
    

2. Select the Document link on the left sidebar of the modal. 

   

   
    

3. Click the Browse button under Add File and select a document file to upload.
    
4. The document will upload to page.

To edit the document’s link description:

1. Click the ‘Edit media’ button of the uploaded document.
    
2. Within the Edit media modal, click ‘Edit this media’ button.
    
3. Within the Edit Document modal, add or edit the Description field for the document. This field will be the link to the document.
    
4. Click the Save button.

Please Note: Documents uploaded as media content, are block level elements, wrapped in article tags.

Adding PDF/document as an inline link

If you need an inline link (documents within a paragraph for instance), or an inline pdf, the best option is to use the ‘Link’ toolbar button and then use the IMCE File Browser to upload the document, so that the link remains in-line with the surrounding text.

1. Type or paste in the text you'd like to link. Then highlight that text.
    

2. Click the Link tool button on the CKEditor toolbar. 

   

    

3. Click Open File Browser within the Add Link modal 

   

   
    

4. Once within the file browser, wait for the public:// directory to load - it may take a minute.
    
5. Click the Upload button at the top
    

6. Click the green +Add File button 

   

    

7. Click the Select button at the top
    
8. Click the Save button on the Add Link modal window
    
9. The link is pasted in-line with the surrounding text in the Body field

Media Editing and Cropping Tools

To resize or crop an image, please read the Media Editing and Cropping Tools user guide here.