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 - this will help our web pages to load more quickly.
    Please use these guidelines:
    - Maximum image size: 200KB
    - Maximum image dimensions: 8" x 8" at 72 dpi

  • 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 make sure it isn't already there.

  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 those using screen readers to navigate our website with ease).  The alt text can be a short description of the image.
    Screenshot: location of add alt text field in Media Library.
  3. Hit the "Insert into page" button.
    Screenshot: using the Insert into Page button in the Media Library
  4. 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
  5. 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:
    - 200 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.)

Keywords:wordpress, images, files, upload   Doc ID:77762
Owner:Sally G.Group:School of Pharmacy
Created:2017-10-31 10:35 CDTUpdated:2023-02-20 12:48 CDT
Sites:School of Pharmacy
Feedback:  0   0