Entry Post

Mapping Out WordPress Image Alignments

Post Content

We all know that image alignments in WordPress is far from being straightforward. There are plain images that will be wrapped in <p> tags, there are images with texts beside it, there are images wrapped in <figure> tags, and so on. Not to mention mistakes done in formatting the content – just look at the current WordPress Theme Unit Test Data wherein an image is wrapped in <strong> tag.

We’ll attempt to map out all the possible combinations of image alignments in WordPress. With the help of CodePen, we will demo the markup generated by WordPress.

First, here are the shapes and sizes of images that we will be using throughout the examples: square, landscape, and portrait images in the following sizes: small, medium, and large. Take a look at the example from CodePen:

See the Pen Image Specimen for WordPress Image Alignment Tests by Brian Dys Sahagun (@BrianSahagun) on CodePen.

WordPress Image Options

To try it, follow these steps (assuming you’re already signed in to WordPress Admin):

  1. Add a new post
  2. Add media
  3. Select an image
  4. Set options
  5. Insert into post

To be able to generate the different scenarios, here are the options available when inserting an image into the WordPress content:

General Settings

  • Title
  • Caption
  • Alt Text
  • Description

Attachment Display Settings

  • Alignment
  • Link To
  • Size

Among these options, the items that could affect appearance (layout and behavior with other elements) in particular are:

  • Caption – transforms the image into a figure element along with caption
  • Alignment – requires float property in CSS
  • Link To –¬†transforms the image into an¬†anchor element
  • Size – exhibits the most apparent effect on layout because of its visual size

Our first set of examples involve single images only (without any adjacent elements like text and other images) with only the sizes as the variables.

Single Image – Sizes

By default, the sizes available (depending on the image’s original size) are:

  1. Thumbnail
  2. Medium
  3. Full Size

See the Pen WordPress Image Alignments: Single Image – Sizes by Brian Dys Sahagun (@BrianSahagun) on CodePen.

We could note the following changes that WordPress apply on the images:

  • the image is wrapped in p tag
  • alignnone class name is added
  • size-thumbnail, size-medium, size-full class name are added depending on the size
  • wp-image-[image ID] class name is added

Enhancements

In this scenario, we could make the images responsive to the width of their container so that the whole image would be visible in the screen without much interaction (like scrolling horizontally).

img
{
max-width: 100%;
height: auto;
}
Comments

There are no comments.

Compose Comment