Adding Pictures To Your Articles: How to Include Captioned Photos

Mike DockeryCorrespondent INovember 12, 2008

Saraswathi Sirigina wrote a great article a few months back on how to add various media types to your articles.

Although Saraswathi gave a simple, straightforward way to add photos, some Bleacher Creatures may want to take their articles to the next level, by adding additional pictures with captions. 

For example:

Bryant-Denny Stadium South End Zone Expansion

A preliminary sketch of Bryant-Denny Stadium following the expansion of the South End Zone.

Although the process is a bit more involved than just adding a simple photo, the result is worth the extra effort.

Here's the process. The first few steps are identical to Saraswathi Sirigina's method:

1. Sign on to an image-hosting website like Photobucket.


2. Upload your photos to that place.




3. After you complete uploading you find that that particular site provides the HTML code (it will be labelled as such) that you can insert into your article's HTM—below your uploaded photo in Photobucket is the HTML code that you can insert directly.


4. Now it gets interesting. You should click on the HTML button in your edit window. A new edit window will open, where you can edit the HTML directly. (HTML code is the code that tells the browser, such as Microsoft Explorer or Firefox, how to display your web page.) Now you need to insert some code. BEFORE the article text that you want the picture to go next to, insert the following HTML code:

Example Image

This is a sample caption. Insert your caption here.


5. Unless you want the sample picture and the sample caption, you're going to need to replace a few things. First, find the following in the above code:

Example Image


6. Now replace that with the HTML code that you got from Photobucket. That text will look similar to the above text, except it will be missing the width="90". It is very important that you add that back in, or else in some cases you will get extremely ugly results. So, the HTML you got from Photobucket will look somthing like:

Example Image

And you need to make it look something like:

Example Image

(Note the width="90%" is the only thing that changed. Don't change the rest of the code that you got from Photobucket—just add in the width="90%")


7. Next, you need to change the caption. Just replace the "This is a sample caption. Insert your caption here." in the code from step 4 with the caption you want.


8. Click the UPDATE button on the HTML window. You will have a small, right-aligned picture in your article, complete with caption!


Note: If you want the picture to be larger, or lined up on the left side of your article, you will need to change the code a bit. If you'd like an example, post a comment below, and I will provide the code you need.

If you have any questions or suggestions, feel free to comment below and I will do my best to answer them.