Adding captions to your images

Image with caption exampleYou can turn the “Alternate Text” of your images into formatted captions by using a snippet of html code known as the “hascaption” class.

Add the image to your web page. On the “Basic” tab, make sure that the “Alternate Text” field text is complete with text you want to display as your image caption.

On the “Advanced” tab, set the alignment, but do not add any horizontal padding.

Once the image is inserted, select the "HTML" button in the WYSIWYG editor.

Depending on your page, there might be quite a bit of code. You are looking for an image tag, which begins with <img (If there is a lot of code, use the control+f keyboard shortcut on a PC or command+f on a Mac to search through the code.)

In this example, the code would look like this:

<img alt="Adult Kudzu Bug" src="/extension/kudzubugs/images/adult_kudzu_bug200x235.jpg" height="235" width="200" align="right" />

The “Alternate Text” you entered appears in quotation marks. You want to insert the code snippet class="hascaption" after the “Alternate Text” and before the file source information, which begins withe src=”

<img alt="Adult Kudzu Bug" class="hascaption" src="/extension/kudzubugs/images/adult_kudzu_bug200x235.jpg" height="235" width="200" align="right" />

Once you have inserted the “hascaption” class make sure to hit “Submit” to make the changes. You should now see the caption under your image.