How to Work with Images in WordPress

By Michelle Renee Morales|April 17, 2017|Tech Tip|

This tutorial gives tips on how to work with images. To begin, log into your site’s dashboard, create a new post, and add an image to it. If you are having difficulty with this step see our post on How to Add Media. You should now see a post with an image displayed, like so:

Tech tip logo image in text box

If you click on the image, you can set the image’s alignment and text wrapping settings. The following alignment settings are available: Align Left, Align Center, Align Right, and No Alignment. So for example, if you wish to center your image you would click on the image and then click on the Align Center icon. If you are interested in image settings beyond alignment, you can click on the pencil icon, which allows you to set/edit more details about the image. For example, here is the Image Details box that appears when you click the pencil:

Image details box

In this window, you can edit or replace the original image. You can choose the image size in the Size drop-down menu. Under Link To, you can have the image link out to another page. You can also write the image’s caption or set other Advanced Options. However, if you are still having trouble with the image and can’t seem to get it just right, I’d suggest switching from the Visual editor tab to the Text editor tab. These tabs are shown on the upper right-hand side of the blog post’s text box.  Although this view can be slightly confusing to HTML novices, don’t be afraid to switch to the Text editor tab. In the Text editor, you see the HTML of your post. This editor is great because it offers more flexibility than the Visual editor. When we switch over the Text editor tab we see how the image is represented in HTML. So the image above is:

 

HTML of image in Text Editor

All images are marked with the HTML <img> tag. In this example, it is followed by the following attributes: class, src,  alt, width, and height. The src attribute identifies an image by a URL. The alt attribute specifies an alternate text for an image. The alt tag is especially important for accessibility reasons. Here are some tips to keep in mind when determining the alt text:

  • The text should describe the image if the image contains information
  • The text should explain where the link goes if the image is inside an <a> element
  • If the image is decoration, for example, a border, use alt=””

In the Text editor, you can also set the width and height tags, which determine the width/height of the image in pixels. In addition to these tags, other possible attributes include align and border, which set the image alignment and allow you to add a border to any image. For those of you acting as an administrator to your site, here is a great post with tips on useful image plugins. For more tech support from the Futures Initiative web developers, please contact [email protected]

 

Share this Post: