Unfrustrate Your Image Formatting with the WordPress Text Editor

Ostriches

We’ll be looking at some useful ways to display images on the page that you simply can’t get with the Visual editor alone.

Today we’re following up on a post from a few months ago detailing the differences between WordPress’s Visual and Text editors.

As that post discussed, the Text editor gives you a lot of important, helpful control over the presentation of your WordPress posts and pages.

The post also detailed a lot of ways in which the Visual editor is limited, but it bears repeating: There are a lot of common needs you simply can’t meet with the Visual editor. If you don’t know that, you can end up searching in vain for functionality WordPress doesn’t have, or casting about for solutions among a slew of badly-built formatting plugins, either of which can be cause for a lot of frustration.

This time around, we’ll be looking at the real answer to that frustration: styling with CSS and the Text editor. We’ll be discussing a common source of complexity—images—and going through a few examples of Text editor-only image formatting: useful, commonly needed ways to display images on the page that you simply can’t get with the Visual editor alone.

In particular, we’ll be finding ways to format this picture of an ostrich, because oh my goodness:

ostrich

Getting Started

To follow through the examples below, you’ll need two things:

  1. A post you’re editing, opened to the “Text” tab
  2. Some way to edit CSS, either a “custom CSS” plugin or a child theme

If the CSS piece of this confuses you, install the plugin we linked to, and follow the instructions provided by the plugin to paste the CSS code snippets we provide below into the new “Custom CSS” page in your WordPress admin area. They should work.

Center-Display a Set of Images

Sometimes, all you need is four centered ostriches, perhaps of varying sizes:

ostrichostrichostrichostrich

WordPress has no good default way to display images side-by-side: Its “gallery” functionality is too limited to be much use—it only shows thumbnail sizes of images, which are by default 150px-by-150px squares, and the “Alignment: Center” option in “Add Media” simply adds the aligncenter class to the image, centering the image but also preventing anything from appearing next to it with aligncenter‘s float: none and display:block properties.

A number of decent gallery plugins exist that can give you centered gallery-style displays, but those can be both too difficult to set up and overkill for many needs, including (I’d argue) ours. The easiest thing is to get into your Text editor and CSS file, and produce something like the following:

CSS

.centered-image-holder {
text-align: center;
}

.centered-image-holder img {
display:inline-block;
vertical-align: top; /* Unequal-height images line up along top; "middle", "bottom" also OK */
/* Optional to give images a border and a bit of separation: */
border: 1px #333 solid;
margin: 0 2px;
}

HTML in Text Editor

<div class="centered-image-holder">
<img class="wp-image-4770 size-medium" src="https://wpshout.com/media/2013/11/ostrich-200x300.jpg" style="width: 150px;" alt="ostrich" />
<img class="wp-image-4770 size-medium" src="https://wpshout.com/media/2013/11/ostrich-200x300.jpg" alt="ostrich" />
<img class="wp-image-4770 size-medium" src="https://wpshout.com/media/2013/11/ostrich-200x300.jpg" style="width: 100px;" alt="ostrich" />
<img class="wp-image-4770 size-medium" src="https://wpshout.com/media/2013/11/ostrich-200x300.jpg" alt="ostrich" />
</div>

Discussion

The <div> element wraps all four images. Its text-align: center property, plus the display: inline-block property applied to the images themselves, causes those images to center themselves on the page. At smaller page widths, the images will break into multiple columns, remaining centered.

To state the obvious: the CSS is reusable, so you’ll only have to do that part once. After that, you can wrap any set of images in a <div> with class centered-image-holder and you’ll get the same effect.

Manually Set Percentage Widths

Sometimes, all you need is an ostrich who takes up precisely one-fourth of the page width, no matter what device you’re on:

ostrich

As you saw in our last example, we manually set image widths on two images with style="width: ###px". As of WordPress 3.9, the Visual editor now lets you do this sort of manual, pixel-based resizing using a “dragging-corners” interface like in Microsoft Word.

However, you still can’t do something that is becoming more useful all the time as people use more and more types of devices: set percentage-based widths.

This is really easy in CSS and the Text editor.

CSS

img.one-fourth-wide {
width: 25%;
}

HTML in Text Editor

<img class="wp-image-4770 size-medium aligncenter one-fourth-wide" src="https://wpshout.com/media/2013/11/ostrich-200x300.jpg" alt="ostrich" />

Discussion

This is simply adding a class (“one-fourth-wide”) to the image. That class makes the image 25% as wide as the container it’s in, which in this case is the main post content container. You’ll also want to remove WordPress’s default manual width and height markers (which, in this case, looked like width="200" height="300" before they were removed).

ostrichNote that this is compatible with any other layout choice you’d make, like if you want to have a tiny ostrich (which gets tinier as screens do) at the right of a paragraph.

Give a Specific Image Custom Borders, Border Radii, Box-Shadows, etc.

Sometimes, all you need is an ostrich who is garishly decorated:

ostrich

The Visual editor doesn’t let you define HTML properties, meaning you’re pretty much stuck with your theme’s default on everything from image borders to image padding. But there are plenty of times when you might want to override these defaults—including if your design sense is 404ing and you want to do something like the above. If so, it’s easy:

CSS

img.garish {
outline: 0;
border: 7px #6f6 dashed;
box-shadow: 20px 10px 5px #ccc;
border-radius: 10%;
}

HTML in Text Editor

<img class="wp-image-4770 size-medium aligncenter garish" src="https://wpshout.com/media/2013/11/ostrich-200x300.jpg" alt="ostrich" />

Discussion

This is simply declaring properties that should apply to img elements of class garish in our CSS stylesheet, then adding that class to our actual HTML img element.

In Conclusion…

Ostriches are gentle, quizzical creatures who deserve our respect and—yes—perhaps even our love.

As you can see, the Text editor, plus some very light CSS, gives you a lot of control over image formatting that you just wouldn’t have otherwise. So I hope I’ve convinced you to give learning the Text editor a try, and to turn to it when you’re stuck.

I also hope I’ve convinced you that ostriches are gentle, quizzical creatures who deserve our respect and—yes—perhaps even our love.

Questions or comments on either point? We’d love to hear from you!


5 Responses

Comments

  • Hi,
    Thanks for this…but it didn’t help me at all. My problem is lining them up so the images look half decent on the page without using the gallery from wordpress…this way it’s fast and easier to just drag and drop the pictures in…but??
    I’m linking my page in case you have a comment that could help me.
    http://insightvision.eyewearinsight.com/spring-runway-report-sunglasseseyeglasses-2016/

    • fredclaymeyer says:

      Hi,

      Drag-and-drop image formatting is a very difficult problem in general, and WordPress hasn’t solved it. As the post says, “WordPress has no good default way to display images side-by-side.”

      You may want to look up a better gallery plugin – there are quite a few out there. I’m guessing you’re going either for a “grid” or “Pinterest”/waterfall-type layout, both of which are commonly handled.

      Failing that, I’d be happy to help you with your site itself, but it’ll be more of a “developer”-type fix than a “user”-type fix.

      Thanks!

Pingbacks