Template:Large image

Template documentation[view] [edit] [history] [purge]

Usage

This template produces a large image that will not exceed the width of its parent container. If the image is larger than the parent width, it will scale down to fill, but not exceed, the parent automatically.

Parameters

• 1 or file: A Mediawiki image markup for the image to insert. Use the "native" size you'd like to see when the image is "unconstrained" by the parent. Also use alt as normal. You do not need to specify centre
• max-width: Use this if the image should not take up the whole parent width. Can be useful for maintaining relative image sizes (in which case make sure the ratio between the max pixel sizes and the max-width parameters is the same).
• style extra CSS to apply to the wrapper div element. Can be used for border, padding, margins, etc.

Standard usage

{{large image|[[File:The Station-Master at Longley.png|500px]]}}

There is no support for captioning. Use normal formatting (e.g. {{center}}, {{smaller}}, etc) to achieve this.

Examples

Basic usage

This produces a 500px image when there is no width limit in the surrounding container:

<!-- Note: the green div is to simulate the container only. You do not need to add your own div in normal usage -->
<div style="width:100%; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|500px]]}}
</div>

However, if the surrounding container is smaller than 500px (for example a small screen or small window, or the user has applied a narrower Dynamic Layout), the image will scale down naturally:

<div style="width:300px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|500px]]}}
</div>

Max-width

When the page is very wide, the image's "own" size is what is shown (300px):

<div style="width:800px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=50%}}
</div>

In narrower containers, the max-width is what determines the size (50% of 400px = 200px):

<div style="width:400px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=50%}}
</div>

Relative image sizes

By keeping the ratio between the max-width parameters and the ratio between the nominal image sizes (in px) the same for multiple images, their relative sizes can be maintained, even when some or all of the images are constrained by the parent width.

For example, a 200px and 300px nominal image in an unconstrained parent have a 2:3 ratio when unconstrained. To maintain this ratio, the max-widths should also be in a 2:3 ratio. If you want the larger image to be 100% width, then the smaller one should be 2/3 of that: 67%.

Unconstrained (500px parent width) gives a 2:3 ratio of widths:

<div style="width:500px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|200px]]|max-width=67%}}<!-- 100% * 2/3 = 67% -->
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=100%}}
</div>

Constrained (200px parent width) still shows the images at the same sizes relative to each other (2:3):

<div style="width:200px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|200px]]|max-width=67%}}<!-- 100% * 2/3 = 67% -->
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=100%}}
</div>

Captions

The template does not have direct support for captions, instead leaving this up to the user to specify styling suitable for the work in question.

You can add text to the template body to place text in the container div, where it will inherit the centre-alignment of the parent container.

{{large image|
[[File:The Station-Master at Longley.png|200px]]

''Image caption here''
}}

Image caption here

Score

Musical score can be place in this template to constrain its size just like an image. If the container is very small, it might make the image too small. Use with care.

{{large image|
<score>
	 \relative c' { 
		e16-.->a(b gis)a-.->c(d b)c-.->e(f dis)e-.->a(b a)
		gis(b e)e,(gis b)b,(e gis)gis,(b e)e,(gis? b e)
	}
</score>
}}

See also

• {{img float}} for "embedding" small images in surrounding text.

The above documentation is transcluded from Template:Large image/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.