Template:Article thumbnail: Difference between revisions

Browse history interactively

← Older edit

Content deleted Content added

VisualWikitext

Inline

Latest revision as of 15:23, 4 January 2026

Article thumbnail

Parameters

image – File name without prefix.
page – Target page link.
caption – Text under the link (color #202122).
align – Optional. Set to left, right, or center. Defaults to center.
width – Image width (numeric).

Example (Left Aligned)

{{Article thumbnail
 | image   = Atomic Habits cover.jpg
 | page    = Atomic Habits
 | caption = James Clear (2018)
 | align   = left
}}

@@ Line 1: / Line 1: @@
 <templatestyles src="Article thumbnail/styles.css" />
-<div class="article-thumb">
+<div class="article-thumb article-thumb--align-{{{align|center}}}">
 <div class="article-thumb__imgwrap">
-{{#ifexist: File:{{{image|work-in-progress-book.jpg}}}
+[[File:{{{image|work-in-progress-book.jpg}}}|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}}]]
+</div>
- | [[File:{{{image|work-in-progress-book.jpg}}}|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}]]
+<div class="article-thumb__caption">
- | [[File:work-in-progress-book.jpg|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}]]
+[[{{{page|{{BASEPAGENAME}}}}}]]
-}}
+<div class="article-thumb__text">{{{caption|}}}</div>
 </div>
-<div class="article-thumb__caption">[[{{{page|{{BASEPAGENAME}}}}}]]</div>
 </div><noinclude>
-== What this does ==
-Displays a small, consistent '''article thumbnail''' card: an image that links to a page, with a caption under it.
-Styling is provided via TemplateStyles (''Article thumbnail/styles.css''). Images are centered and scaled to fit the fixed thumbnail area.
 == Parameters ==
-* <code>image</code> – Optional. File name of the image '''without''' the <code>File:</code> prefix (e.g., <code>Atomic Habits cover.jpg</code>).
+* <code>image</code> – File name without prefix.
+* <code>page</code> – Target page link.
-  If the file is missing or not provided, it falls back to <code>work-in-progress-book.jpg</code>.
-* <code>page</code> – Optional. Target page for the image link and caption. Defaults to <code>{{BASEPAGENAME}}</code>.
+* <code>caption</code> – Text under the link (color #202122).
-* <code>width</code> – Optional. Width passed to the file thumbnail ('''numeric only, no units'''). Defaults to <code>180</code>.
+* <code>align</code> – Optional. Set to <code>left</code>, <code>right</code>, or <code>center</code>. Defaults to <code>center</code>.
+* <code>width</code> – Image width (numeric).
-  Note: The card itself is fixed at 150&nbsp;px wide by CSS; the image is scaled to fit inside the 150×180 area.
-* <code>alt</code> – Optional. Alt text for accessibility. Defaults to <code>Thumbnail for {page}</code>.
-== Examples ==
+== Example (Left Aligned) ==
-Basic (links to the current page):
 <pre>
 {{Article thumbnail
- | image = Atomic Habits cover.jpg
+ | image   = Atomic Habits cover.jpg
+ | page    = Atomic Habits
+ | caption = James Clear (2018)
+ | align   = left
 }}
 </pre>
-Link to a specific page:
-<pre>
-{{Article thumbnail
- | image = Atomic Habits cover.jpg
- | page  = Atomic Habits
-}}
-</pre>
-Custom image width (number only):
-<pre>
-{{Article thumbnail
- | image = Atomic Habits cover.jpg
- | width = 200
-}}
-</pre>
-Custom alt text:
-<pre>
-{{Article thumbnail
- | image = Atomic Habits cover.jpg
- | alt   = Atomic Habits by James Clear, book cover
-}}
-</pre>
-Two thumbnails side by side (inline cards):
-<pre>
-{{Article thumbnail
- | image = Atomic Habits cover.jpg
- | page  = Atomic Habits
-}}
-{{Article thumbnail
- | image = How to Win Friends.jpg
- | page  = How to Win Friends and Influence People
-}}
-</pre>
-== Notes ==
-* Provide the exact file name, including extension, but do not include the <code>File:</code> prefix in <code>|image=</code>.
-* If the provided image file does not exist (or is omitted), this template automatically uses <code>work-in-progress-book.jpg</code>.
-* The CSS fixes the card width (150&nbsp;px) and image area height (180&nbsp;px). The image is centered and constrained with <code>max-width:100%</code> and <code>max-height:100%</code>.
-* For grid layouts, place multiple template calls on the same line or separated by spaces; each card is <code>display:inline-block</code> and will wrap as needed.
 </noinclude>