Your Best Foot Forward: A Picture's Worth A Thousand Words

Welcome to our special series on how to write a great blog post! Every other Thursday, we'll debut a new article that will teach you how to write posts for your blog that will engage and inspire your readers, encourage conversation in comments, and keep them coming back for more.   Put your best foot forward and watch your audience grow! Late to the party? Check out the other posts in our series here.

One option for a post is to summarize your weekend, vacation, party, etc. with a few photos with captions. Arranging your photos with short, descriptive captions can say more sometimes than a post with a thousand words.

Typepad gives you the tools to easily add captions and align images. I'm going to go over some tips for creating a post with images and captions and share my own version of the post, Weekend In Pictures, at the end.

Aligning Images Side By Side

You can organize the images in your post by aligning the images side by side. You'll need to know the width of your main content column to determine how best to size your photos to align side by side. If you are using the Theme Builder for your blog's design, go to Design > Theme Builder, check the main content column width and subtract 30px to account for the padding. For example, a 600px main content column width would allow for images which are 570px wide.

The design for Everything Typepad allows for images up to 550px wide, so to align two images side by side, the images need to be no more than 275px wide. To align 3 images side by side, each image will need to be less than 183px (rounding down) or the sum of the 3 widths should not exceed 550px.

For three vertical images, I'm going to place them side by side. After adding the first image to your post, double-click on the image to edit it. Select the option to float the first image to the left. Choose the Custom option for the width and enter the best width. In this case, I'm going to size the images at 181px wide. Due to the padding in the blog's design, an extra 2px needs to be subtracted. You may need to adjust your widths similarly to accommodate for padding or borders.

For the second image, place your cursor at the top right of the first image and click Insert Image. The settings for the second image will be the same as the first.

The third image will be the same width, and the alignment will not be set to float.

See the finished result below! The same principle applies if you are adding a different number of images. All of the images but the last one will be set to float left and only the last image uses a general alignment.

Adding Captions

You can easily and quickly add a caption to any image. After inserting the image in your post, double-click on the image in Rich Text mode. The Edit Image pop-up box will open. Enter the text in the Caption field and click Update Image.

 

 

The Description field is also available, but the text in the Description field will not display on your blog, only when you hover your mouse over the image.

We hope you will use this tip to inspire you to create your own photo post. Please click Read on below to see my post and submit a link to your own post in the comments.

Weekend In Pictures: The Garden

The roof repair in progress, garden, & pretty clouds.

Giant green tomatoes!

Sunflowers in bloom.

Colorful peppers.

Orange sunflower peeking from behind the wildflowers.

Thor tired after a day outside.

Comments

[Naomi]

Hi, really useful post and cute pictures. I'm trying to follow your instructions but struggling to find out what the main column width is for my blog. I'm using the 'Clean' layout with 3 columns. Can't find a pixel count anywhere, or a reference to 'Theme builder'. Any suggestions?

[Jen]

Hi Naomi! It looks like the main content column width for your blog is 570px with 20px of padding. The main content column will allow for images up to 550px wide. Let us know if you have problems.