≡ Menu

Thesis Skin Image and Caption Styles

KK and CP

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, every Thesis Skin 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 a new Thesis-style caption:

Chris Pearson speaking at Affiliate Summit Central 2012

Check out this cool caption style, which is built into your Thesis Skin.

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:

Chris Pearson speaking at Affiliate Summit Central 2012

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):

Chris Pearson speaking in 2010

You can also add a frame to any of your images; here’s that last image—still centered—but with a frame:

Chris Pearson speaking in 2010

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" />

DIYthemes logo (tall)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.

DIYthemes logo (black)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.

{ 2 comments… add one }

  • Rick Lomas February 27, 2014, 5:48 am

    Chris, I like your ‘cool caption style’ what’s the neatest (i.e smallest/fastest) way to set this as the default?

    • Chris Pearson February 27, 2014, 9:59 am

      Rick, the fastest and easiest way to do this is to code it directly. It’s the simplest HTML structure possible:

      <p class="caption">This is my caption. It will be pulled up close to whatever sits above it, so in theory, you could caption anything.</p>

Leave a Comment