Adding Images in WordPress

In a WYSIWYG editor field in WordPress:

1. Place your cursor in the content where you would like your image to appear.
   • Note: For best results, put the cursor at the beginning of a paragraph. The image will end up with the top of the image even with where your cursor is when you go to add it.
2. Click the Add Media button located above the editing toolbar.
3. The Add Media window will appear. If it is not already selected, click on the Upload files tab.
4. Either drag and drop your image file onto the window to upload it or click the Select Files button and navigate to the image file on your computer.
   After your image has finished uploading you’ll see a small preview of the image which will be automatically selected and a side menu containing the image Attachment Details and Attachment Display Settings.
5. Important: Under Attachment Details, add a short visual description of the content and meaning of the image into the Alt Text field.
   • Note: All images must have alt text and adding it when you upload the image the first time will make it available for all future uses of the image, even if you put it on a different page or use it differently.
6. Optional: If you wish, you can also add content in the Title, Caption, and Description fields.
   • Title: Although this is not used by WordPress when inserting the image it is an automatically searchable field that could help you to find this specific image later on in the WordPress Media Library.
   • Caption: Content entered into the Caption field will appear below the image on the page.
   • Description: A longer description of the contents of an image added to this field may be useful when the image is complex and attempting to communicate significant amounts of detailed information.
7. Under Attachment Display Settings, choose an alignment for the image.
   
   • Note: For most images added to your content, aligning the image to the Right is the best option. The image will be visible on the right side of the page with the content flowing around it.
8. [Optional] If you want your image to be a clickable link, change the Link to dropdown to one of the link options and fill in the fields that appear.
   • Note: You can either link the file to itself (useful if you insert a small version but want users to be able to see the full-size version), to a media file page (this is similar to the previous version but now the image is shown embedded in its own WordPress page), or to any custom URL.
9. Select a Size in the dropdown. The options for most images are Thumbnail, Medium, Large, and Full-Sized.
   • Note: For most images added to your content, Medium is the best option. WordPress will automatically create a smaller version of the image and this is what users will see. This has the advantage that the file size is smaller and wastes less data, which also helps the page to load quicker.
10. Click the Insert Image button.
11. Preview the page to make sure the image displays correctly. Don’t forget to check how it appears on phone and tablet views.
    • Note: Depending on your screen resolution and the size of your browser window you may sometimes add an image which you have specifically chosen to align to the right or left only to see it appear as centred in the editor. This is because your WordPress editor width is narrow enough that the style sheet is interpreting it as a mobile phone view (on mobile phones all images end up on their own line and centered). Don’t worry about fixing it in the editor, so long as when you preview it acts as it should.

Sometimes you may find that want to change something about an image that you have previously added to your content. Perhaps you need to alter the alt text or add a caption.

In the WordPress editor containing the image you want to:

1. Click to select the image. An edit toolbar will appear.
2. If you want to change the image alignment, click one of the other alignment options in the toolbar.
3. To change other properties, click the pencil-shaped Edit icon in the toolbar.
4. In the Image details pop-up that appears, make whatever changes you want to make to the various text fields (Alternative Text, Caption, etc.).
5. If you want to edit the dimensions or cropping of the image, click the Edit Original button below the image preview and use the image editing tools there to do so.
6. When done, click the Update button to save your changes and see them reflected in the editor.

Note: On occasion, especially in panels, you may not see your changes to images immediately reflected. It’s possible this will resolve with further updates, but you may have greater success editing the image through the Add Media dialogue in the main editing WYSIWYG and then returning to the panel to re-add the edited image.

In the WordPress editor containing the image you want to remove:

1. Click to select the image.
2. In the toolbar that appears, click the X icon to remove the image.