ਫਰਮਾ:FreedImg/doc ਲਈ ਸਰੋਤ ਵੇਖੋ

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

* 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        =
 | imgwidth     =
 | cclass       =
 | cstyle       =
 | float        =
 | margin-left  =
 | margin-right =
 | clear        =
 | caption      =
 | top-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.

; 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
* {{parameter|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 {{parameter|width}} is given and uses <code>px</code>, 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
* {{parameter|caption}}: The bottom image caption (if present)
* {{parameter|top-caption}}: The top image caption (if present)
* {{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).

=== Styling via CSS ===

The following classes are applied, which can be targeted with [[H:Page styles|work-specific CSS]]:
* The whole container: <code>wst-freedimg</code> {{smaller|({{Search/css|.wst-freedimg}})}}
* The caption(s): <code>wst-freedimg-caption</code> {{smaller|({{Search/css|.wst-freedimg-caption}})}}
** The top caption: <code>wst-freedimg-caption-top</code> {{smaller|({{Search/css|.wst-freedimg-caption-top}})}}
** The top caption: <code>wst-freedimg-caption-bottom</code> {{smaller|({{Search/css|.wst-freedimg-caption-bottom}})}}

=== Examples ===

==== Basic example: centred image ====
{{doc example|content=
<pre>
{{FI
 | file         = Iceberg.jpg
 | width        = 20%
 | link         = w:Iceberg{{!}}Iceberg article at Wikipedia
 | alt          = WS Iceberg
 | top-caption  = An iceberg
 | caption      = Still an iceberg
}}
</pre>
{{FI
 | file         = Iceberg.jpg
 | width        = 20%
 | link         = w:Iceberg{{!}}Iceberg article at Wikipedia
 | alt          = WS Iceberg
 | top-caption  = An iceberg
 | caption      = Still an iceberg
}}
}}

==== Musical score ====

{{doc example|content=
<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.)}}

{{doc example|content=
<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 ====

{{doc example|content=
<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
}}
|
|{{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 ====

{{doc example|content=
<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...
-->

==== Missing images ====

If an image doesn't exist yet, you can use <code>missing</code> in the {{parameter|file}} parameter:

{{doc example|content=
<pre>
{{FI
 | file     = missing
 | width    = 200px
 | caption  = The caption can be entered as usual
}}
</pre>

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


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

<includeonly>
<!-- CATEGORIES HERE, THANKS -->
[[Category:Image templates|Dynamic image]]
</includeonly>
<templatedata>
{
	"params": {
		"type": {
			"label": "type",
			"description": "Type of content",
			"type": "string",
			"suggestedvalues": [
				"math",
				"score",
				"missing"
			],
			"suggested": true
		},
		"file": {
			"label": "file",
			"description": "filename of image to float.",
			"type": "string"
		},
		"alt": {},
		"link": {},
		"page": {
			"label": "page",
			"description": "Page number to use when the filename is a multi page document (such as PDF/DJVU).",
			"type": "number"
		},
		"width": {},
		"cclass": {},
		"cstyle": {},
		"float": {},
		"clear": {},
		"margin-left": {},
		"margin-right": {},
		"imgclass": {},
		"imgwidth": {},
		"caption": {},
		"top-caption": {},
		"tstyle": {},
		"talign": {},
		"tmleft": {},
		"indent": {}
	},
	"description": "Floats an image/caption block.",
	"paramOrder": [
		"type",
		"file",
		"alt",
		"link",
		"page",
		"width",
		"cclass",
		"cstyle",
		"float",
		"clear",
		"margin-left",
		"margin-right",
		"imgclass",
		"imgwidth",
		"caption",
		"top-caption",
		"tstyle",
		"talign",
		"tmleft",
		"indent"
	],
	"format": "block"
}
</templatedata>