Template:ImageDescription: Difference between revisions
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
__NOTOC__ | __NOTOC__ | ||
<div class="img-desc"> | <includeonly><div class="img-desc"> | ||
<div class="img-desc-icon">[[File:{{{image|Blank-spacer.svg}}}|{{{size|48x48px}}}|link=|alt=]]</div> | <div class="img-desc-icon">[[File:{{{image|Blank-spacer.svg}}}|{{{size|48x48px}}}|link=|alt=]]</div> | ||
<div>{{{text}}}</div> | <div>{{{text}}}</div> | ||
</div><noinclude> | </div></includeonly><noinclude> | ||
== Usage == | == Usage == | ||
<p><code><nowiki>{{ImageDescription|image=Example.png|size=48x48px|text=Description text}}</nowiki></code> Line with an image.</p> | <p><code><nowiki>{{ImageDescription|image=Example.png|size=48x48px|text=Description text}}</nowiki></code> Line with an image.</p> | ||
| Line 12: | Line 12: | ||
== Example == | == Example == | ||
<code><nowiki>{{ImageDescription|image= | <code><nowiki>{{ImageDescription|image=Hydrangea macrophylla.jpeg|size=128x128px|text=Lorem ipsum dolor ...}}</nowiki></code> | ||
{{ImageDescription|image= | {{ImageDescription|image=Hydrangea macrophylla.jpeg|size=128x128px|text=Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at hendrerit nunc. Cras mi lorem, venenatis nec molestie a, molestie in tellus. Pellentesque turpis turpis, vestibulum sit amet augue consectetur, tempus congue erat. Sed eget ultrices nulla. Etiam pharetra suscipit diam sed dictum. Aliquam erat volutpat. Nam at sem tristique, lacinia quam ac, condimentum dui. Donec viverra viverra ullamcorper. Nunc lobortis ipsum in urna pharetra pretium. Etiam magna justo, laoreet a justo id, rhoncus porttitor mi. Suspendisse potenti. Suspendisse potenti. }} | ||
== Template description == | == Template description == | ||
| Line 47: | Line 47: | ||
Changing these rules affects every page that uses the template. After editing <code>Common.css</code>, refresh the browser without cache (Ctrl+F5) to see the change. | Changing these rules affects every page that uses the template. After editing <code>Common.css</code>, refresh the browser without cache (Ctrl+F5) to see the change. | ||
[[Category: | [[Category:Template-auxiliary]] | ||
</noinclude> | </noinclude> | ||
Latest revision as of 22:32, 4 November 2026
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.