A3! Wiki
Advertisement
A3! Wiki
Template documentation follows
Note: the template above may sometimes be partially or fully invisible.
Visit Template:Portimage/doc to edit this documentation. (How does this work?)

Disclaimer

Credits to League of Angels - Fire Raiders Wiki for the template.

Portable Image

The intention of this template is to provide a way to display images which will scale based on the device (PC, tablet, smartphone) which is being used to access the wiki.

Usage

{{Portimage
|file=(Name of the image file to display)
|align=(left, floatleft, center, right, floatright, none)
|size=(full,extra,large,medium,small,tiny)
|caption=(text to place as a caption on the image)
|link=(page to link to when the image is clicked on)
}}

Parameters

file=
(required) - The file name of the image being displayed
align=
(optional) - Alignment (within the container the image is being displayed in) desired for the image
  • none = (default) don't force any alignment on the image, allow the container to decide
  • left = move the image to the left border of the container
  • floatleft = same as left, however text is allowed to flow to the right the image
  • right = move the image to the right border of the container
  • floatright = same as right, however text is allowed to flow to the left of the image
  • center = center the image within it's container
size=
(optional)) - resizes the image to a maximum size. Note this does NOT scale up the image to a larger size!
  • full - (default) allow the image to grow as much as it's able to based on limitations of the container and/or display viewport
  • extra - Image can be up to 600 pixels wide
    • As wide as the main content area of a wikia article page
  • large - Image can be up to 200 pixels wide
    • 1/3 of the width of a standard wikia article page
  • medium - Image can be up to 100 pixels wide
    • most of the standard LoA icons, buttons, etc. are approximately this width
  • small - Image can be up to 70 pixels wide
    • 2/3 of the typical LoA Icon size
  • tiny - Image can be up to 35 pixels wide
    • 1/3 of the typical LoA Icon size
caption=
(optional) - Text you want to display when the reader hovers over the image
link=
(optional) - Page you want to direct the reader to when they click on the image
  • Default: Link to the image's information page
  • Use "link=" (with no target) to remove links entirely.

Examples

In the examples below, I will demonstrate them both inside and outside of a table.

Minimal

{{Portimage|file=Alex in Wonderland Event Banner.png}}
Alex in Wonderland Event Banner

And now in a table...

400 Pixel Wide Table
Alex in Wonderland Event Banner

=Linking

{{Portimage|file=Alex in Wonderland Event Banner.png|link=Alex in Wonderland/Event}}
400 Pixel Wide Table
Alex in Wonderland/Event
{{Portimage|file=Alex in Wonderland Event Banner.png|link=}}
400 Pixel Wide Table
Alex in Wonderland Event Banner

Sizing

{{Portimage|file=Alex in Wonderland Event Banner.png|size=(scale)}}
Size Changes
Size Image
None
100%
Alex in Wonderland Event Banner
Extra
600 px
Alex in Wonderland Event Banner
Large
300 px
Alex in Wonderland Event Banner
Medium
100 px
Alex in Wonderland Event Banner
Small
65 px
Alex in Wonderland Event Banner
Tiny
35 px
Alex in Wonderland Event Banner

Aligning

{{Portimage|file=Alex in Wonderland Event Banner.png|size=large|align=(alignment)}}
Alignment Changes
Align Image
None
(inherit)
Text before the image...
Alex in Wonderland Event Banner
...Text after the image
Left
No Float
Text before the image...
Alex in Wonderland Event Banner
...Text after the image
Float Left Text before the image...
Alex in Wonderland Event Banner
...Text after the image
Center Text before the image...
Alex in Wonderland Event Banner
...Text after the image
Float Right Text before the image...
Alex in Wonderland Event Banner
...Text after the image
Right
No Float
Text before the image...
Alex in Wonderland Event Banner
...Text after the image