Template:Image: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
(Created template)
 
m (Text replacement - "<br>" to "<br/>")
 
(32 intermediate revisions by one other user not shown)
Line 1: Line 1:
<includeonly>{{#if:{{{image|}}}|<!--
<includeonly>{{#if:{{{file|}}}|<!--
-->{{#vardefine:imagesize|
-->{{#vardefine:imagesize|
       {{#if:{{{scale|}}}
       {{#if:{{{scale|}}}
         |{{ImageSize|File:{{{image|}}}|{{{scale|}}}}}
         |{{ImageSize|File:{{{file|}}}|{{{scale|}}}}}
         |{{Percent|{{{image|}}}|{{{size|}}}}}
         |{{#if:{{{size|}}}|{{Percent|{{{file|}}}|{{{size|}}}}}}}
       }}
       }}
     }}<!--
     }}<!--
-->{{#vardefine:align|{{{align|{{{position|right}}}}}}}}<!--
-->{{#vardefine:align|{{{align|{{{position|left}}}}}}}}<!--
-->{{#vardefine:link|
-->{{#vardefine:link|
     {{#ifeq:{{lc:{{{link|}}}}}|none
     {{#ifeq:{{lc:{{{link|}}}}}|none
       |link=
       |link=
       |link={{{link|File:{{{image}}}}}}
       |link={{{link|File:{{{file}}}}}}
     }}
     }}
   }}<!--
   }}<!--
-->{{#vardefine:image|[[File:{{{image|}}} | {{#var:imagesize}} | {{{title|{{{caption|}}}}}} | {{#var:link}} | alt={{{alt|File:{{{image|}}}}}}]] }}<!--
-->{{#vardefine:image|[[File:{{{file|}}}{{#if:{{#var:imagesize}}|{{!}}{{#var:imagesize}}}}|{{#var:link}}|alt={{{alt|File:{{{file|}}}}}}]]}}<!--
-->{{#switch:{{lc:{{{type|}}}}}
-->{{#switch:{{lc:{{{type|}}}}}
     |frameless=[[File:{{{image|}}} | {{#var:imagesize}} | {{#var:align}} | {{{title|{{{caption|}}}}}} | {{#var:link}} | alt={{{alt|File:{{{image|}}}}}}]]
     |caption=<div class="thumb t{{#var:align}}"><!--
    |caption|#default=<div class="thumb t{{#var:align}}"><!--
     --><div class="thumbinner" style="background-color: transparent !important; border: none !important; width:{{#var:imagesize}};" title="{{{title|{{{caption|}}}}}}"> {{#var:image}}<!--
     --><div class="thumbinner" style="background-color: transparent !important; border: none !important; width:{{#var:imagesize}};"> {{#var:image}}<!--
     --><div class="thumbinner" style="margin-top: 2px; text-align:{{{captionalign|center}}}; clear:both;"> {{{caption|}}}<!--
     --><div class="thumbinner" style="margin-top: 2px; text-align:{{{captionalign|center}}}; clear:both;"> {{{caption|}}}<!--
     --></div></div></div>
     --></div></div></div>
     |thumb=<div class="thumb t{{#var:align}}"><!--
     |thumb=<div class="thumb t{{#var:align}}"><!--
     --><div class="thumbinner" style="width:{{#var:imagesize}};"> {{#var:image}}<!--
     --><div class="thumbinner" style="width:{{#var:imagesize}};" title="{{{title|{{{caption{{#var:link}}|}}}}}}"> {{#var:image}}<!--
     --><div class="thumbcaption"><!--
     --><div class="thumbcaption"><!--
     --><div class="magnify" style="margin-left:5px">[[File:Magnify-clip.png|link=File:{{{image}}}|Enlarge]]</div>{{{caption|}}}<!--
     --><div class="magnify" style="margin-left:5px">[[File:Magnify-clip.png|link=File:{{{file}}}|Enlarge]]</div>{{{caption|}}}<!--
     --></div></div></div>
     --></div></div></div>
    |normal|#default=<div title="{{{title|{{{caption|{{#explode:{{#var:link}}|=|1}}}}}}}}" align="{{#var:align}}" style="float:{{#var:align}}">{{#var:image}}<!--
    --></div>
     }}
     }}
|<span class=error>ERROR:</span> No image specified. Please [[Template:Image|specify]] an image. [[Category:Pages with Incomplete Coding]]
|<span class=error>ERROR:</span> No image specified. Please [[Template:Image|specify]] an image. [[Category:Pages with Incomplete Coding]]
Line 40: Line 41:
==Usage==
==Usage==
To use this template, start with this code:
To use this template, start with this code:
<div style="float:right"><pre>
<div style="float:left; margin-right:20px"><pre>
{{Image
{{Image
|image       =  
|file       =  
|type        =  
|type        =  
|size        =  
|size        =  
Line 53: Line 54:
|link        =  
|link        =  
}}
}}
</pre></div>{{clear|left}}
</pre></div>


Here are descriptions of the parameters. Only the parameter "''image''" is actually required, the rest are optional.
Here are descriptions of the parameters. Only the parameter "''image''" is actually required, the rest are optional.
{{parameter|image|The desired image. Do not include a File prefix.|Required}}
{{parameter|file|The desired image. Do not include a File prefix.|Required}}
{{parameter|type|The type of display for the image. Choices are ''frameless'', ''thumb'', and ''caption''. ''Frameless'' displays the image without any boxes or captions. ''Thumb'' displays the image in the traditional thumbnail box. ''Caption'' displays the image without any frame but with a boxed caption below it.|Optional|Defaults to ''caption'' if left blank}}
{{parameter|type|The type of display for the image. Choices are ''normal'', ''thumb'', and ''caption''. ''Normal'' displays the image without any boxes or captions. ''Thumb'' displays the image in the traditional thumbnail box. ''Caption'' displays the image without any frame but with a boxed caption below it.|Optional|Defaults to ''normal'' if left blank}}
{{parameter|size|The size of the image. Enter as a pixel number followed by a '''px''', or as a percentage number followed by a '''%'''.|Optional}}
{{parameter|size|The size of the image. Enter as a pixel number followed by a '''px''', or as a percentage number followed by a '''%'''. To specify height instead of width, enter the size as ''x##px''.|Optional}}
{{parameter|scale|Use this if you instead wish to limit the overall size of the image to a certain pixel or percentage amount. Enter as a pixel number followed by a '''px''', or as a percentage number followed by a '''%'''. This will keep the image's dimensions within the specified amount.|optional}}  
{{parameter|scale|Use this if you instead wish to limit the overall size of the image to a certain pixel or percentage amount. Enter as a pixel number followed by a '''px''', or as a percentage number followed by a '''%'''. This will keep the image's dimensions within the specified amount. This is mostly for convenience, the same effect can be done in ''size'' through ''##x##px'', with the same number in both spots.|optional}}  
{{parameter|align|Set whether the image floats left or right.  Note that you can also use "position" as the name for this parameter.|Optional|Defaults to left if not defined.}}
{{parameter|align|Set whether the image floats left or right.  Note that you can also use "position" as the name for this parameter.|Optional|Defaults to left if not defined.}}
{{parameter|caption|Caption to display under the image. Only displays for the ''thumb'' and ''caption'' types.|Optional}}
{{parameter|caption|Caption to display under the image. Only displays for the ''thumb'' and ''caption'' types.|Optional}}
{{parameter|captionalign|Alignment of the text in the ''caption'' parameter. Options are: ''left'', ''right'', and ''center''.|Optional|Defaults to center.}}
{{parameter|captionalign|Alignment of the text in the ''caption'' parameter. Options are: ''left'', ''right'', and ''center''.|Optional|Defaults to center.}}
{{parameter|title|The image's tooltip. Defaults to the caption.|Optional}}
{{parameter|title|The image's tooltip.|Optional|Defaults to the caption.}}
{{parameter|alt|The text that is displayed when the image fails to load.|Optional|Defaults to the file name.}}
{{parameter|alt|The text that is displayed when the image fails to load.|Optional|Defaults to the file name.}}
{{parameter|link|The desired link. Can be internal or external. If you set this to "''none''", then the image will not create a link at all. Note: This only changes the image's link and it does not effect the enlarge link in image thumbnails. |Optional|Defaults to the image's page if left blank.}}
{{parameter|link|The desired link. Can be internal or external. If you set this to "''none''", then the image will not create a link at all. Note: This only changes the image's link and it does not effect the enlarge link in image thumbnails. |Optional|Defaults to the image's page if left blank.}}
 
==Examples==
<u><b>Basic</b></u>
<div style="float:left; margin-right:20px"><pre>
{{Image|file=Magic-Hammer.png}}
</pre></div>
{{clear}}
{{Image|file=Magic-Hammer.png}}
{{clear}}<br/>
<u><b>Thumbnail</b></u>
<div style="float:left; margin-right:20px"><pre>
{{Image|file=Magic-Hammer.png|type=thumb|caption=Magic Hammer from A Link to the Past.}}
</pre></div><br/>
{{Image|file=Magic-Hammer.png|type=thumb|caption=Magic Hammer from A Link to the Past.}}
{{clear}}<br/>
<u><b>Caption</b></u>
<div style="float:left; margin-right:20px"><pre>
{{Image|file=Magic-Hammer.png|type=caption|caption=Magic Hammer from A Link to the Past.}}
</pre></div><br/>
{{Image|file=Magic-Hammer.png|type=caption|caption=Magic Hammer from A Link to the Past.}}
{{clear}}


{{Cat|Formatting Templates}}
{{Cat|Formatting Templates}}
</noinclude>
</noinclude>

Latest revision as of 17:18, February 8, 2015


Purpose

This is a dynamic template that offers enhanced ways of handling images, including ways to:

  • Create captions for transparent images
  • Scale an image based on percentage instead of pixel amounts
  • Constrain an within specific dimensions
  • Create tooltips forimages with frames

None of these options are available or practical with standard image coding. This template allows for simplified ways of performing complex formatting of images.

Usage

To use this template, start with this code:

{{Image
|file        = 
|type         = 
|size         = 
|scale        = 
|align        = 
|caption      = 
|captionalign = 
|title        = 
|alt          = 
|link         = 
}}

Here are descriptions of the parameters. Only the parameter "image" is actually required, the rest are optional.

  • file — The desired image. Do not include a File prefix. (Required )
  • type — The type of display for the image. Choices are normal, thumb, and caption. Normal displays the image without any boxes or captions. Thumb displays the image in the traditional thumbnail box. Caption displays the image without any frame but with a boxed caption below it. (Optional - Defaults to normal if left blank)
  • size — The size of the image. Enter as a pixel number followed by a px, or as a percentage number followed by a %. To specify height instead of width, enter the size as x##px. (Optional )
  • scale — Use this if you instead wish to limit the overall size of the image to a certain pixel or percentage amount. Enter as a pixel number followed by a px, or as a percentage number followed by a %. This will keep the image's dimensions within the specified amount. This is mostly for convenience, the same effect can be done in size through ##x##px, with the same number in both spots. (Optional )
  • align — Set whether the image floats left or right. Note that you can also use "position" as the name for this parameter. (Optional - Defaults to left if not defined.)
  • caption — Caption to display under the image. Only displays for the thumb and caption types. (Optional )
  • captionalign — Alignment of the text in the caption parameter. Options are: left, right, and center. (Optional - Defaults to center.)
  • title — The image's tooltip. (Optional - Defaults to the caption.)
  • alt — The text that is displayed when the image fails to load. (Optional - Defaults to the file name.)
  • link — The desired link. Can be internal or external. If you set this to "none", then the image will not create a link at all. Note: This only changes the image's link and it does not effect the enlarge link in image thumbnails. (Optional - Defaults to the image's page if left blank.)

Examples

Basic

{{Image|file=Magic-Hammer.png}}
File:Magic-Hammer.png


Thumbnail

{{Image|file=Magic-Hammer.png|type=thumb|caption=Magic Hammer from A Link to the Past.}}


File:Magic-Hammer.png
Enlarge
Magic Hammer from A Link to the Past.


Caption

{{Image|file=Magic-Hammer.png|type=caption|caption=Magic Hammer from A Link to the Past.}}


File:Magic-Hammer.png
Magic Hammer from A Link to the Past.