About Cosmos Portal

FAQ: How Do I Create Image Captions?

November 13, 2009, 4:30 pm
Content Cover Image

Methods for placing images within an article.

As is often the case, there is more than one way to add captions to images. Here are a few:

  1. Simple insert image with caption in text body.
  2. Table image captioning.
  3. "Div" tags.

I don't really expect EoC Authors to deal with the more complex coding methods.

So, just add your images as you normally would without image-caption-boxes, using the CK-editor under "Body Text," using "Insert/Edit Image" to place images where you want them, and then the caption in a line-break or paragraph below the image.  (Leave the article in Pending status.)
Then, simply send me an e-mail letting me know you'd like image-caption boxes created around the images.
In your email, please be sure to tell me the title of the article, and copy the URL/Web-adress for the article.  I will take care of the rest, and let you know when the image caption boxes are done.

Having said that, I do encourage you to at least try the first method below.
Once you get the hang of it I believe you will find this is "doable."

1. Simple insert image with caption in text body.

Sample Image (Source: NASA.)Use the yellow "Insert/Edit Image" editor tool to insert the image at the location you want the image to dispaly. Integrate the image caption into the text surrounding the image, or place the caption in its own paragraph that begins with the word "Image Caption."

Image Caption: The resulting image will display as the image does here to the left. Note that this image is set to H-space (Horizontal) of "8" so that the text does not "bump-up" against the image.

2. Table image captioning.

2a. Create a table using the "Insert/Edit Table" editor tool,

Sample Image (Source: NASA.)
Sample image.

and set the table to have 1 column and 2 rows.
Then, insert your image into the top table row/cell,
and your caption in the bottom table row/cell.
This will result in no margin between the table
and text on either side of the table.

 

2b. In order to achive a margin on the text-side of the table, create the table and then click on "Source" in the editor tool-bar. Find the following code:

<table width="200" cellspacing="1" cellpadding="1" border="1" align="left">

Add to this the following:

style="margin-right: 8px;"

Resulting in:

<table width="200" cellspacing="1" cellpadding="1" border="1" align="left" style="margin-right: 8px;">

Note that if the image is right-aligned (align="right") then the margin must be set to "left" (style="margin-left: 8px;"). Also, blue shading added for emphasis.

Sample Image (Source: NASA.)
Image in table with
margin-right.

The image will display as does the image to the left.

Note that there is now a narrow margin between the left side of this sentence and the image.
   Also, note that the image caption in a table does not "wrap."
So, you must use a "line-break" to manually wrap the text.
To do this, simply use Shift-Enter (Win) or Shift-Return (Mac).
This results in the code <br /> being inserted in the source (hml) code.
 

2c. Centering an image: If the image is very wide, i.e. wider than about 300 pixels (px), then the image probably ought to be centered.
In this case, simply set the table to be centered, and do not add the margin setting.
A centered table does not allow text to "flow" on either side and thus no margin is needed.

Sample Image (Source: NASA.)
Note that there is no text on either side of this image.
This table is centered, which prevents text on either side.

 

3. "Div" Tags

Hint: Click on the "Source" button in the Article Body text editor, then use one of the sets of code below.  I understand this is fairly daunting for most, so, for now, feel free to contact me if this is beyond your skill-set.  (We will be making this more automated in the near future, but for now this is a manual process.)

If you want to give it a try, copy the codes in GREEN below, depending on if you want left, center or right, then substitute image file name.  For center image only, you must also adjust "margin: 10px 30px 10px 10px;" to fit the image your using.  Also, add your Figure text.  Yes, this is fairly involved, and so you are most likely best-off just creating your article normally, without image-caption boxes, and sending me an e-mail, so I can do the boxes for you...

Force Images (with caption) to Float Left or Right, or occupy the Center with no text either side:

  1. This works for full-width centered images:
    (Results in image-box approx 20px wider than image.  Max image-size = 580px. Note: for Max. size left & right are 1px.  Margin-right = 30px while left of math-center, visually appears centered +/-.
    This one is trickier... Add margin left and right so that border collapses to desired width relative to image.)

    <div style="border: 1px solid rgb(204, 204, 204); margin: 15px 1px; padding: 4px; background-color: rgb(251, 251, 251);">
    <p style="text-align: center;"><a href="" class="internal" title="" target="_blank"><img width="488" height="363" border="1" alt="" src="" /></a></p>
    <p style="margin: -6px 0px 5px; text-align: center; font-size: 1em;">Figure 1. description.</p>
    </div>
    <p style="clear: both;">Begin your next paragraph here to keep this text from floating back up beside above image.</p>

     
  2. Revised - This one works well for left-side images, but not full-width centered images:
    <!--Note add width to div, slightly bigger than image width, about 4px.-->
    <div style="border: 1px solid rgb(204, 204, 204); margin: 4px 15px 15px 0px; padding: 4px; width: 204px; float: left; background-color: rgb(251, 251, 251);">
    <p style="text-align: right;"><a href="" class="internal" title="" target="_blank"><img width="200" height="300" border="1" align="middle" alt="" src="" style="margin-right: 1px;" /></a></p>
    <p style="margin: -6px 3px 5px 3px; text-align: left; font-size: 1em;">Fig. 1. description.</p>
    </div>

     
  3. Revised - This works for right-side images, but not full-width centered images:
    <!--Note add width to div, slightly bigger than image width, about 4px.-->
    <div style="border: 1px solid rgb(204, 204, 204); margin: 4px 0px 15px 15px; padding: 4px; width: 204px; float: right; background-color: rgb(251, 251, 251);">
    <p style="text-align: right;"><a href="" class="internal" title="" target="_blank"><img width="200" height="208" border="1" align="middle" alt="" src="" style="margin-right: 1px;" /></a></p>
    <p style="margin: -6px 3px 5px 3px; text-align: left; font-size: 1em;">Figure 1. description. </p>
    </div>

See the Encyclopedia article "A sample Article" to see how images with image-caption-boxes display. (Opens is new window, so you can compare at-a-glance.)

If the mere sight of html code causes you panic, that's okay, really. In that case, send me an email and I will be happy to assist you with image captions.


For additional help with placing image captions under images,
please contact the Cosmos Portal Associate Editor, Matthew Wallace.

 

Glossary

Citation

Wallace, M. (2009). FAQ: How Do I Create Image Captions?. Retrieved from http://www.cosmosportal.org/view/article/136233

0 Comments

To add a comment, please Log In.