How to Manage Files in the Media Library & Add Image Alt Text

How to Manage Files in the Media Library & Add Image Alt Text

Watch a video on the Medial Library

Here's a short tutorial on how to manage your Images and PDF files in the Media Library. Plus, if you're working on a website accessibility initiative, we've included instructions on how to add alt text to images.



Transcript
Hello, Toby here from Orbit Media. I'm going to demonstrate how to use your media library in WordPress. To get to the media library, you'll go to your left hand sidebar and go to “media” and then “library.”

The first thing that you will notice is a series of folders over here in this left hand side bar. You can create and set up folders for whatever groups of images make sense for your website. To add a new image to your media library, you'll click on “add new” and select files to select a file from your device. I've uploaded an example image here of some mountains and a sunset.

If you click on the image, you'll get some additional information about the image itself, including the uploaded date, the person who uploaded it, file name, file type, file size, and dimensions. The file size is important for considering page speed at orbit, we typically recommend keeping your images below 300 kilobytes.

The dimensions are listed for the various image locations on your site, in your site's style guide. So please reference that for whatever dimensions should be used and the various locations throughout your site in this case, 900 by 600 pixels is appropriate for this website. I think this image is good to go.

The last thing I want to mention here is the title and alt text. We usually recommend deleting the title of your image. This is something that's going to form automatically based on the file name that you upload. We can just delete this example, and I'm going to replace that with some alt text in the alt text field. So the alt should be something short and descriptive that a screenreader can read to someone who cannot actually see the image itself on your website.

In this case, I think something like mountains and a sunset, the alt text” mountains and a sunset”, will suffice for this image. And that's pretty much all there is to uploading image to your media library. If you have additional questions about how the media library works, I would recommend referencing the how-to document for your site.

Written instructions for the Media Library

To view the Media Library, go to: Media > Library

If you need to access the media library while entering content, you can click the “Add Media” within a WYSIWYG text editor or click an "Add Image" button within page blocks that have image fields. These buttons will take you to the Media Library dashboard. On the left-hand side, you will see any folders you have created, and in the center you will see any uploaded images.

NOTE: All images should be cropped and compressed before adding to the media library. It is recommended that images be no larger than 250kb (though sometimes this is unavoidable). You will want to crop the image to the appropriate dimension prior to compressing. This site, tinypng.com, can be helpful in compressing file sizes for images.

How to Add Images to the Media Library

  1. To add new images and files, click the “Add New” button at the top of the page. Then click “Select Files” or simply drag and drop a file into the window.
  2. You can add files directly to a specific folder or drag and drop them into the proper folder later.
  3. Watch a video on how to crop and save an image for web and reduce page load times

How to Create Folders in the Media Library

  1. Start in the Media Library link in the left side rail of WordPress
  2. Below the "Search Folders" search bar, you should see a parent folder called "Media Library" that includes all images not sorted into folders. Click on that parent folder first.
  3. Click the “+ Add New Folder” button in the upper left corner.
  4. Create a title for the new folder and hit “CREATE.”
  5. You can also nest folders by dragging and dropping them over the folder you wish to nest it under.
  6. If you wish to create a subfolder, right click on the parent folder and select “New Folder”. Create a title for the folder and hit “CREATE.”

How to Edit the Metadata for a Image or PDF in the Media Library

  1. When you click on an image or PDF, you’ll see a popup preview of the image and its associated metadata:
    1. Alt text
      1. NOTE: For more information about alt text, check out our accessibility tips page
    2. Title
      1. For PDF files, updating this title may update the link you've embedded on the page, anywhere it is linked, so be careful editing this for PDF files after it has already been linked on pages.
    3. Caption - Optional. Can be turned on in Elementor settings if needed.
    4. Description - Generally not used. Ignore.
  2. NOTE: Orbit’s recommended best practice for image metadata is to add any relevant alt text and leave all other fields blank, unless otherwise required by the design.

How to Change an Image’s File URL

  1. In some cases, you might have to update an image’s URL in order to free up that slug for another page or file on the site.
  2. Navigate to the the media library and then find the image whose URL you want to update.
  3. Click on the image to open the Attachment details panel.
  4. In the lower right corner, you should see a list of links. Click “Edit more details.”
  5. In the upper right corner, click on “Screen Options”
  6. Make sure that “Slug” is selected and then close out of Screen Options
  7. Scroll to the bottom where you should see the slug field available
  8. Update the slug as needed (usually in order to free up the slug for another page or file on the site)
  9. Click “Update”

Image Alt Text Best Practices and Accessibility

  1. Images used for means other than decoration should have include alt text to describe the image so a screen reader can inform the user of the contents of the image (I.e., Woman talking on phone at a desk with a large window city scene behind her).
  2. Image alt text should describe the image and should not use special characters and should not be used as a means to stuff keywords into the page.
  3. NOTE: For more information about alt text and accessibility, check out our accessibility tips page

How to Add a Link to a PDF on a Page

  1. Watch a video on How to Embed a PDF Link into a Page or Post in WordPress
  2. In addition to images, you can also upload and manage PDFs in the Media Library.
  3. Uploading PDFs works the same way as images, the only difference is linking to/adding PDFs to a block.
  4. If you need to link a PDF, the “File URL” field is the link you will use for linking directly to the PDF. Simpy click “Copy URL to clipboard” or manually copy the URL and then use that URL to link to the PDF in a CTA link or button, like you would for a page or external site.


FAQs about the Media Library

Question: Can I crop and edit photos in the media library?

Answer: No. You want to crop and edit your photos somewhere outside of WordPress. We don’t recommend cropping or editing photos in WordPress.

Question: Will alt text be on all my images?

Answer: Alt text only appears on images where you’ve purposefully placed alt text. See more about Orbit’s alt text best practices on our accessibility tips page.

Question: What file types should I use for my images?

Answer: Orbit recommends uploading your images as .webp/.jpg/jpeg whenever possible. This is typically the best file type for things like stock photography or background images. For images that need to be higher resolution (like infographics or maps) it's acceptable to use a png. For icons we recommend a png or an svg. The reason for these recommendations is page speed. The lower the image size, the better your page speed scores will be.