Adding Images with Captions

 You can also upload an image and include a caption. This takes a few more steps. To make this easier, we have created a "Code Snippet" for you to use as a template.

First, find the "Images with Caption" code snippet.

Go to http://library.tulane.edu/code_snippets. You see the following page:

 

Now, select Images with Caption - edit

Then, in the Body section, click on the Source button.

Select all of the HTML code in the box.

Next, you will paste this code into the page where you want it. You'll then change the image path and caption for that page.

For example, you may want to add an image with caption to the top of your page. To do this, browse to the page, click Edit, then click the Source button to see the HTML. 

Paste the code from the code snippet page at the beginning of the code of the destination page.

Now click the Source button. First, select the image, then click on the image icon.

Browse to the image that you'd like to upload. See "Uploading Images" for the steps to upload an image. After selecting and sending the image. it will display in the Body field.

Now, replace the "Add Text" placeholder with the text for the caption.

Click the Save button. The page will look something like this:

The final step is to adjust the size of the bounding box to fit the uploaded image.

First, right click on the caption text. Then select Edit Div Container from the menu.

Then click Advanced.

In the Inline Styles field, enter a width parameter using the syntax "width:numberpx;" where number equals the width of the image.

 

Click Save. Your page should display like this example:

 

 

© 2010 Howard-Tilton Memorial Library, Tulane University  |  7001 Freret St., New Orleans, LA 70118  |  (504) 865-5605  |  Email Us