Template:Article thumbnail: Difference between revisions
Appearance
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
<div class="article-thumb"> |
<div class="article-thumb"> |
||
<div class="article-thumb__imgwrap"> |
<div class="article-thumb__imgwrap"> |
||
[[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}}}}}}}]] |
|||
| [[File:work-in-progress-book.jpg|{{{width|180}}}px|link={{{page|{{BASEPAGENAME}}}}}|alt={{{alt|Thumbnail for {{{page|{{BASEPAGENAME}}}}}}}]] |
|||
}} |
|||
</div> |
</div> |
||
<div class="article-thumb__caption">[[{{{page|{{BASEPAGENAME}}}}}]]</div> |
<div class="article-thumb__caption">[[{{{page|{{BASEPAGENAME}}}}}]]</div> |
||
| Line 11: | Line 8: | ||
== What this does == |
== What this does == |
||
Displays a small, consistent '''article thumbnail''' card: an image that links to a page, with a caption under it. |
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. |
This version performs '''no existence checks''' (no <code>#ifexist</code>) to avoid expensive parser calls. Styling is provided via TemplateStyles (''Article thumbnail/styles.css''). Images are centered and scaled to fit the fixed thumbnail area. |
||
== Parameters == |
== 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> – Optional. File name of the image '''without''' the <code>File:</code> prefix (e.g., <code>Atomic Habits cover.jpg</code>). |
||
If |
If omitted, it defaults to <code>work-in-progress-book.jpg</code>. '''No existence check is performed'''—if the specified file does not exist, MediaWiki will render it as a missing image link/icon as per your wiki configuration. |
||
* <code>page</code> – Optional. Target page for the image link and caption. Defaults to <code>{{BASEPAGENAME}}</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>. |
* <code>width</code> – Optional. Width passed to the file thumbnail ('''numeric only, no units'''). Defaults to <code>180</code>. |
||
| Line 67: | Line 64: | ||
== Notes == |
== Notes == |
||
* Provide the exact file name, including extension, but do not include the <code>File:</code> prefix in <code>|image=</code>. |
* Provide the exact file name, including extension, but do not include the <code>File:</code> prefix in <code>|image=</code>. |
||
* |
* This template intentionally avoids expensive parser functions. There is '''no automatic fallback''' if the file is missing; pass a known placeholder (e.g., <code>work-in-progress-book.jpg</code>) from the caller if you want a guaranteed image. |
||
* 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>. |
* 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. |
* 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. |
||
Revision as of 19:25, 15 October 2025
What this does
Displays a small, consistent article thumbnail card: an image that links to a page, with a caption under it.
This version performs no existence checks (no #ifexist) to avoid expensive parser calls. 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 theFile:prefix (e.g.,Atomic Habits cover.jpg).
If omitted, it defaults to work-in-progress-book.jpg. No existence check is performed—if the specified file does not exist, MediaWiki will render it as a missing image link/icon as per your wiki configuration.
page– Optional. Target page for the image link and caption. Defaults toArticle thumbnail.width– Optional. Width passed to the file thumbnail (numeric only, no units). Defaults to180.
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 toThumbnail 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=. - This template intentionally avoids expensive parser functions. There is no automatic fallback if the file is missing; pass a known placeholder (e.g.,
work-in-progress-book.jpg) from the caller if you want a guaranteed image. - The CSS fixes the card width (150 px) and image area height (180 px). The image is centered and constrained with
max-width:100%andmax-height:100%. - For grid layouts, place multiple template calls on the same line or separated by spaces; each card is
display:inline-blockand will wrap as needed.