Adding a border around some WordPress blog images

Last Reviewed: 6th March, 2016


Problem Background

I wanted to improve the readability of my WordPress posts by placing a border around some images that had a white background. Without a border it was difficult to tell what was text and what was part of the image.

To show the problem, here is an example from a recent blog post. The text starting from “You should now click” was part of my post, but the text above it was part of an image.Image showing poor readability

Possible Solutions

One way to solve the problem would have been to edit the cascading style sheet (CSS) for my blog and add a new class. I didn’t want to do this because I wanted to use the default theme (e.g. Songwriter) as much as possible and have clear documentation about any modifications that I made.

Another way to solve the problem would have been to edit the <img> HTML tag associated with a particular image and add the border that way. I might use this if I need a custom border type for one or two images but I didn’t like the thought of doing this for a commonly reoccurring problem.

In the spirit of WordPress, I decided to utilise the WP Image Borders plugin. The plugin description says that it makes it easy to add or remove image borders from pictures in your blog posts. This sounded perfect.

Environment

  • WordPress version 4.4.2
  • WP Image Borders Plugin version 2.02

Configuring the plugin

The WP Image Borders plugin has a single settings window in which you can perform your customisations.

In this example, I specified that a custom .border-image CSS class will be added to the <img> element.

02 Additional CSS classes
Note: The CSS class must be preceded with a dot.

I configured the plugin to add a thin border around my images.

03 Customise image borders

I only wanted the border to apply to selected images so I made sure that “Add borders to all images in blog posts” setting was left unchecked.

04 Add borders to all images

Using the plugin

Within my blog post, I selected the image to which I wanted to add a border, and clicked on the “Edit” button.

05 Editing the image

In this example, I specified the “border-image” class within the “Image CSS Class” field.

06 Specify image CSS class

Note: Do not use a dot when specifying the Image CSS Class.

The results

The image now had a border around it making the post a bit more readable.

07 Image showing better readability

Additional notes

  1. The WP Image Borders plugin only allows you to define a single image border style for your entire blog site. Unfortunately it can’t be used to define multiple styles.
  2. The border around the image will not be shown when you are editing your post. It will appear when you try to preview it.
  3. If you like to edit HTML by hand, then the <img> tag will look something like the following:
<img class="border-image alignnone wp-image-13 size-full" src="Logo.png" alt="Company Logo" width="678" height="680" />

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.