Template:FreedImg/sandbox

Template documentation[view] [edit] [history] [purge]

• Use this image container template to display CENTERED images.
• Resizes the container dynamically and provides additional image related features.
• When used to display an offset image, the surrounding text is broken into a new paragraph.

Usage

• Always please use the shortcut to FreedImg, {{FI}}, rather than the long template name.

{{FI
 | type         =
 | file         =
 | width        =
 | imgwidth     =
 | cclass       =
 | cstyle       =
 | float        =
 | margin-left  =
 | margin-right =
 | clear        =
 | caption      =
 | top-caption  =
 | tmleft       =
 | indent       =
 | tstyle       =
 | talign       =
 | alt          =
 | link         =
 | page         =
 | night-mode-invert  =
}}

For true inline usage, please see FreedImg/span, {{FIS}}, instead.

Parameters

For the Image itself

• mandatory file: File name (without the "File:" prefix).
  • optional alt: Image alt-text, ie. for mouse-over text box or for use with a screenreader for the visually impaired.
  • optional link: Override the default image link with an internal/external URL of your choosing (optional)
  • optional page: Select individual image page within a multi-page file (PDF/DJVU etc.; optional)
  • optional night-mode-invert: Set to true if the image should be inverted on night mode

    for example, set to true for a black line drawing on a transparent background

when the (type=user) is present & set

• Images generated by certain wikicode extensions (e.g. the default <math> User preference, <score>, etc.) may be entered in the named file parameter instead.

Primary DIV container

• width: The width of the primary container, by percentage (present, variable, default 100%)
• cclass: The class for the primary container, (present, variable, default floatnone [a null undefined classname just for placeholder purposes])
• cstyle: Any special overall styles to apply to primary container (default: no extra CSS).
• float: The alignment of the primary container (not present; must be added, options are "left" or "right"; otherwise remains centered).
• clear: The margin(s) of the primary container to be cleared (not present; must be added, options are "left", "right" or "both").
• margin-left, margin-right : Any special margins to be applied to the primary container (defaults appropriate for centered result).

Image element

• imgclass: extra CSS classes to add
• imgwidth: request this size of image from the server, rather than computing a guess. This can help to reduce file size, for example, when you know the image will be used in a narrow container. If width is given and uses px, you don't need to repeat it here. This value must be a pixel based value (em or percent based values are not supported for this parameter).

Image Caption

• caption: The bottom image caption (if present)
• top-caption: The top image caption (if present)
• tstyle, talign: Any special text style or alignment to apply to caption block (if present).
• tmleft, indent: Any special text-flow (e.g. hanging indent etc.) control to apply to caption (if present).

Styling via CSS

The following classes are applied, which can be targeted with work-specific CSS:

• The whole container: wst-freedimg (search for .wst-freedimg in CSS pages)
• The caption(s): wst-freedimg-caption (search for .wst-freedimg-caption in CSS pages)
  • The top caption: wst-freedimg-caption-top (search for .wst-freedimg-caption-top in CSS pages)
  • The top caption: wst-freedimg-caption-bottom (search for .wst-freedimg-caption-bottom in CSS pages)

Examples

Basic example: centred image

Example

{{FI
 | file         = Iceberg.jpg
 | width        = 20%
 | link         = w:Iceberg{{!}}Iceberg article at Wikipedia
 | alt          = WS Iceberg
 | top-caption  = An iceberg
 | caption      = Still an iceberg
}}

An iceberg

Still an iceberg

Musical score

Example

{{FI
 | type  = score
 | width = 50%
 | file  = <score>{ \clef bass \time 3/4 g,4 (b,4 [d4 f4 a4]) r4 \bar "|." }</score>
}}

Mathematical Equation

N.B. This only works if the user's Preferences are set to the default (i.e. Preference/Appearance/Math is "Always render PNG". Experimental choice "MathJax" causes any formulæ to be rendered entirely in text, completely bypassing any effect {{FreedImg}} may have.)

Example

{{FI
 | type  = math
 | width = 25%
 | file  = <math>sin x = {e^{ix} - e^{-ix} \over 2i} </math>
}}

