Images in Your Post or Page

In a previous post, I wrote about the text of a post and outlined some best practices. Now it’s time to add pictures!

The Idea

Visuals with color add impact to your post. Humans love pictures, as the entire Web and especially Instagram can attest, so pictures are good for getting your posts read, too. Also, images can be useful for teaching, as this post itself illustrates.

The main concepts to keep in mind for images are relevance and consistency.

Relevance

Not much point in using a cute pic of a puppy for an article on how to fix your washing machine.

You can get metaphorical, but just take care that the symbolism still speaks clearly to the energy of your subject. A friend of mine used a picture of three horses running through the surf to illustrate an inspirational post for three things she wanted her readers to get going on. That works, too.

Consistency

Consistency doesn’t mean you can only use graphics or only photos, just that the pictures should be consistently sized in the same post and among posts, and for pages consistently sized and themed throughout the site.

I have a theme of “the field of design” on my site, so I use photos of plants in the natural world from my garden and town to illustrate the theme.

And sizing doesn’t have to be rigid. Not all images are meant to be square, for example, but it’s a good idea to have them be close to the same size.

Images Inside Your Post or Page

One to three is my go-to range for enhancement images in a post. You’ll see more in my how-to posts, but that’s just because they are part of the instruction sequence.

I always have one image that speaks to the overall subject of the post or page at the top under the page title, unless my theme is designed, as this one is, to display a magnified featured image behind the post or page title. Then I don’t use an initial image in the post itself. More about featured images in a future post.

To put an image inside your post or page:

• Click on the + symbol at the top or bottom of a paragraph where you want the image to go (although you can put it anywhere and use the block arrows on the left of any block to move it up and down). A popup will appear and you’ll see “image” as an option. Then a new block will appear with options to look in your media library for an image or upload one right here inside your post editor.
• Click on Media Library if you know or guess that you have a picture already, and WordPress will show you your images. After you select it, it will appear in your post, and you can move it or adjust size using the settings in the right sidebar.
• Or, you can upload a picture from your computer. Two ways to do that: 1) Click on the Upload option and select from the window that appears, or 2) just go to your file explorer/finder window and drag the image file over to the block. When it turns blue, let go, and the image will be placed in your post or page and added to your media library at the same time (neat!).
• You can also just put in a URL (website address) using the Insert from URL option. Useful if you are taking the image from another site, perhaps, and you want to give credit and provide an instant link to the site.

Image Size and Other Settings

After your image is loaded up, you should already see the block settings in the right sidebar of your post or page in editing mode. If you don’t see the sidebar, just click on the gear symbol at the top of the screen next to the Publish button, and it should appear.

• Alt Text—I’m hearing from my sources that it’s a good idea to put some descriptive terms here. For one thing, it does make it easier for visually impaired people to know what the image is about. Google’s search engine also likes your post better if you include this information.
• Image Size/Image Dimensions—Here you can change the display size of the image (the actual size of the file will stay the same). You can use the standard sizes that are in your WordPress settings (those are the thumbnail, medium, and large ones in the dropdown), or you can start with full size and make it smaller by a percentage. You can also just play with the numbers in the Width and Height boxes, but the picture will get stretched or compacted on one dimension if you change the proportions.
• Link Settings—Your image is a file with a URL (website address), so you have options to either have no link, link to just a separate window with the picture in it, or enter a custom URL to go to a different post or page or other place on the Web. I usually leave the link at None unless I have a specific place I want to send the viewer to.
• Advanced—For the serious geeks who want to put specific styling code in.

Image Alignment

You can also control the alignment of your image and therefore where the text goes around it. The image next to this text is left-aligned, and the text is automatically designed to wrap around it like this. If you chose right-align from the icons in the top left of the image block, the text would start on the left of the image. Most of the time, I favor larger images that are centered, but it depends on the subject of my post.

The gap below the image is to provide room for a caption, which you can click on and then type. The caption will travel with the picture if you move it. Notice that the options in the top left when you are typing text will reflect a paragraph block. To control the image, you need to click directly on it.

You can also do more detailed editing of the image itself by choosing the pencil icon in the image option bar. That will take you to your media library where you can choose to edit the image directly. You’ll be able to crop the image or change its size so that the changes apply to all displays of the image on your site.

You can, of course, just plop your images in and use whatever default settings show up, but your post will be much more appealing if you take into account relevance and consistency to make your images a beautiful and useful contribution to your writing.

I’ve made a PDF of this tutorial for you to download if you would like to. You can get it here.

And if you have any specific questions or would like to go through a tutorial with me, just contact me.