Template:Article thumbnail: Difference between revisions

Content deleted Content added

Inline

Revision as of 13:54, 14 October 2025

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

image – Optional. File name of the image without the File: prefix (e.g., Atomic Habits cover.jpg).

 If the file is missing or not provided, it falls back to work-in-progress-book.jpg.

page – Optional. Target page for the image link and caption. Defaults to Article thumbnail.
width – Optional. Width passed to the file thumbnail (numeric only, no units). Defaults to 180.

 Note: The card itself is fixed at 150 px wide by CSS; the image is scaled to fit inside the 150×180 area.

alt – Optional. Alt text for accessibility. Defaults to Thumbnail for {page}.

Examples

Basic (links to the current page):

{{Article thumbnail
 | image = Atomic Habits cover.jpg
}}

Link to a specific page:

{{Article thumbnail
 | image = Atomic Habits cover.jpg
 | page  = Atomic Habits
}}

Custom image width (number only):

{{Article thumbnail
 | image = Atomic Habits cover.jpg
 | width = 200
}}

Custom alt text:

{{Article thumbnail
 | image = Atomic Habits cover.jpg
 | alt   = Atomic Habits by James Clear, book cover
}}

Two thumbnails side by side (inline cards):

{{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
}}

Notes

Provide the exact file name, including extension, but do not include the File: prefix in |image=.
If the provided image file does not exist (or is omitted), this template automatically uses work-in-progress-book.jpg.
The CSS fixes the card width (150 px) and image area height (180 px). The image is centered and constrained with max-width:100% and max-height:100%.
For grid layouts, place multiple template calls on the same line or separated by spaces; each card is display:inline-block and will wrap as needed.

@@ Line 1: / Line 1: @@
 <templatestyles src="Article thumbnail/styles.css" />
 <div class="article-thumb">
-<div class="article-thumb__imgwrap">[[File:{{{image}}}|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}]]</div>
+<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}}}}}}}]]
+ | [[File:work-in-progress-book.jpg|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}]]
+}}
+</div>
 <div class="article-thumb__caption">[[{{{page|{{BASEPAGENAME}}}}}]]</div>
 </div><noinclude>
@@ Line 9: / Line 14: @@
 == Parameters ==
-* <code>image</code> – '''Required.''' File name of the image '''without''' the <code>File:</code> prefix (e.g., <code>Atomic Habits cover.jpg</code>).
+* <code>image</code> – Optional. File name of the image '''without''' the <code>File:</code> prefix (e.g., <code>Atomic Habits cover.jpg</code>).
+  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>width</code> – Optional. Width passed to the file thumbnail ('''numeric only, no units'''). Defaults to <code>180</code>.
@@ Line 61: / Line 67: @@
 == 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.