How To Integrate Photos Into Your Article

[EverythingEverywhere]

One of the things I get a lot of compliments on is how I use photography on my website. In addition to my daily photos, I also write rather long pieces with integrated photos. Here is one of my more recent examples:

Mungo National Park | Everything Everywhere Travel Blog

The format I use is something I developed over time. At first I just stuck large images up with little or no formatting. Here is an older article I wrote with no formatting:

My Afternoon At The Footy | Everything Everywhere Travel Blog

The second example looks like most blog posts. The problem is, the photos are so large, you lose the flow of the text, and they are not formatted to fit into the article.

The method I currently use is easy to do and has the benefit of making a normal blog post have more of a magazine layout and feel to it. It is very easy to do and can be used with most any blog theme.

1) Write the post. Do not think or worry about image placement.

2) All my images come from Flickr. This allows me to do several things: first, they pick up the bandwidth bill for the images. Second, all the images will be a consistent size, regardless of the size of the original. Finally, it is very easy to display a smaller image and have it link to a larger version of the image.

3) Each image is placed in an HTML table. The text wraps around the table and not the image. By placing the image in a table, I am able to put a border around the image, give it some horizontal and vertical spacing, and give the image a caption.

This is the HTML I use for the tables:

<table width="240" align="left" cellspacing="0" cellpadding="5" border="0" bgcolor="#FFFFFF" style="margin-left:5px;border:1px solid #555555;">
<tr>
<td align="center">

******Insert Flickr Link Here*******

</td>
</tr>

<tr>
<td align="center" valign="middle" style="font-family:verdana, arial, sans-serif;color:#000;font-size:10px;">
<!-- Put Caption Here --><!-- End Caption --></td>
</tr>
</table>

I go to Flickr, cut and paste the HTML to link a small size of a photo (width = 240) and add the caption. The only change to the HTML I make is changing the alignment of the table from "right" to "left" so I can alternate where the photos appear on the page.

4) I usually put an image before the start of the text, then preview what it will look like to see where I should put the next photo. I usually alternate sides with each photo. The main part of my blog is fixed width, so I get consistant formatting every time. I don't worry about having a photo exactly near the text which it referrs to. It isn't that big of a deal. Always put your best photo at the top where it will catch everyone's attention.


You can adapt the HTML I use for my photo tables by changing the background color, size, etc. I have a black background, so use a white table border. If your background is white, you may want a black border.

[Strongbow]

Great info thanks and that is a first class blog you have there also.

[ForgeWrite]

Nice post,

This is great because, tons of sites I read just say things like "put pictures in your blog". However, you actually have a methodology to implementing that technique.

Thank you so much!

[EverythingEverywhere]

The biggest thing I've found is using smaller photos if you are going to use multiple photos. I think the totally impact of multiple smaller images is better than having chunks of text broken up by big images.

Even if you are writing about something which does not lend itself to photography, I still think you are better off taking your own photos, even if it is just a snapshot of your computer or workspace, or something like that.

You can always tell a stock photo because on one in their right mind would take a photo like they and they look really cheesy. I think they take away from the personal nature of a blog.

[Bloggeries]

Great post and thanks for taking the time to share it.

[rhyswynne]

Nice idea. I used to do something similar. I now however use the Image Caption plugin. What this does is that it takes the alt tag text from the image as the caption. Why I prefer this is simple:

- It's CSS based, so degenerates well (plus if I want to make changes I only have to edit one file)
- It's quicker than fiddling around with tables
- It's more seo friendly as it reminds me to alt tag my images

I use it all the time on Retro Garden - Retro Gaming & Video Games Reviews, News and Features

However, you have to upload the images first, so you'd lose out on the benefits of flickr. So it probably wouldn't suit the OP's posters blog with photography. However, with screenshots like mine I think it's more worthwhile

[EverythingEverywhere]

I'm not sure that would work for me. I often use images for totally different things than I labeled them as.

I never use screenshots. That might be another post to write up.

[DirectoryMan]

Extremely useful. Thanks for sharing.

You give everyone something to strive for.

[rodaniel]

Another thing to keep in mind is that an image can help draw the reader down through a post - especially helpful if it's a longer article. So placing the image at a halfway point may sometimes be beneficial. Plus it keeps your posts from looking too "cookie cutter."

And I recommend always using both ALT and TITLE tags on all images.

[clipod]

i really love what you have done there................