Template:Image: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 7: | Line 7: | ||
-->]]</includeonly><noinclude> | -->]]</includeonly><noinclude> | ||
== Description == | == Description == | ||
This template is used to include a thumbnail image on a page. | 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 == | == Usage == | ||
:'''Note:''' The examples below are split over multiple lines for the sake of clarity, please keep all elements on the same line when using this template. | :'''Note:''' The examples below are split over multiple lines for the sake of clarity, please keep all elements on the same line when using this template. | ||
:For example: <code><nowiki>{{image|FILENAME.EXTENSION|caption|artist=ARTISTNAME|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;"> | ! 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> | ||
|- | |- | ||
! width=25%|You Type | ! width=25%|You Type | ||
| Line 23: | Line 27: | ||
| style="background-color: white;" | {{Image|Pen.png}} | | style="background-color: white;" | {{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;"> | ! 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 | ! width=25%|You Type | ||
| Line 35: | Line 39: | ||
| style="background-color: white;" | {{Image|Pen.png|This is a caption.}} | | style="background-color: white;" | {{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;"> | ! 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> | ||
|- | |- | ||
! width=25%|You Type | ! width=25%|You Type | ||
| Line 48: | Line 52: | ||
| style="background-color: white;" | {{Image|Pen.png|This is a caption.|artist=Declan Lion}} | | style="background-color: white;" | {{Image|Pen.png|This is a caption.|artist=Declan Lion}} | ||
|- | |- | ||
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Alignment</span><br><div style="text-align: left;"><span style="font-weight: normal;"> | ! 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> | ||
|- | |- | ||
! width=25%|You Type | ! width=25%|You Type | ||
| Line 61: | Line 65: | ||
| style="background-color: white;" | {{Image|Pen.png|Using <code>align=left</code>.|align=left}}{{Image|Pen.png|Using <code>align=right</code>.|align=right}} | | style="background-color: white;" | {{Image|Pen.png|Using <code>align=left</code>.|align=left}}{{Image|Pen.png|Using <code>align=right</code>.|align=right}} | ||
|- | |- | ||
! 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;"> | ! 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> | ||
|- | |- | ||
! width=25%|You Type | ! width=25%|You Type | ||
| Line 68: | Line 72: | ||
| style="text-align: left; background-color: white;" |<pre>{{Image | | style="text-align: left; background-color: white;" |<pre>{{Image | ||
|Pen.png | |Pen.png | ||
|This is | |This image is 150px tall. | ||
|height=150px | |height=150px | ||
}} | }} | ||
</pre> | </pre> | ||
| style="background-color: white;" | {{Image|Pen.png|This is | | style="background-color: white;" | {{Image|Pen.png|This image is 150px tall.|height=150px}} | ||
|- | |- | ||
! 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;"> | ! 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> | ||
|- | |- | ||
! width=25%|You Type | ! width=25%|You Type | ||
| Line 81: | Line 85: | ||
| style="text-align: left; background-color: white;" |<pre>{{Image | | style="text-align: left; background-color: white;" |<pre>{{Image | ||
|Pen.png | |Pen.png | ||
|This is | |This image is 200px wide. | ||
|width=200px | |width=200px | ||
}} | }} | ||
</pre> | </pre> | ||
| style="background-color: white;" | {{Image|Pen.png|This is | | style="background-color: white;" | {{Image|Pen.png|This image is 200px wide.|width=200px}} | ||
|- | |- | ||
! 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;"> | ! 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 | ! width=25%|You Type | ||
| Line 100: | Line 104: | ||
| style="background-color: white;" | {{Image|Pen.png|Click here for more details on Emma M. Lion.|link=Emma M. Lion}} | | style="background-color: white;" | {{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;"> | ! 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 | ! width=25%|You Type | ||
Revision as of 05:08, 2 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 examples below are split over multiple lines for the sake of clarity, please keep all elements on the same line when using this template.
- For example:
{{image|FILENAME.EXTENSION|caption|artist=ARTISTNAME|align=left/right}}