$sinx={e^{ix}-e^{-ix} \over 2i}$

Page of a multipage document

Example

{{FI
 | file     = Character of Renaissance Architecture.djvu
 | width    = 20%
 | link     = Character of Renaissance Architecture
 | alt      = Plate III: Cvpola Di S Pietro
 | page     = 91
}}

Adding classes to the image (e.g. rotation)

{{FI | file = Iceberg.jpg | width = 20% | link = w:Iceberg{{!}}Iceberg article at Wikipedia | alt = WS Iceberg | imgclass = rot270 | caption = Gravity right }}			{{FI | file = Iceberg.jpg | width = 40% | link = w:Iceberg{{!}}Iceberg article at Wikipedia | alt = WS Iceberg | imgclass = rot90 | caption = Gravity left }}
Gravity right			Gravity left
	Gravity up
	{{FI | file = Iceberg.jpg | width = 40% | link = w:Iceberg{{!}}Iceberg article at Wikipedia | alt = WS Iceberg | imgclass = rot180 | caption = Gravity up }}

Extra CSS styles

Example

{{FI
 | file     = Iceberg.jpg
 | width    = 10%
 | imgstyle = outline: solid 3px blue;
 | caption  = An iceberg
 | tstyle   = background-color: yellow;color: #202122; font-family:serif;
 | cstyle   = border: dashed 1px red; padding: 10px;
}}

An iceberg

Missing images

If an image doesn't exist yet, you can use missing in the file parameter:

Example

{{FI
 | file     = missing
 | width    = 200px
 | caption  = The caption can be entered as usual
}}

An image should appear at this position in the text.

The caption can be entered as usual

Night mode inversion

Example

<div class="skin-theme-clientpref-night" style="background: #101418; color: #eaecf0;">
{{FreedImg
 | file = Decline and Fall, Waugh, 1928, frontispiece.svg
 | width = 512px
 | alt = <!--Alt text should go here.-->
 | caption = The Wedding was an Unparalleled Success among the Lower Orders.
 | night-mode-invert = false
}}
{{FreedImg
 | file = Decline and Fall, Waugh, 1928, frontispiece.svg
 | width = 512px
 | alt = <!--Alt text should go here.-->
 | caption = The Wedding was an Unparalleled Success among the Lower Orders.
 | night-mode-invert = true
}}
</div>

The Wedding was an Unparalleled Success among the Lower Orders.

The Wedding was an Unparalleled Success among the Lower Orders.

See also

• Template for offset images Template:FreedImg/span aka {{FIS}}

Floats an image/caption block.

Template parameters[Edit template data]

This template prefers block formatting of parameters.

Parameter		Description	Type	Status
type	type	Type of content Suggested values math score missing	String	suggested
file	file	filename of image to float.	String	optional
alt	alt	no description	Unknown	optional
link	link	no description	Unknown	optional
page	page	Page number to use when the filename is a multi page document (such as PDF/DJVU).	Number	optional
width	width	no description	Unknown	optional
cclass	cclass	no description	Unknown	optional
cstyle	cstyle	no description	Unknown	optional
float	float	no description	Unknown	optional
clear	clear	no description	Unknown	optional
margin-left	margin-left	no description	Unknown	optional
margin-right	margin-right	no description	Unknown	optional
imgclass	imgclass	no description	Unknown	optional
imgwidth	imgwidth	no description	Unknown	optional
caption	caption	no description	Unknown	optional
top-caption	top-caption	no description	Unknown	optional
tstyle	tstyle	no description	Unknown	optional
talign	talign	no description	Unknown	optional
tmleft	tmleft	no description	Unknown	optional
indent	indent	no description	Unknown	optional
night-mode-invert	night-mode-invert	Whether the image should be inverted for night mode Auto value false	Boolean	optional

The above documentation is transcluded from Template:FreedImg/doc. (edit | history)
Editors can experiment in this template's sandbox (edit | diff) and testcases (edit) pages.
Add categories to the /doc subpage. Subpages of this template.