Permanently protected template

Template:FreedImg

From Wikisource
(Redirected from Template:FI)
Jump to navigation Jump to search
Documentation icon 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        =
 | cclass       =
 | cstyle       =
 | float        =
 | margin-left  =
 | margin-right =
 | clear        =
 | caption      =
 | tmleft       =
 | indent       =
 | tstyle       =
 | talign       =
 | alt          =
 | link         =
 | page         =
}}

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)
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.
Parameters by code inspection as at 15th Dec. 2014 revision:
{{FI parameter alternate name default value notes }}
cclass floatnone
width 100%
margin-right auto
margin-left auto
float «none»
clear «none»
cstyle «none» Trailing semicolon always added if cstyle specified.
type «none»
  • user:
  • score:
  • math:
  • «none»:
file
Smiley saying oops.png
if type ∈ {user,score,math}
N.B. file is optional (FIS feature only!)
height «none» (FIS feature only!) If specified image clipping also enabled (i.e. really effectively maximum height)
link «none» Only effective when type is «none»
alt «none» Only effective when type is «none»
page «none» Only effective when type is «none»
imgclass «none» Only effective when type is «none»; when present this CSS class is applied in addition to "freedImg" to <img>
imgstyle «none» Trailing semicolon always added if cstyle specified.
caption «none»
tdisplay block Only applied if caption present.
sdisplay inline-block Only applied if caption present. There appears to be an anomaly with the rendering engine of (at least) FireFox 34.0 affecting the inheritance of container widths. Other browsers tested as working acceptably using defaults; but F/F may need this parameter to be overridden (both "inline" and "block" work. See [[../testcases/]].
talign center Only applied if caption present.
tstyle «none» Only applied if caption present; when tstyle is also present a trailing semicolon is always added.
tmright 0.00em Only applied if caption present.
tmleft 0.00em Only applied if caption present.
indent 0.00em Only applied if caption present.


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 (often rotations)
  • imgstyle: extra CSS styling to add to the image (e.g. borders)
Image Caption
  • caption: The image caption (not present; must be added).
  • 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).

Examples

Basic example: centred image

{{FI
 | file     = Iceberg.jpg
 | width    = 20%
 | link     = w:Iceberg{{!}}Iceberg article at Wikipedia
 | alt      = WS Iceberg
}}

WS Iceberg

Musical score

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

{ \clef bass \time 3/4 g,4 (b,4 [d4 f4 a4]) r4 \bar "|." }

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.)

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

Page of a multipage document

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

Plate III: Cvpola Di S Pietro

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
}}

WS Iceberg

Gravity right

Twklstar.gif

WS Iceberg

Gravity left

WS Iceberg

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

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

Iceberg.jpg

An iceberg


See also