Topics Map > Website > Word Press

Using the Wordpress Media Library

The Wordpress Media Library is a repository for images and files that can be added to web pages and posts.

Important Hints:

  • Images to be used on the SOP website should be optimized - smaller file sizes facilitate faster web page loading.
    Please use these guidelines:
    - Maximum image size: 500KB

  • News story image dimensions are 1024px x 682px (72 dpi)

  • All images should have alt text assigned to them to ensure that web content is accessible

If you need help optimizing images, please contact IIT for assistance.

Searching the Media Library

The image of the person / item you wish to use on your web page may already exist in the Media Library.  So before uploading a new image, do a quick search to see if the image you need is already available.

  1. If you are in page edit mode, click on the "Add Media" button in the WYSIWYG editor.
    Screenshot: finding the Add Media button in the WYSIWYG editor

  2. The Media Library window will appear.  Type a term into the search field located in the upper right corner.
    Screenshot: using the term search field in the Media Library

    Useful search terms include:
      - Division/Program name (pharmsci, ppd, sas, dppd)
      - "Portrait" (for images of students, faculty & staff that are sized for news stories feature images)
      - "Stock image" (brings up stock images of campus scenes)
      - "Student org"

Adding an image from the Media Library to a web page

  1. Position the cursor in the area in the text editor where you want the image to be added.
  2. Click on the "Add media" button. Select an image from the library by clicking on it.  Make sure the image has alt text (essential for visitors who use screen readers to easily navigate our website).  The alt text can be a short description of the image - helpful alt text tips available at

    Screenshot: Adding alternative text to an image is essential for accessibility

  3. Scroll down to the Attachment Display Settings area. Set the "Link To" field to None, and select a size option.  Thumbnail images are square (150px x 150px).  Other size options may vary depending on which website you are editing.
    Screenshot: selecting an image size before inserting it into the page.
  4. Hit the "Insert into page" button.
    Screenshot: using the Insert into Page button in the Media Library
  5. The image will be added to the page. 
    Click on it and choose a display mode (align left, align right, align center, no alignment).
    To resize the image, click and drag on a corner.

    Screenshot: changing the display mode and resizing and image
  6. Save the page.

Uploading a New Image to the Media Library

  1. Before adding new images to the Media Library, please make sure they are:
    - 500 kb in size or smaller
    - 8" x 8" at 72 dpi, maximum

    This will help to keep website page load speeds faster.

  2. If you are in edit mode on the page you are editing, click on the "Add Media" button.
    Screenshot: finding the "Add Media" button in the WYSIWYG editor
  3. In the Media Library window, select the "Upload File" tab.
    Screenshot: using the Upload Files tab in the Media Library window.
    Then drag the file(s) you wish to upload directly onto the window.  Or click on the "Select Files" button to navigate to the folder on your computer that contains the image.

  4. Add any keywords to the title field that might help others find the image - for example:
    - the division (ppd, sas, pharmsci, etc.)
    - portrait
    - faculty / student / staff / student org

    Screenshot: filling in the fields to make the attachment accessible.
  5. If you want a caption to appear under the image (in all instances), add some caption text.
  6. Make sure the "Alt Text" field is filled out.  (This is a requirement to ensure our site is accessible.)
  7. The "Description" field will display text when a visitor hovers over the image.  (We generally leave this blank.)

Keywordswordpress, images, files, upload   Doc ID77762
OwnerSally G.GroupSchool of Pharmacy
Created2017-10-31 09:35:51Updated2023-11-21 10:45:10
SitesSchool of Pharmacy
Feedback  0   0