UW Brand

Media in WordPress

This is a a brief walkthrough of how to upload, edit, and place media into a WordPress page with some examples.

I. Uploading media to WordPress

There are two ways to add new media (images or documents) to a site page via the Media tab located on the left side column: inserting images from Media Library or choosing to Add New media. Below shows a step-by-step instruction on each of these methods.

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.
This image highlights where the media library is located on the left-hand menu
 
Step 2. Once in Media Library page, click to Add New media.
This image shows where the 'Add New' box is located at the top of the page
 
Step 3. Select the desired media (image/document) from the computer and click Open to insert the media into the library.
This image highlights the 'Open' button used to insert the example image 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).
This image shows the example image properly uploaded to the media library
 

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.
This image highlights where the 'Add New' button is located on the left-hand menu
 
Step 2. Drag files into the dotted section, or click Select File to upload.
This image highlights to drop files in the middle of the screen

-or-

This image shows the pop-up 'Files' that will show up if you click 'Select Files'
 
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.
This image shows what it would look like if you successfully uploaded a photo (a small bar with the name of the image)

II. Adding images to a page

The common method used to add images to a site page is listed in the steps below.

Adding an image

Step 1. Click the “Add Media” button located on the top left of the web edit toolbar.
This image highlights the 'Add Media' button on 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!)
This image highlights the righthand pane where you can specify image attributes such as Caption, Alt Text, Description, Image Credit, Credit URL, Alignment, Link To, and Size
 

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.
This image highlights where you would adjust image alignment under 'Attachment Display Settings'
This image highlights where you would add a URL to make the image clickable under 'Attachment Display Settings'
This image highlights where you would adjust the size of an image under 'Attachment Display Settings'

 

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.
This image shows a person deleting any unnecessary information to polish up the code
 

 

III. Editing Media in WordPress

WordPress gives some capability to edit images, including: rotating, flipping and cropping images. Cropping tends to be the most used tool, so below is a guide on how to crop images in WordPress. Additionally, we will show how to add what is known as “alt text” to enable accessible images for screen readers. If you would like to edit your pictures beyond these capabilities, we recommend editing the images on a separate platform and then uploading them to WordPress.

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.
This image highlights an example image to crop located in the 'Media Library'
 
Step 2. Clicking the image will open the Attachment Details window. Here, select to “Edit Image”, located below the image on the left.
This image highlights the 'Edit Image' button located beneath the image
 
Step 3. Doing so will open a image editing toolbar right above the image. Click on the image first to begin the cropping process.
This image highlights the image that would then be clicked
 
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.
This image shows arrows on the righthand side and bottom of the image where you would drag in/out to crop the image
 
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.
This image highlights the crop button located at the top left of the pop-up
 
Step 6. Click the Save button below the image to save the edit into the Media Library.
This image highlights the save button located at the bottom of the image that should be clicked when finished cropping
 

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.
This image highlights an example image to add alt text to in located in the 'Media Library'
 
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).
This image highlights the 'Alt Text' box located in the right pane of the 'Attachment Details' pop-up
 
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.
This image highlights the 'x' button located at the top right of the 'Attachment Details' pop-up to click when finished adding alt text
 

 

IV. Image Alignment

Images can be aligned to the left or right of a block of text. The important line of code for this feature is class="type of alignment" which controls the image alignment location.

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.

A left aligned image with text to its right.

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.

This is a right aligned image with text to it's left.

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"/>