View source for Template:Class figure/doc

{{documentation subpage}}
{{templatestyles|Template:Class figure/styles.css}}
{{Lua|Module:Class figure}}

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: {{tl|class figure}}, and {{tl|class figure/inline}} for versions that generates a <code>span</code> rather than a <code>div</code> to be used when the figure appears mid-paragraph.

==Parameters==
The basic usage is:

<syntaxhighlight lang="wikitext" style="overflow: auto">
{{class figure
 |num     = 
 |image   = 
 |caption = 
}}
</syntaxhighlight>

Many books number their figures "Fig. 1", "Fig. 2", etc, and then refer to them in the text. {{para|num|n}} creates:
# a prefix in the caption labeling it as "Fig. <math>n</math>"
# an anchor "Fig.<math>n</math>" so the figure can be linked to

<templatedata>
{
    "description": "The template's full parameters are:",
	"params": {
		"image": {
			"label": "image",
			"description": "image file, no brackets, 'File:' prefix, or size",
			"type": "string",
			"required": false,
			"suggested": true,
			"default": "{{missing image}}"
		},
		"image-size": {
			"label": "image size",
			"description": "hardcoded image size",
			"type": "string",
			"required": false
		},
		"image-alt": {
			"label": "image alt",
			"description": "alt for image",
			"type": "string",
			"required": false
		},
		"num": {
			"label": "figure number",
			"description": "If the figures are numbered, the number of this figure. Creates an anchor named 'Fig.<num>'.",
			"type": "string",
			"required": false
		},
		"caption": {
			"label": "caption",
			"description": "Caption for the figure",
			"type": "string",
			"required": false
		},
		"caption2": {
			"label": "caption2",
			"description": "Secondary caption",
			"type": "string",
			"required": false
		},
		"key": {
			"label": "key",
			"description": "Key explaining diagram",
			"type": "string",
			"required": false
		},
		"float": {
			"label": "float",
			"description": "figure float to side",
			"type": "string",
			"required": false,
			"suggestedvalues": [
				"left",
				"right"
			]
		},
		"anchor": {
			"label": "anchor",
			"description": "anchor without 'Fig. n' label",
			"type": "string",
			"required": false
		},
		"class": {
			"label": "additional classes",
			"description": "Additional classes you wish to apply (for example, if the book has 2 types of figures and each has different formatting).",
			"type": "string",
			"required": false
		},
		"style": {
			"label": "style",
			"description": "CSS style",
			"type": "string",
			"required": false
		}
	}
}
</templatedata>

==CSS==
You can target the output of this template with the CSS:
{{tree list}}
* {{CSS|.wst-figure-wrapper}} ({{search/css|.wst-figure-wrapper}})
** {{CSS|.wst-figure-image}} ({{search/css|.wst-figure-image}})
** {{CSS|.wst-figure-caption}} ({{search/css|.wst-figure-caption}})
*** {{CSS|.wst-figure-number}} ({{search/css|.wst-figure-number}})
**** {{CSS|.wst-figure-number-separator}} ({{search/css|.wst-figure-number-separator}})
*** {{CSS|.wst-figure-missing-image}} ({{search/css|.wst-figure-missing-image}})
** {{CSS|.wst-figure-caption2}} ({{search/css|.wst-figure-caption2}})
** {{CSS|.wst-figure-key}} ({{search/css|.wst-figure-key}})
{{tree list/end}}

==Usage==
{{doc example|{{demo|<nowiki>{{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.)
}}</nowiki>}}}}

Without an image, it will automatically display {{tlx|missing image}}
{{doc example|{{demo|<nowiki>{{class figure
 |caption= Ovals Showing the Actual Sizes of Eyes According to Table II.
}}</nowiki>}}}}

{{doc example|{{demo|<nowiki>{{class figure
 |image= Page_041_(The_Art_of_Distillation,_1651).jpg
 |caption= This is the form of a common cold Still.
}}</nowiki>}}}}

{{doc example|{{demo|<nowiki>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.</nowiki>}}
{{clear}}
}}

<includeonly>
[[Category:Templates applying classes for page styles]]
[[Category:Image templates]]
</includeonly>