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.
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.
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.
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 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.
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.
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.
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.

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