View source for Template:Wide image/doc

{{Documentation subpage}}
{{High-use}}
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
{{Lua|Module:Wide image}}
{{TOC right}}

This template allows you to easily include a panorama image. If the image is too wide, scrollbars will be added. If you do not want the image to use a thumbnail frame, you can use {{para|border|no}}.

==Usage==
{{tlx|Wide image|name|image width|caption|box width|alignment|alt{{=}}alt text|italic=on}}

*An <code>''image width''</code> option is required. This specifies the full width at which the image will be displayed, and is distinct from box width (the width of the box on the page).
*A <code>''caption''</code> option is optional, and an image frame will be used if a caption is supplied. If the caption contains an equal sign, use the parameter <code>|3=''caption''</code> in the place of <code>|''caption''</code>. If the caption supplied is exactly equal to image syntax such as <code>thumb</code>, the image's tooltip will no longer display the caption, but instead default to the name of the image.
*The <code>''box width''</code> option is optional, and if given a value in pixels followed by "px", or a value in percent followed by "%", will set the width of the box to that amount. For example, 45% would use 45% of the text section width, (not a percentage of the image width).
*The <code>''alignment''</code> option is also optional but requires ''box width'' to be defined. If given a value of <code>right</code> or <code>left</code>, the entire wide image will float to the right or left.  If given a value of <code>none</code> the image will not float.
*The <code>''alt text''</code> describes the image's visual appearance to visually disabled readers. Please see [[WP:ALT]] for details.

To change the scroll direction from left-to-right to right-to-left, use {{para|dir|rtl}}.

To align the caption, use {{para|align-cap}}.

To remove the outer border, use {{para|border|no}}.

==Example==
===Without caption===
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{wide image|Helsinki z00.jpg|1800px|
|alt=Panorama of city with mixture of five to ten story buildings}}
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|
|alt=Panorama of city with mixture of five to ten story buildings}}

====smaller====
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{wide image|Helsinki z00.jpg|400px|
|alt=Panorama of city with mixture of five to ten story buildings}}
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|400px|
|alt=Panorama of city with mixture of five to ten story buildings}}

===With caption===
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama
|alt=Panorama of city with mixture of five to ten story buildings}}
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama
|alt=Panorama of city with mixture of five to ten story buildings}}
{{clear}}

===Right aligned===
<syntaxhighlight lang="wikitext">
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|45%|right
|alt=Panorama of city with mixture of five to ten story buildings}}
This text goes after the ''wide image'' template. [[Lorem ipsum]] dolor sit amet...
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|45%|right
|alt=Panorama of city with mixture of five to ten story buildings}}

This text goes after the ''wide image'' template. {{Lorem ipsum|link=yes}}
{{clear}}

===Left aligned===
<syntaxhighlight lang="wikitext">
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|45%|left
|alt=Panorama of city with mixture of five to ten story buildings}}
This text goes after the ''wide image'' template. Lorem ipsum dolor sit amet...
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|45%|left
|alt=Panorama of city with mixture of five to ten story buildings}}

This text goes after the ''wide image'' template. {{Lorem ipsum}}
{{clear}}

===Center aligned 75% width===
<syntaxhighlight lang="wikitext">
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|75%|center
|alt=Panorama of city with mixture of five to ten story buildings}}
This text goes after the ''wide image'' template. Lorem ipsum dolor sit amet...
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|75%|center
|alt=Panorama of city with mixture of five to ten story buildings}}

This text goes after the ''wide image'' template. {{Lorem ipsum}}
{{clear}}

===No alignment===
<syntaxhighlight lang="wikitext">
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|45%|none
|alt=Panorama of city with mixture of five to ten story buildings}}
This text goes after the ''wide image'' template. Lorem ipsum dolor sit amet...
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama|45%|none
|alt=Panorama of city with mixture of five to ten story buildings}}

This text goes after the ''wide image'' template. {{Lorem ipsum}}
{{clear}}

===Scroll right to left===
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama
|alt=Panorama of city with mixture of five to ten story buildings
|dir=rtl}}
</syntaxhighlight>
{{wide image|Helsinki z00.jpg|1800px|[[Helsinki]] panorama
|alt=Panorama of city with mixture of five to ten story buildings
|dir=rtl}}
{{clear}}

===Dark mode===
Some images, like vectors and charts, may look better in dark mode with the skin-invert-image CSS class. This can be done by wrapping around a div, as shown in this example:

<syntaxhighlight lang="wikitext">
<div class="skin-invert-image">{{Wide image|Elements_abundance-bars.svg|1000px|Estimated abundances of the chemical elements in the Solar System (logarithmic scale)}}</div>
</syntaxhighlight>

<div class="skin-invert-image">{{Wide image|Elements_abundance-bars.svg|1000px|Estimated abundances of the chemical elements in the Solar System (logarithmic scale)}}</div>
{{clear}}

==TemplateData==
{{TemplateData header}}
<templatedata>{
	"description": "Allows you to easily include a panorama image. If the image is too wide, scrollbars will be added.",
	"params": {
		"1": {
			"label": "Filename",
			"description": "Name of the file to display. Example: Helsinki z00.jpg",
			"type": "wiki-file-name",
			"required": true,
			"aliases": [
				"image"
			]
		},
		"2": {
			"label": "Image width",
			"description": "Give the width in pixels (like: 1600px) that you want the included image to be",
			"type": "string",
			"required": true
		},
		"3": {
			"label": "Caption",
			"description": "A caption for the image that will be shown below image",
			"type": "string",
			"required": false,
			"aliases": [
				"caption"
			]
		},
		"4": {
			"label": "Width of frame",
			"description": "Limit the width of the frame enclosing the picture. Example: \"400px\" or \"40%\"",
			"type": "string",
			"required": false,
			"aliases": [
				"width"
			]
		},
		"5": {
			"label": "Frame alignment",
			"description": "Either of: left, right, center or none. When specified also requires you to set the \"Width of frame\" option",
			"default": "center",
			"type": "string",
			"required": false,
			"aliases": [
				"align"
			],
			"suggestedvalues": [
				"left",
				"right",
				"center",
				"none"
			]
		},
		"dir": {
			"label": "Picture alignment",
			"description": "Use the value 'rtl' to make the right side of the image the initial visible portion inside the scroll frame",
			"default": "ltr (left to right)",
			"type": "string",
			"required": false,
			"suggestedvalues": [
				"ltr",
				"rtl"
			]
		},
		"alt": {
			"label": "Alt text",
			"description": "Describes the image's visual appearance to visually disabled readers. Please see WP:ALT for details",
			"type": "string",
			"required": false
		},
		"border": {
			"label": "Border",
			"description": "Set to \"no\" to remove the thumbnail frame",
			"type": "string",
			"suggestedvalues": [
				"yes",
				"no"
			]
		}
	},
	"format": "inline",
	"paramOrder": [
		"1",
		"2",
		"3",
		"4",
		"5",
		"dir",
		"alt",
		"border"
	]
}</templatedata>

== Tracking category ==
* {{clc|Pages using wide image with unknown parameters}}

==See also==
{{commons|Template:Wide image}}
* {{tl|Panorama}} – with an option to set the height
* {{tl|Scalable image}}
* {{tl|Tall image}}
* {{tl|Scrollable}}

<includeonly>{{Sandbox other||
<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Graphics templates]]
[[Category:Image formatting and function templates]]
[[Category:Templates that add a tracking category]]
}}</includeonly>