Traditional forms of media like books, magazines and journals have long presented illustrations and graphics in conjunction with a caption or reference underneath. Now web designers can adopt a similar writing style, by making use of the new <figure> and <figcaption> tags. These new tags are designed to represent a unit of content. As well as aiding consistent styling in a page, they also clearly denote the locations of illustrations, diagrams, charts and photographs to search engines.

The Figure stack uses these new tags and enables you to easily place an image and attractive caption within a page. You can use an unlimited number of Figure stacks on the same page. Settings exist to draw a styled border and padding around your image. You can also use built-in settings to customise the figure caption font size, font style and padding.
 

Example

Setup

1. After installation, drag and drop a Figure stack into your page. It can either standalone or be nested within another stack, like a grid or columns stack.
2. Drag and drop an image into the image placeholder.
3. Change the caption text below the image to suit. Basic HTML and links are permitted.

Important! The Figure stack should only be used with RapidWeaver themes with an HTML5 Doctype, such as the premium themes available from ThemeFlood. Using HTML5 code in XHTML documents can cause problems. You can check the Doctype of your RapidWeaver theme by viewing the source code - the Doctype is nearly always printed right at the top. If in doubt, contact the theme developer for more help.

Source Code

This is the source code used to create each Figure stack.

<figure style="border:1px solid #cdcdcd;">
<img src="http://www.example.com/path/to/image.jpg" alt="My picture">
<figcaption>The quick brown fox jumped over the lazy dog</figcaption>
</figure>

In the above code, change the URL http://www.example.com/path/to/image.jpg to the name and location of your stored image. The ALT attribute can and figure captions can also be changed.

This code can be saved as code snippets in RapidWeaver, for use in non-stack pages. To do this, highlight the code in your web browser and then right-click on it. Select Copy from the popup menu, to save it to your clipboard. In RapidWeaver, open the snippets window by clicking View > Show Snippets from the RapidWeaver menu. In the snippets window, click the '+' button, in the bottom left. Type a name for the new snippet and paste the code into the box shown. From this point onwards, you will be able to easily retrieve code snippets in RapidWeaver and reuse them in different pages. You can customise the code to suit your requirements.