Admin: Admin moved page Template:FreedImg/doc to Template:FreedImg en/doc without leaving a redirect

2020-11-06T05:50:21Z

Admin moved page Template:FreedImg/doc to Template:FreedImg en/doc without leaving a redirect

Admin: 1 revision imported

2020-11-05T23:05:31Z

1 revision imported

en>Inductiveload: document TemplateStyles usage

2020-07-13T15:06:02Z

document TemplateStyles usage

New page

{{Documentation subpage}}
{{uses TemplateStyles|Template:FreedImg/styles.css}}

* 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, {{tl|FI}}, rather than the long template name.

<pre>{{FI
| type =
| file =
| width =
| cclass =
| cstyle =
| float =
| margin-left =
| margin-right =
| clear =
| caption =
| tmleft =
| indent =
| tstyle =
| talign =
| alt =
| link =
| page =
}}</pre>

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

===Parameters===

; for the Image itself

* mandatory {{parameter|file}}: File name (without the "File:" prefix).
** optional {{ parameter|alt}}: Image alt-text, ie. for mouse-over text box or for use with a screenreader for the visually impaired.
** optional {{parameter|link}}: Override the default image link with an internal/external URL of your choosing (optional)
** optional {{parameter|page}}: Select individual image page within a multi-page file (PDF/DJVU etc.; optional)

; when the ({{parameter|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 {{parameter|file}} parameter instead.

{| {{ts|bc|mc}} border
|+ Parameters by code inspection as at 15th Dec. 2014 revision:
!{{t/r|24}}| {{((}}FI !! parameter !! alternate name !! default value !! notes !!{{t/r|24}}| {{))}}
|-
| cclass || || floatnone ||
|-
| width || || 100% ||
|-
| margin-right || || auto ||
|-
| margin-left || || auto ||
|-
| float || || «none» ||
|-
| clear || || «none» ||
|-
| cstyle || || «none» || Trailing semicolon always added if {{parameter|cstyle}} specified.
|-
| type || || «none» ||
* user:
* score:
* math:
* «none»:
|-
| file || || [[File:Smiley saying oops.png|left]] if type ∈ {user,score,math} || N.B. {{parameter|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 {{parameter|type}} is «none»
|-
| alt || || «none» || Only effective when {{parameter|type}} is «none»
|-
| page || || «none» || Only effective when {{parameter|type}} is «none»
|-
| imgclass || || «none» || Only effective when {{parameter|type}} is «none»; when present this CSS class is applied in addition to "freedImg" to <img>
|-
| imgstyle || || «none» || Trailing semicolon always added if {{parameter|cstyle}} specified.
|-
| caption || || «none» ||
|-
| tdisplay || || block || Only applied if {{parameter|caption}} present.
|-
| sdisplay || || inline-block || Only applied if {{parameter|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 {{parameter|caption}} present.
|-
| tstyle || || «none» || Only applied if {{parameter|caption}} present; when {{parameter|tstyle}} is also present a trailing semicolon is always added.
|-
| tmright || || 0.00em || Only applied if {{parameter|caption}} present.
|-
| tmleft || || 0.00em || Only applied if {{parameter|caption}} present.
|-
| indent || || 0.00em || Only applied if {{parameter|caption}} present.
|}

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

; Image element
* {{parameter|imgclass}}: extra CSS classes to add (often rotations)
* {{parameter|imgstyle}}: extra CSS styling to add to the image (e.g. borders)

; Image Caption
* {{parameter|caption}}: The image caption (not present; must be added).
* {{parameter|tstyle}},{{parameter|talign}}: Any special text style or alignment to apply to caption block (if present).
* {{parameter|tmleft}},{{parameter|indent}}: Any special text-flow (e.g. hanging indent etc.) control to apply to caption (if present).

=== Examples ===

==== Basic example: centred image ====

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

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

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

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

==== Mathematical Equation ====

{{smaller|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 "[http://www.mathjax.org/ MathJax]" causes any formulæ to be rendered entirely in text, completely bypassing any effect {{tl|FreedImg}} may have.)}}

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

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

==== Page of a multipage document ====

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

{{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) ====

{|{{ts|wa}}
|{{t/c2}}|<pre>
{{FI
| file = Iceberg.jpg
| width = 20%
| link = w:Iceberg{{!}}Iceberg article at Wikipedia
| alt = WS Iceberg
| imgclass = rot270
| caption = Gravity right
}}
</pre>
|
|{{t/c2}}|<pre>
{{FI
| file = Iceberg.jpg
| width = 40%
| link = w:Iceberg{{!}}Iceberg article at Wikipedia
| alt = WS Iceberg
| imgclass = rot90
| caption = Gravity left
}}
</pre>
|-
|{{t/c2}}|{{FI
| file = Iceberg.jpg
| width = 40%
| link = w:Iceberg{{!}}Iceberg article at Wikipedia
| alt = WS Iceberg
| imgclass = rot270
| caption = Gravity right
}}
|{{ts|ac}}|[[File:Twklstar.gif]]
|{{t/c2}}|{{FI
| file = Iceberg.jpg
| width = 40%
| link = w:Iceberg{{!}}Iceberg article at Wikipedia
| alt = WS Iceberg
| imgclass = rot90
| caption = Gravity left
}}
|-
|{{t/r2}}{{ts|width:45%}}|
|{{t/c|3}}|{{FI
| file = Iceberg.jpg
| width = 40%
| link = w:Iceberg{{!}}Iceberg article at Wikipedia
| alt = WS Iceberg
| imgclass = rot180
| caption = Gravity up
}}
|{{t/r2}}{{ts|width:45%}}|
|-
|{{t/c|3}}{{ts|mc}}|<pre>
{{FI
| file = Iceberg.jpg
| width = 40%
| link = w:Iceberg{{!}}Iceberg article at Wikipedia
| alt = WS Iceberg
| imgclass = rot180
| caption = Gravity up
}}
</pre>
|}

==== Extra CSS styles ====

<pre>
{{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;
}}
</pre>

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



== See also ==
*Template for offset images [[Template:FreedImg/span]] aka {{tl|FIS}}

<includeonly>

[[Category:Formatting templates|Dynamic image]]
</includeonly>

← Older revision	Revision as of 23:05, 5 November 2020
(No difference)

Template:FreedImg en/doc - Revision history

Admin: Admin moved page Template:FreedImg/doc to Template:FreedImg en/doc without leaving a redirect

Admin: 1 revision imported

en>Inductiveload: document TemplateStyles usage