Template:Class figure/doc

This template is for formatting figures within books (ie. block images with captions). It is meant to be used alongside CSS classes. How figures are formatted typically differs from book to book, but are fairly consistent within a given book, making it a good application for this.

There are two versions: {{class figure}}, and {{class figure/inline}} for versions that generates a span rather than a div to be used when the figure appears mid-paragraph.

Parameters

The basic usage is:

{{class figure
 |num     = 
 |image   = 
 |caption = 
}}

Many books number their figures "Fig. 1", "Fig. 2", etc, and then refer to them in the text. |num=n creates:

1. a prefix in the caption labeling it as "Fig. $n$"
2. an anchor "Fig.$n$" so the figure can be linked to

The template's full parameters are:

Template parameters

Parameter		Description	Type	Status
image	image	image file, no brackets, 'File:' prefix, or size Default {{missing image}}	String	suggested
image size	image-size	hardcoded image size	String	optional
image alt	image-alt	alt for image	String	optional
figure number	num	If the figures are numbered, the number of this figure. Creates an anchor named 'Fig.<num>'.	String	optional
caption	caption	Caption for the figure	String	optional
caption2	caption2	Secondary caption	String	optional
key	key	Key explaining diagram	String	optional
float	float	figure float to side Suggested values left right	String	optional
anchor	anchor	anchor without 'Fig. n' label	String	optional
additional classes	class	Additional classes you wish to apply (for example, if the book has 2 types of figures and each has different formatting).	String	optional
style	style	CSS style	String	optional

CSS

You can target the output of this template with the CSS:

• .wst-figure-wrapper (search for .wst-figure-wrapper in CSS files)
  • .wst-figure-image (search for .wst-figure-image in CSS files)
  • .wst-figure-caption (search for .wst-figure-caption in CSS files)
    • .wst-figure-number (search for .wst-figure-number in CSS files)
      • .wst-figure-number-separator (search for .wst-figure-number-separator in CSS files)
  • .wst-figure-caption2 (search for .wst-figure-caption2 in CSS files)
  • .wst-figure-key (search for .wst-figure-key in CSS files)

Usage

Example

{{class figure
 |num= 1
 |image= JapanHomes001 A VIEW IN TOKIO, SHOWING SHOPS AND HOUSES (COPIED FROM A PHOTOGRAPH).jpg
 |caption= A View in Tokio, showing Shops and Houses. (Copied from a Photograph.)
}}

Fig. 1.A View in Tokio, showing Shops and Houses. (Copied from a Photograph.)

Without an image, it will automatically display {{missing image}}

Example

{{class figure
 |caption= Ovals Showing the Actual Sizes of Eyes According to Table II.
}}

Image missing

Ovals Showing the Actual Sizes of Eyes According to Table II.

Example

{{class figure
 |image= Page_041_(The_Art_of_Distillation,_1651).jpg
 |caption= This is the form of a common cold Still.
}}

This is the form of a common cold Still.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {{class figure/inline
 |float= right
 |num= 2
}} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Image missingFig. 2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.