Media in WordPress

Media Library

Adding media through the Media Library is the commonly used method, as it is easier to manage and maintain right on the page, and can be done in four steps.

Step 1. Go to Media > Library to access the Media Library with all uploaded media.

 
Step 2. Once in Media Library page, click to Add New media.

 
Step 3. Select the desired media (image/document) from the computer and click Open to insert the media into the library.

 
Step 4. Once the media file is uploaded it should appear in Media Library as seen below. It may take a while to upload, but if it does not appear after a few minutes, refresh the page (as it probably means it may not have refreshed automatically).

 

Add New

Another way to insert media is to directly Add New media from the side pane, without going to Media Library first. Below are the step-by-step instructions on how to do this.

Step 1. Click Add New under Media.

 
Step 2. Drag files into the dotted section, or click Select File to upload.

-or-

 
Step 3. The uploaded file will appear below the dotted box which also indicates that the file was automatically added to the compiled Media Library as well.

Adding an image

Step 1. Click the “Add Media” button located on the top left of the web edit toolbar.

 
Step 2. A pop up version of the Media Library, titled Insert Media will appear. From there, select and alter the image attributes in the Attachment Details pane highlighted below. (Note: be sure the “Alt Text” box is filled, to fulfill accessibility requirement!)

 

Step 3. More specifically, check the alignment, indicating where the image will be positioned in the page, in relation to the text.

Step 4. Make the image clickable, usually linked to another page. Select Custom URL under “Link To”, then manually type in the URL.

Step 5. Determine the size of the image. Typically, the “Half-width – 375×250” size is selected which automatically resizes the image.

Step 6. Once all the image attributes have been filled, click the Insert into page button to insert in the code. Then, polish the code by removing the captions, as highlighted below. Doing so will disable displaying any undesired image captions in the website.

 

Cropping Images

Cropping images becomes essential when managing WordPress, emphasizing the importance to understand how to use it. The steps to crop an image is a little different in WordPress than the standard way, but following the steps below will make it easier.
 

Important note when cropping images

Before cropping, we advise uploading a second copy of the original image and labeling it as “EDIT-name of image”, as it will help minimize image mix-ups.
 
Step 1. In the Media Library (Media > Library) select an image to crop.

 
Step 2. Clicking the image will open the Attachment Details window. Here, select to “Edit Image”, located below the image on the left.

 
Step 3. Doing so will open a image editing toolbar right above the image. Click on the image first to begin the cropping process.

 
Step 4. Once the image is clicked, dotted lines will surround the image border. Drag in/out the lines to appear to the desired cropped size.

 
Step 5. After setting the crop size, click the crop button (located to the very left of the image toolbar), to confirm the image crop.

 
Step 6. Click the Save button below the image to save the edit into the Media Library.

 

Adding alt text

Alternative (alt) text is defined as descriptions of media files (primarily images) in a site. It is important for all images in UW sites to include alt text, as it creates a more accessible site for users utilizing assistive technology, like a screen reader, as it goes through an image and reads aloud its alt text. It is a simple, yet very powerful process, essential for a diverse audience. Below is a guide on how to add alt text to WordPress images.

Step 1. To add alt text into images in Media Library select the image by clicking on it.

 
Step 2. When clicked, the Attachment Details will pop up. In the right pane, input image/file description in the “Alt Text” box (highlighted in yellow).

 
Step 3. When finished description has been added, click the “x” button on the upper right to exit, as WordPress will automatically save updated content added here.

 

Left image alignment

Figure 1 illustrates how it would look to align an image to the left with its corresponding text on the right. The <img> code tag is used to input any visual content/image content into the site page. The type of alignment is indicated using the code class="alignleft" followed by other attributes of the image, such as its description and measurements.

Figure 1. The layout illustrates image with left alignment, with text content to its right.

Code Template

<img class="alignleft" src="Image source/location"
alt="Description text of what the image is (for accessibility)"
width="Image width" height="Image height"/>

Example

<img class="alignleft" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-
content/uploads/sites/158/2018/07/17194946/nsf_ccri_homepage_image.png"
alt="Image of NSF presentation: Faculty development to obtain student success: 
learning across national science foundation grant projects"
width="300" height="300"/>

Right image alignment

Aligning an image to the right follows the exact same process as aligning to the left, except the code, will be class="alignright" instead of left. Figure 2 shows the possible outlook if the presentation preview image had been aligned to the right of the text.

Figure 2. This is how the layout would look with the image aligned to the right and text to its left.

Code Template

<img class="alignright" src="Image source/location"
alt="Description text of what the image is (for accessibility)"
width="Image width" height="Image height"/>

Example

<img class="alignright" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-
content/uploads/sites/158/2018/07/17194946/nsf_ccri_homepage_image.png"
alt="Image of NSF presentation: Faculty development to obtain student success: 
learning across national science foundation grant projects"
width="300" height="300"/>