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:
Getting Started
To follow through the examples below, you’ll need two things:
- A post you’re editing, opened to the “Text” tab
- 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:
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://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2024/04/1_ostrich-200x300.jpg" style="width: 150px;" alt="ostrich" />
<img class="wp-image-4770 size-medium" src="https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2024/04/1_ostrich-200x300.jpg" alt="ostrich" />
<img class="wp-image-4770 size-medium" src="https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2024/04/1_ostrich-200x300.jpg" style="width: 100px;" alt="ostrich" />
<img class="wp-image-4770 size-medium" src="https://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2024/04/1_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:
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://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2024/04/1_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).
Give a Specific Image Custom Borders, Border Radii, Box-Shadows, etc.
Sometimes, all you need is an ostrich who is garishly decorated:
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://iotvnaw69daj.i.optimole.com/cb:mLvy.66914/w:auto/h:auto/q:90/f:best/https://wpshout.com/wp-content/uploads/2024/04/1_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!
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!
Thank you for your reply. I will do that!
[…] suggest two pieces of related reading: this article on the WordPress text editor itself, and this one on using the Text editor to format […]
[…] This is why I’ve advocated for a solid understanding of the Text editor—particularly for images and other elaborately formatted pieces of […]