The image above is a WordPress featured image for this post. By default, it will be aligned flush left with no text wrap, but you can select any alignment you like in your WordPress media gallery.
In addition to WordPress featured image support, Focus comes with 4 default image alignments:
- flush left with no text wrap (typically the default)
- centered
- left with text wrap
- right with text wrap
Here’s a flush left image with an inline caption:
Check out this cool caption style, which is built into Focus!
To add this nifty caption style to your post, simply switch to the text editor, and then wrap your caption text like so:
<p class="caption">Your caption text here.</p>
And here’s the same image from above with a default WordPress caption:
This image also has a caption that’s defined in the WordPress media gallery.
And this next image is centered (also note that text does not/should not wrap around centered images):
You can also add a frame to any of your images; here’s that last image—still centered—but with a frame:
Adding frames is easy, too. When editing your post, switch to the text editor, and then add a frame class to the image you want to frame:
<img class="aligncenter frame" src="your_image_url" alt="your image alt" />
This paragraph is here to show you how text will wrap around an image that is aligned to the left. Notice how the image is surrounded by whitespace to avoid any unsightly collisions between the text and the image.
Of course, you also need to see what a right-aligned image looks like. The text will wrap around this image at a safe distance to ensure easy reading.
Chris, I like your ‘cool caption style’ what’s the neatest (i.e smallest/fastest) way to set this as the default?
Rick, the fastest and easiest way to do this is to code it directly. It’s the simplest HTML structure possible:
I’m thinking of purchasing Thesis to re-design my blog and to create a website for my client. I’m confused, I thought we didn’t need code to use Thesis. Also, is there an option or plugin that allows for rotating images on the front page?
Thank you.
Hi Diane, you don’t need to supply your own code to run Thesis. However, if you want to do some fancier things with your text, you can add small embellishments (like the caption in my comment above) to your blog posts or pages.
The WordPress community at large does not consider “code” inside your posts to be added code (in fact, all your posts and pages are actually just HTML code). The visual editor supplies code for images, etc, so you won’t ever have to supply this stuff yourself. If you like, you can switch away from the visual editor and edit the existing HTML of your post or page, and in doing so, you can add some of the embellishments I’ve touched upon here.
As far as your second question about rotating images is concerned, there is no native functionality for this in Thesis, but you may be able to find a WordPress plugin that will suffice.
I am super new to blog building and do not know HTML although I am very computer fluent (thankfully). I see in your captions what looks to be HTML? How much of this is needed to use your tools, etc??
Hi Gayle, great question!
First, you do not need to know any HTML to create an awesome website with Thesis.
The caption code you see here is just a little bonus feature—I like to add special CSS styles to give you more presentation options than you would otherwise have.
Although this type of “code” can easily be added through the WordPress post editor, it is absolutely not necessary. It’s just nice to know it’s there if you need it!