MediaWiki images

How pictures are placed on laussy.org. Most of this is ordinary MediaWiki syntax and is documented upstream; the part worth writing down here is full, which is ours and exists nowhere else.

The ordinary syntax

Everything hangs off [[File:Name.jpg|…]], with options separated by pipes and in any order:

[[File:Roof-of-Faro.jpg]]                        as uploaded, at its own size
[[File:Roof-of-Faro.jpg|300px]]                  scaled to 300 pixels wide
[[File:Roof-of-Faro.jpg|thumb|A caption]]        framed, right, with a caption
[[File:Roof-of-Faro.jpg|thumb|left|A caption]]   framed, left
[[File:Roof-of-Faro.jpg|link=Algarve]]           clicks through to a page
[[File:Roof-of-Faro.jpg|link=]]                  clicks nowhere
[[File:Roof-of-Faro.jpg|alt=A tiled roof]]       for screen readers
[[File:Roof-of-Faro.jpg|class=whatever]]         puts a CSS class on it

An option MediaWiki does not recognise is taken for the caption, which is why a typo in thumb silently becomes a caption rather than an error.

full

full runs a picture across the whole white box, edge to edge, the way {{Yt}} does for a video given no size:

[[File:Tweeters.jpg|full]]

It bleeds across the 20 pixels of padding the skin gives the body, so the picture touches the border on both sides rather than lining up with the text — as the birds above are doing.

Twitter has carried that same picture across the page since long before full existed, by hand:

<div style="position:relative; left:-20px;">[[File:tweeters.jpg|link=|778px]]</div>

which is worth comparing. It pulls 20 pixels to the left but the width is a number typed in, so it bleeds by 20 on that side and by whatever 778 happens to leave on the other; and the number stops being right the day the body changes width. full asks for the box instead of guessing at it.

This is not a MediaWiki option and never will be: the list of image parameters is a hardcoded static in Parser::getImageParams. What MediaWiki does have is class=, so full is translated into class="lw-full" by a ParserMakeImageParams hook in LocalSettings.php, and the widening itself is done by the skin, in common.less. It has to be the skin: full means "out past the padding .mw-body gives its content", which is a fact about this skin and about nothing else.

With a caption

A bare full cannot be combined with a caption. Both are written by the last unrecognised part of the link, so one eats the other. When you want both, say class=full instead — being a named option it is matched properly and survives anywhere in the link:

[[File:Roof-of-Faro.jpg|thumb|class=full|The roof of Faro]]

On a framed image the grey mat and border are dropped — a box drawn around a picture that already reaches the edge of the page is only a box around a box — and the caption is centred underneath, padded back in so it lines up with the text rather than with the picture.

What it does to the file

The slot is about 780 pixels across and the picture is stretched to fill it whatever it measures, so a small file is enlarged and will look it. Nothing is cropped.

A framed image with no size of its own would otherwise be rendered at the 300-pixel default and blown up soft, so full asks for 1600 — two screen pixels for each of the 780 — which the handler clamps down to the original when the file is smaller, never up. An unframed image with no size is already served whole, at its own resolution, and a size written alongside full is obeyed.

Banners, and video

Two neighbouring things that are not done with image syntax:

the picture at the top of a page: {{CustomHeader}}, which replaces the header image and lays a title and a blurb over it. It takes a file name rather than a path, so the same page finds the picture here and on laussy.org.
video: {{Yt}}. Given no size it spans the white box exactly as full does, which is where full got the idea.

Contents