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 Markup your images the proper way.
<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.
- 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.
- Drag and drop an image into the image placeholder.
- Change the caption text below the image to suit. Basic HTML and links are permitted.
Source CodeThis 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.