Managing Images
The Media LibraryAdding an Image
This page of the user guide will help Sitecore Contributors add and resize images. Images are uploaded and stored in the Media Library which can be found within the Rich Text Editor
. Recommended image types are
To Add an Image
Open the Rich Text Editor and click the area within the editor where you'd like thejpgs and pngs.
How to Add an Image
- Click an area inside the Rich Text Editor where you would like an image to be added.
- (see image below)
Click the
Insert Sitecore Media button
In the Media Library, click the Images folder first and then click the arrow next to the Images folder. A drop-down will appear with folders. Navigate to the appropriate folder in which you've been given permission to edit.
| Note |
|---|
NOTE: As a contributor, your permissions will only allow you access to folders that are connected to your web pages. |
Choose an image you'd like to add within your appropriate folder, or click Upload to add a new image to the folder.
| Note |
|---|
NOTE: If the upload button is not functional, check to make sure you are in the proper area. It is important to only upload images within the area you've been given permission to edit to avoid images ending up in random folders. |
. (see image above)
Make sure the Media Library tab is selected. (see image below)
Expand title Sitecore students, click here to expand... Sitecore students that do not have Contributor access yet:
1. Click the arrow to expand the Sitecore Training folder. (see image below)
2. Click the Images folder. (see image above)
3. Skip steps 4 and 5 below. Continue on to Step 6.
Click the arrow to expand the Images folder. (see image below)
Click on your department's folder. (see image above)
Add an image.
Tip title Best Practices for Images - Avoid using images that contain a lot of text. Images with a lot of text do not align with accessibility standards. (see example image below)
- Avoid using images that are too casual, informal, or suggestive in nature.
- Avoid using 3rd party logos. Exceptions may be made for NIH, CDC - USF affiliates that have received approval from the department and organization. Example: A Chick-fil-A logo on a website as a sponsor for a departmental event.
To add an image, choose between:
Expand title I would like to add an image already in the Media Library. (click to expand) 1. Click on the image you would like to add from the Media Library.
2. Click Insert. (see image below)
Expand title I would like to upload a new image. (click to expand) 1. Click Upload. (see image below)
2. Click Choose File. (see image below)
3. Navigate to the image you would like to upload and click Open.
4. Click Upload. (see image above)
5. Add AltText. (see image below)
Note 'Alt' Text: Providing a short description of the photo is important for Search Engine Optimization (SEO) and screen readers.
SEO helps search engines such as Google identify information within a website for better search results.
Screen Reader software is assistive technology that is sometimes used by persons who have a difficult time seeing or reading a screen. Providing 'Alt' text provides a description of the photo that the screen reader can read out loud to the user.
- Avoid using images that contain a lot of text. Images with a lot of text do not align with accessibility standards. (see example image below)
When you are finished, click Save and Close.
Click Insert and your image should be visible within the editor.
Click Accept to make the change.
For more information pertaining to alt text, click here.
6. Click Save/Close. (see image above)
7. Click Insert. (see image below)
Note NOTE: If the upload button is not functional, make sure you have clicked on the folder you have permission to access.
| Tip | ||
|---|---|---|
| ||
Sitecore only allows images to be uploaded with a maximum size of 800KB. Click here for tips on how to resize a photo. |
| Anchor | ||||
|---|---|---|---|---|
|
If you've successfully uploaded an image or have found one within the Media Library that you'll like to use but you've noticed that the image is too big or too small on your page:
Make sure you have the Rich Text Editor open and then right
Right click on the image
and select Properties. (see image below)
If
- Make sure the chain link is closed. (see image
- below)
- Click inside the Width or Height properties box and type in a new value.
- (see image above)
Click OK.
Click Accept.
Your image should appear on your page.
Next: Adding PDFs, Non-Image Files and Hyperlinks