Mostrar código-fonte de Predefinição:FreedImg/doc

{{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 &lt;math&gt; User preference, &lt;score&gt;, 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 &lt;img&gt;
|-
| 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).<!-- Do not use any <nowiki><div></nowiki> or div-based templates such as {{tl|smaller block}} if the template is located in the middle of a paragraph as Mediwiki will add a paragraph break.-->
* {{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;
}}

<!--
==== Split captions with differing alignments ====

Use {{tl|FI/csplit-l}} , {{tl|FI/csplit-c}}, {{tl|FI/csplit-r}} to change the text alignment within a caption if needed.

If you need a special use case please use {{FI/caption_block/s}} {{FI/caption_block/e}} within the images caption parameter...
-->

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

<includeonly>
<!-- CATEGORIES HERE, THANKS -->
[[Categoria:!Predefinições de imagens]]
</includeonly>