Template:Image: Difference between revisions
mNo edit summary |
m Removed background color to allow dynamic color shift in dark mode. |
||
| (83 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><!-- | <includeonly><!-- | ||
FILENAME: | |||
-->[[file:{{{1}}}|thumb|{{{align|center}}}<!-- | |||
RESIZING: | |||
-->|{{#if:{{{height|}}}|x{{{height}}}|{{{width|100px}}}}}<!-- | |||
< | ARTIST ATTRIBUTION VIA SEMANTIC MEDAIWIKI: | ||
{{ | -->|<div class="attribution">{{#if:{{#show:File:{{{1}}}|?Has artist}}| <span style="font-size:90%;">by {{#show:File:{{{1}}}|?Has artist|format=list|sep= |default= |link=none}}</span>|}}</div><!-- | ||
| | |||
| | CAPTION: | ||
| | -->{{#if:{{{2|}}}|{{{2}}}|}} <!-- | ||
| | |||
| | LINK: | ||
|link=[[ | -->{{#if:{{{link|}}}|{{!}}link={{{link}}}}}]]<!-- | ||
--></includeonly><noinclude> | |||
== Description == | |||
This template is used to include a thumbnail image on a page. The preferred method of displaying images is with text wrapped around it. To do this, you must pass an alignment parameter. (See the table below for examples.) | |||
If you desire a different format for displaying images, especially one with more granular control, see [[:Help:Images#Non-Template Image Insertion|Non-Template Image Insertion]]. | |||
== Usage == | |||
:'''Note:''' The code of the examples below are split over multiple lines for the sake of clarity, please keep all parameters on the same line when using this template. | |||
:For example: <code><nowiki>{{image|FILENAME.EXTENSION|caption|align=left/right}}</nowiki></code> | |||
{| style="width: 100%; text-align: left; margin: auto;" class="wikitable" | {| style="width: 100%; text-align: left; margin: auto;" class="wikitable" | ||
|- | |- | ||
! colspan=" | ! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Tag Only</span><br><div style="text-align: left;"><span style="font-weight: normal;">The only required parameter is an unnamed parameter of the filename of the image you want to display. You must pass the filename and the extension. (<code>FILENAME.EXTENSION</code>) It is necessary to match the filename exactly —i.e., match case and spelling—or the image will not appear. </div> | ||
|- | |||
! width=50%|You Type | |||
!You Get | |||
|- | |||
| style="text-align: center;" |<pre>{{Image|Pen.png}} | |||
</pre> | |||
| {{Image|Pen.png}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Caption</span><br><div style="text-align: left;"><span style="font-weight: normal;">In order to add a caption to the image thumbnail, pass a second unnamed parameter.</div> | |||
|- | |||
! width=25%|You Type | |||
!You Get | |||
|- | |||
| style="text-align: left;" |<pre>{{Image | |||
|Pen.png | |||
|This is a caption. | |||
}} | |||
</pre> | |||
| {{Image|Pen.png|This is a caption.}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Artist Attribution</span><br><div style="text-align: left;"><span style="font-weight: normal;">Artist Attribution is passed automatically if an artist has been assigned to a specific image. To assign an artist to an image, you must use the {{t|Art}} template on an image's [[:Special:AllPages/File:|File page]]. If an artist has not been assigned, no artist attribution will be shown. If the artist has been assigned, the artist's name will link to that [[:Category:Artists|artist's page]].</div> | |||
|- | |||
! width=25%|You Type | |||
!You Get | |||
|- | |||
| style="text-align: left;" |<pre>{{Image | |||
|Beth Brower-2.jpg | |||
|This is a caption. | |||
|width=150px | |||
}} | |||
</pre> | |||
| {{Image|Beth Brower-2.jpg|This is a caption.|width=150px}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Alignment</span><br><div style="text-align: left;"><span style="font-weight: normal;">In order to have an Image align to either margin, pass <code>align=</code>, with the input of either <code>left</code> or <code>right</code>. The default alignment is center. '''If you wish to have text wrap around the image thumbnail, you MUST pass <code>align=</code>, otherwise the image will be centered as a block element. (i.e., Text will not wrap around it.)'''</div> | |||
|- | |||
! width=25%|You Type | |||
!You Get | |||
|- | |||
| style="text-align: left;" |<pre>{{Image | |||
|Pen.png | |||
|This is a caption. | |||
|align=left/right | |||
}} | |||
</pre> | |||
| style="text-align: justify; font-size: 90%;" | Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.{{Image|Pen.png|Using <code>align=left</code>.|align=left}}{{Image|Pen.png|Using <code>align=right</code>.|align=right}}Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. | |||
|- | |- | ||
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Resize Width</span><br><div style="text-align: left;"><span style="font-weight: normal;">If you wish to resize the width of the image, pass <code>width=</code> with a pixel value. (e.g., <code>width=300px</code>) If <code>width=</code> is not passed, the default is 100px.</div> | |||
|- | |- | ||
! width=25%|You Type | |||
!You Get | |||
|- | |- | ||
| style="text-align: | | style="text-align: left;" |<pre>{{Image | ||
|Pen.png | |||
|This image is 200px wide. | |||
|width=200px | |||
}} | |||
</pre> | |||
| {{Image|Pen.png|This image is 200px wide.|width=200px}} | |||
|- | |- | ||
! colspan=" | ! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Resize Height</span><br><div style="text-align: left;"><span style="font-weight: normal;">If you wish to resize the height of the image, pass <code>height=</code> with a pixel value. (e.g., <code>height=200px</code>) If <code>height=</code> is not passed, the default is 100px.<br><span style="font-size: 90%;"><br>'''Note:''' Passing <code>height=</code> will override <code>width=</code>, if both are passed.</div> | ||
|- | |- | ||
! width=25%|You Type | |||
!You Get | |||
|- | |- | ||
| style="text-align: | | style="text-align: left;" |<pre>{{Image | ||
|Pen.png | |||
|This image is 150px tall. | |||
|height=150px | |||
}} | |||
</pre> | |||
| {{Image|Pen.png|This image is 150px tall.|height=150px}} | |||
|- | |- | ||
! colspan=" | ! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Internal Link</span><br><div style="text-align: left;"><span style="font-weight: normal;">If you wish for the image itself to link to another page on the wiki, pass <code>link=</code> with the name of the page of which you wish to link.</div> | ||
|- | |- | ||
! width=25%|You Type | |||
!You Get | |||
|- | |- | ||
| style="text-align: | | style="text-align: left;" |<pre>{{Image | ||
|Pen.png | |||
|Click here for more details on Emma M. Lion. | |||
|link=Emma M. Lion | |||
}} | |||
</pre> | |||
| {{Image|Pen.png|Click here for more details on Emma M. Lion.|link=Emma M. Lion}} | |||
|- | |- | ||
! colspan=" | ! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">External Link</span><br><div style="text-align: left;"><span style="font-weight: normal;">If you wish for the image itself to link to another page outside of the wiki, pass <code>link=</code> with the url of the webpage of which you wish to link.</div> | ||
|- | |- | ||
! width=25%|You Type | |||
!You Get | |||
|- | |- | ||
| style="text-align: | | style="text-align: left;" |<pre>{{Image | ||
|Pen.png | |||
|Click here for more details on Beth Brower. | |||
|link=https://www.bethbrower.com | |||
}} | |||
</pre> | |||
| {{Image|Pen.png|Click here for more details on Beth Brower.|link=https://www.bethbrower.com}} | |||
|} | |} | ||
| Line 62: | Line 131: | ||
{{for|Special:WhatLinksHere/{{FULLPAGENAME}}|a full listing|here|pre=This list is limited to 100 pages}} | {{for|Special:WhatLinksHere/{{FULLPAGENAME}}|a full listing|here|pre=This list is limited to 100 pages}} | ||
{{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=0|limit=100}} | {{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=0|limit=100}} | ||
[[Category: | |||
[[Category:Article Elements]] | |||
Latest revision as of 22:36, 27 May 2025
Description
This template is used to include a thumbnail image on a page. The preferred method of displaying images is with text wrapped around it. To do this, you must pass an alignment parameter. (See the table below for examples.)
If you desire a different format for displaying images, especially one with more granular control, see Non-Template Image Insertion.
Usage
- Note: The code of the examples below are split over multiple lines for the sake of clarity, please keep all parameters on the same line when using this template.
- For example:
{{image|FILENAME.EXTENSION|caption|align=left/right}}
| Tag Only The only required parameter is an unnamed parameter of the filename of the image you want to display. You must pass the filename and the extension. (
FILENAME.EXTENSION) It is necessary to match the filename exactly —i.e., match case and spelling—or the image will not appear. | |
|---|---|
| You Type | You Get |
{{Image|Pen.png}}
|
|
| Caption In order to add a caption to the image thumbnail, pass a second unnamed parameter.
| |
| You Type | You Get |
{{Image
|Pen.png
|This is a caption.
}}
|
|
| Artist Attribution Artist Attribution is passed automatically if an artist has been assigned to a specific image. To assign an artist to an image, you must use the
{{Art}} template on an image's File page. If an artist has not been assigned, no artist attribution will be shown. If the artist has been assigned, the artist's name will link to that artist's page. | |
| You Type | You Get |
{{Image
|Beth Brower-2.jpg
|This is a caption.
|width=150px
}}
|
|
| Alignment In order to have an Image align to either margin, pass
align=, with the input of either left or right. The default alignment is center. If you wish to have text wrap around the image thumbnail, you MUST pass align=, otherwise the image will be centered as a block element. (i.e., Text will not wrap around it.) | |
| You Type | You Get |
{{Image
|Pen.png
|This is a caption.
|align=left/right
}}
|
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.align=left. align=right. |
| Resize Width If you wish to resize the width of the image, pass
width= with a pixel value. (e.g., width=300px) If width= is not passed, the default is 100px. | |
| You Type | You Get |
{{Image
|Pen.png
|This image is 200px wide.
|width=200px
}}
|
|
| Resize Height If you wish to resize the height of the image, pass
height= with a pixel value. (e.g., height=200px) If height= is not passed, the default is 100px.Note: Passing height= will override width=, if both are passed. | |
| You Type | You Get |
{{Image
|Pen.png
|This image is 150px tall.
|height=150px
}}
|
|
| Internal Link If you wish for the image itself to link to another page on the wiki, pass
link= with the name of the page of which you wish to link. | |
| You Type | You Get |
{{Image
|Pen.png
|Click here for more details on Emma M. Lion.
|link=Emma M. Lion
}}
|
|
| External Link If you wish for the image itself to link to another page outside of the wiki, pass
link= with the url of the webpage of which you wish to link. | |
| You Type | You Get |
{{Image
|Pen.png
|Click here for more details on Beth Brower.
|link=https://www.bethbrower.com
}}
|
|



