|
<templatestyles src="Article thumbnail/styles.css" />
<div class="article-thumb article-thumb--align-{{{align|center}}}">
<div class="article-thumb__imgwrap">
{{#ifexist: [[File:{{{image|work-in-progress-book.jpg}}}|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}}]]
| [[File:{{{image|work-in-progress-book.jpg}}}|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}]]
<div class="article-thumb__caption" >[[{{{page|{{BASEPAGENAME}}}}}]]</div> ▼ | [[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>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>pagecaption</code> – Optional.Text Target page forunder the image link and(color caption. Defaults to <code>{{BASEPAGENAME}}</code>#202122).
* <code>widthalign</code> – Optional. Width passedSet to the<code>left</code>, file thumbnail ('''numeric only<code>right</code>, noor units''')<code>center</code>. Defaults to <code>180center</code>.
* <code>width</code> – Image width (numeric).
Note: The card itself is fixed at 150 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>.
== ExamplesExample (Left Aligned) ==
Basic (links to the current page):
<pre>
{{Article thumbnail
| image = Atomic Habits cover.jpg
| caption = James Clear (2018)
| align = left
}}
</pre>
Link to a specific page:
<pre>
{{Article thumbnail
| image = Atomic Habits cover.jpg
}}
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 px) and image area height (180 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>
|