Sitecore: Navigating the Media Library


Table of Contents

What is the Media Library?

The Media Library is a shared Library for all sites listed on Sitecore to house uploaded files. This includes images, PDF, Microsoft Word documents, and more. The Media Library can be accessed from two places: 

  1. From the Sitecore Dashboard in the Content Editing section, click on Media Library.
    Media Library in Sitecore dashboard

  2. From the bottom of the Content Editor, click on the Media Library tab.
    Media Library (Content Editor)

The contents of the Media Library can also be accessed in the Content Editor in the Content Tree under Sitecore > Media Library. 

Media Library (Content Tree).png

Files containing sensitive data should not be uploaded to the Media Library.To learn more about the University's data policy, review the University of Chicago Sensitive Data Usage Guide.

Your Media Library Folder

Each site has its own folder within the Media Library, for easier content management. 

Accessing Your Folder

To find your site's media folder go Media Library > Project > UChicago Tenant > [Your Site Name]. 

Once selected, the items contained inside the folder will display on the right-hand side of the screen under the tab labeled Folder.

Folder Tab

Creating a New Media Folder and subfolders

If a media folder with your site name does not exist, someone with Site Administrator access or higher can create a new media folder by expanding Media Library > Project > UChicago Tenant, then right-clicking on UChicago Tenant and selecting Insert > Media Folder. Subfolders can also be created within your site's media folder in the same way. 

Naming Conventions

The name of your new media folder should be the same as the name of your site. For example, the Intranet's media folder is called "Intranet."

Organizing Your Folder

The organization of your site's folder is the responsibility of the site's content editors. You can organize your media folder in any way that works best for you and your team, but some best practices include: 

Moving Media Files

If you accidentally upload a media file in the wrong folder or would like to reorganize your folders, you can do so, even with media files already used on your live site without breaking links. To move a media file you can either drag and drop, or:

  1. Select the file you want to move.
  2. In the ribbon, navigate to Home and select Move to, found in the Operations section.
  3. The content tree will open in a new window, allowing you to select the folder where you want to move the item.
    Moving media files in Sitecore Media Library

  4. When you've selected the intended folder, click Move.
  5. If the media file you moved is being used on a live page, it's always a good idea to double-check the live site to make sure Sitecore successfully remapped the location of the item without breaking the link. If you see any issues on the live site, move the media item back to its original location and the page should return to its previous state.

Uploading Media

Any images you upload should be resized to your intended dimensions before uploading them to Sitecore. Photoshop is a great tool for this if you have it, and you can visit Adobe Express for an excellent free option.

Uploading One File

  1. To upload one file at a time select Upload File.

    File Upload (Single File).png

  2. Select "Choose File" and, using the file upload window, navigate to the location on your computer that contains the document you wish to upload.
    Upload file prompt

  3. Select the item you wish to upload, and press the open button
  4. Press "upload" to complete the process. 
  5. If you uploaded an image, you will need to navigate to the recently uploaded image, select lock and edit, and add alternative text before you can use the image on a page.

Uploading Multiple Files

  1. To do a batch upload (multiple files at once) select Upload files (advanced).
    File Upload (Batch of Files)

  2. Select Choose File and using the file upload window, navigate to the location on your computer that contains the document(s) you wish to upload. Select "upload" after you've chosen all your files.
    Batch upload prompt

  3. Your uploaded items will appear in the "Uploaded media items" box, along with a warning on each telling you that Alt Text is missing. You will need to add that in the next step.
    Warnings on uploaded items

  4. Select "Close." Now you can navigate to your recently uploaded images in the selected folder. 
  5. Once you have clicked on your image, lock and edit the image. Scroll down to the "Image" section. This is where you will add your alt text.
  6. Once you have entered your alt text, click save. Your image is now ready to be used.
    Adding alt text to a media item

Replacing Files with New Versions

If you would like to upload a new version of a file without having to relink the file, you can replace the file already uploaded in your Media Folder instead of uploading a new file. To replace a file:

  1. Navigate to the file you would like to replace in the Content Tree of the Media Library and click on the file. 
  2. Under the Media section you will see your file underneath three options: Attach | Detach | Download
    Attaching an image
  3. Select Attach.
  4. Select Choose File and, using the file upload window, navigate to the location on your computer that contains the new file you wish to upload to replace the existing file. 
  5. Select Attach to complete the process. 
  6. You have now successfully replaced the file. To publish this updated file, open the Publish tab in the Ribbon and select Publish > Publish Item. Ensure Smart Publish is the only box checked under Publishing before you select Publish.

Alternative (Alt) Text

Every image you upload should have Alternative (Alt) Text. Alt text is meant to describe the image as it relates to the content on the page. It is read aloud to users with screen reader software and it is indexed by search engines. It also displays on the page if this image fails to load. For more information on alt text best practices consult Navigating the Media Library and the DIAGRAM Center's Image Description Guidelines.

Decorative Images

When images are used for decoration or have a visible caption that meaningfully describes the image, include an empty alt="" attribute in the alt text field.

The Alt Text Field

In the media library, once you've selected an image and clicked "Lock and Edit," scroll down to the "Image" section. You will see the alt text field. If that alt text field is empty, a red error bar will appear indicating that there is a critical error on the item. This will disappear once you've entered and saved alt text. 

Alt text field