Template:Image: Difference between revisions

From The Reed and Rite
m Removed background color to allow dynamic color shift in dark mode.
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><!--
<includeonly><!--
-->[[file:{{{1}}}|thumb|{{{align|center}}}|{{#if:{{{height|}}}|x{{{height}}}|{{{width|100px}}}}}<!--
 
-->|<!--
FILENAME:
  ARTIST: --><div class="attribution">{{#if:{{{artist|}}}|<span style="font-size:90%;">by {{{artist}}}</span>|}}</div><!--
-->[[file:{{{1}}}|thumb|{{{align|center}}}<!--
CAPTION: --> {{#if:{{{2|}}}|{{{2}}}|}} <!--
 
    LINK: -->{{#if:{{{link|}}}|{{!}}link={{{link}}}}}<!--
RESIZING:
-->]]</includeonly><noinclude>
-->|{{#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:
-->{{#if:{{{link|}}}|{{!}}link={{{link}}}}}]]<!--
--></includeonly><noinclude>
== Description ==
== 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.)
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.)
Line 14: Line 24:
:'''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.
:'''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|artist=ARTISTNAME|align=left/right}}</nowiki></code>
: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="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 file name 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>
! 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=25%|You Type
! width=50%|You Type
!You Get
!You Get
|-
|-
| style="text-align: center; background-color: white;" |<pre>{{Image|Pen.png}}
| style="text-align: center;" |<pre>{{Image|Pen.png}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png}}
| {{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>
! 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>
Line 32: Line 42:
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Pen.png
|This is a caption.
|This is a caption.
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|This is a caption.}}
| {{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;">If the artist is known, please pass the <code>artist=</code> to add the artist attribution. We strive, wherever possible, to correctly credit artists.</div>
! 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
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Beth Brower-2.jpg
|This is a caption.
|This is a caption.
|artist=Declan Lion
|width=150px
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|This is a caption.|artist=Declan Lion}}
| {{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>. '''If you wish to have text wrap around the image thumbnail, you MUST pass <code>align=</code>, other wise the image will be centered as a block element. (i.e., Text will not wrap around it.)'''</div>
! 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
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Pen.png
|This is a caption.
|This is a caption.
Line 63: Line 73:
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|Using <code>align&#61;left</code>.|align=left}}{{Image|Pen.png|Using <code>align&#61;right</code>.|align=right}}
| 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&#61;left</code>.|align=left}}{{Image|Pen.png|Using <code>align&#61;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 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>)</div>
! 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
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Pen.png
|This image is 150px tall.
|This image is 200px wide.
|height=150px
|width=200px
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|This image is 150px tall.|height=150px}}
| {{Image|Pen.png|This image is 200px wide.|width=200px}}
|-
|-
! 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>)</div>
! 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
! width=25%|You Type
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Pen.png
|This image is 200px wide.
|This image is 150px tall.
|width=200px
|height=150px
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|This image is 200px wide.|width=200px}}
| {{Image|Pen.png|This image is 150px tall.|height=150px}}
|-
|-
! 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>
! 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>
Line 96: Line 106:
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Pen.png
|Click here for more details on Emma M. Lion.
|Click here for more details on Emma M. Lion.
Line 102: Line 112:
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|Click here for more details on Emma M. Lion.|link=Emma M. Lion}}
| {{Image|Pen.png|Click here for more details on Emma M. Lion.|link=Emma M. Lion}}
|-
|-
! 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>
! 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>
Line 109: Line 119:
!You Get
!You Get
|-
|-
| style="text-align: left; background-color: white;" |<pre>{{Image
| style="text-align: left;" |<pre>{{Image
|Pen.png
|Pen.png
|Click here for more details on Beth Brower.
|Click here for more details on Beth Brower.
Line 115: Line 125:
}}
}}
</pre>
</pre>
| style="background-color: white;" | {{Image|Pen.png|Click here for more details on Beth Brower.|link=https://www.bethbrower.com}}
| {{Image|Pen.png|Click here for more details on Beth Brower.|link=https://www.bethbrower.com}}
|}
<br>
<br>
{| class="wikitable" style="width: 100%; text-align: left; margin: auto;  table-layout: fixed;"
|- class="title"
! style="width: 13%;" | Parameter !! style="width: 15%;" | Description !! style="width: 47%;" | Code !! style="width: 30%;" | Output
|-
| colspan="4" style="text-align: center;" |  '''Common Parameters'''
|- style="background-color: white;"
| style="text-align: center;" |  '''''None'''''
|| Only the file name is passed.
|| <pre style="width: 20%;>{{Image
|Pen.png
}}</pre>
|| {{Image|Pen.png}}
|- style="background-color: white;"
| style="text-align: center;" |  '''''Caption'''''
|| File name and caption are passed.
|| <pre style="width: 40%;>{{Image
|Pen.png
|This is a caption.
}}</pre>
|| {{Image|Pen.png|This is a caption.}}
|- style="background-color: white;"
| style="text-align: center;" |  <code>artist=</code> || Specifies the artist's name for the image. || <pre style="width: 40%;>{{Image
|Pen.png
|This is a caption.
|artist=Declan Lion
}}</pre> || {{Image|Pen.png|This is a caption.|artist=Declan Lion}}
|-
| colspan="4" style="text-align: center;" |  '''Alignment Parameters'''
|- style="background-color: white;"
| style="text-align: center;" |  <code>align=left</code> || Pushes the image over to the left, allowing text to flow around it. || <pre style="width: 40%;>{{Image
|Pen.png
|This is a caption.
|align=left
}}</pre> || {{Image|Pen.png|This is a caption.|align=left}}
|- style="background-color: white;"
| style="text-align: center;" |  <code>align=right</code> || Pushes the image over to the right, allowing text to flow around it. || <pre style="width: 40%;>{{Image
|Pen.png
|This is a caption.
|align=right
}}</pre> || {{Image|Pen.png|This is a caption.|align=right}}
|-
| colspan="4" style="text-align: center;" |  '''Resizing Parameters'''
|- style="background-color: white;"
| style="text-align: center;" |  <code>height=</code> || Sets the height of the image. If set, the width will adjust automatically to maintain aspect ratio. || <pre style="width: 40%;>{{Image
|Pen.png
|This is a caption.
|height=150px
}}</pre> || {{Image|Pen.png|This is a caption.|height=150px}}
|- style="background-color: white;"
| style="text-align: center;" |  <code>width=</code> || Sets the width of the image. If set, the height will adjust automatically to maintain aspect ratio. || <pre style="width: 40%;>{{Image
|Pen.png
|This is a caption.
|width=200px
}}</pre> || {{Image|Pen.png|This is a caption.|width=200px}}
|-
| colspan="4" style="text-align: center;" |  '''Link Parameters'''
|- style="background-color: white;"
| style="text-align: center;" |  <code>link=</code> <br>'''(Internal)'''|| Makes the image clickable, linking it to a specific internal URL. || <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}}
|- style="background-color: white;"
| style="text-align: center;" |  <code>link=</code> <br>'''(External)''' || Makes the image clickable, linking it to a specific external URL. || <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}}
|}
|}



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.
}}
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
}}
This is a caption.
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.
Using align=left.
Using 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.
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
}}
This image is 200px wide.
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
}}
This image is 150px tall.
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
}}
Click here for more details on 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
}}
Click here for more details on Beth Brower.

Articles using Template