Template:ImageDescription: Difference between revisions

From SurveyWiki
Remove newline characters from the end of template
No edit summary
Line 12: Line 12:


== Example ==
== Example ==
<code><nowiki>{{ImageDescription|image=SurveyWiki-logo-icon.svg|size=48x48px|text=Lorem ipsum dolor ...}}</nowiki></code>
<code><nowiki>{{ImageDescription|image=SurveyWiki-logo icon.svg|size=48x48px|text=Lorem ipsum dolor ...}}</nowiki></code>
{{ImageDescription|image=SurveyWiki-logo-icon.svg|size=48x48px|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. }}
{{ImageDescription|image=SurveyWiki-logo-icon.svg|size=48x48px|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. }}



Revision as of 00:04, 13 October 2026

{{{text}}}

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=SurveyWiki-logo icon.svg|size=48x48px|text=Lorem ipsum dolor ...}}

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

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 | inside text, 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: 0 removes 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.