Template:ImageDescription
Usage
{{ImageDescription|image=Example.png|size=48x48px|text=Description text}} Line with an image.
{{ImageDescription|image=Example.png|size=48px|text=Description text}} Line with an image.
{{ImageDescription|image=Example.png|text=Description text}} Line with an image of default size (48x48px).
{{ImageDescription|text=Description text}} Blank space of default size (48x48px).
{{ImageDescription|size=48px|text=Description text}} Blank space of size 64px.
Example
{{ImageDescription|image=Hydrangea macrophylla.jpeg|size=128x128px|text=Lorem ipsum dolor ...}}
Template description
Displays a small image on the left and a text description on the right. The text stays in its own column, so wrapped lines keep the same left edge as the first line and never flow under the image. The image is aligned to the top of the text.
Parameters
| Parameter | Required | Default value | Description |
|---|---|---|---|
image |
no | Blank-spacer.svg | File name, without the File: prefix, e.g. Example.png. If omitted, an empty space of the same size is shown.
|
size |
yes | 48x48px |
Image size: 48x48px fits the image inside a 48×48 box, 48px sets the width only
|
text |
yes | Description text. Wikitext (links, bold, etc.) is allowed |
Notes
- The image is decorative: it is not clickable and has no alt text.
- To use a pipe character
|insidetext, write{{!}}, otherwise the template treats it as a new parameter. - Do not put blank lines inside
text, as they create paragraph breaks with extra spacing.
Styling
The layout is done in CSS, stored in MediaWiki:Common.css (applies to all skins):
.img-desc { display: flex; align-items: flex-start; gap: 12px; }
.img-desc-icon { flex: 0 0 auto; line-height: 0; }
img-desc– flex container placing the image and text side by side, aligned to the top, with a 12px gap between them.img-desc-icon– the image column. It keeps the image's own width and never shrinks.line-height: 0removes the small gap MediaWiki leaves under inline images.
Changing these rules affects every page that uses the template. After editing Common.css, refresh the browser without cache (Ctrl+F5) to see the change.