Criss Cross Image Styling » Captions, Frames and Image Alignment

Using images in your WordPress posts & pages without a little style is kind-of bland and boring. Thankfully, the Thesis framework, along with WordPress include a few design features to spruce up those otherwise plain-looking graphics & images.

There are four different image alignments included with the Thesis framework. These are: 1) Flush left » no text wrap 2) Centered 3) Left with text wrap 4) Right with text wrap.

Frames and captions can also be added to images by implementing a few simple classes within your HTML. This post covers each of these features.

Basic Image – Un-styled

Images with Caption »

Image with a Thesis styled caption. To implement this type of caption, simply use the code displayed below the image:

This is a special type of caption included with Thesis. Photo of my dog Sadie.

To create a caption like the one above, use this code:

<p class="caption">My awesome photo caption, woohoo!</p>

You can also use the WordPress image caption styles. This will create a frame around your image with the caption included inside the frame,  below the photo.

Image Frames »

To create a frame around your images without using a caption you can use the frame class within your image tags. Below is an image, center-aligned with a frame:

Right & Left Aligned »

Finally, images can be aligned to the right or left and wrapped with paragraph text. You can see examples of each alignment below:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.