Help:Gallery: Difference between revisions

From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
 
(6 intermediate revisions by the same user not shown)
Line 10: Line 10:
<pre>
<pre>
<gallery>
<gallery>
Image name.ext|Caption
Image name 1.png|Caption 1
Image name 2.jpg|Caption 2
Image name 3.gif|Caption 3
</gallery>
</gallery>
</pre>
</pre>
Line 32: Line 34:


== Advanced options ==
== Advanced options ==
In some instances, it may be necessary to change the image widths, heights, and even background color in order to display them properly in a gallery.
In some instances, it may be necessary to change the image widths, heights, and other aspects in order to display them properly in a gallery.


This can be accomplished using the <code>widths</code>, <code>heights</code>, and <code>class</code> parameters, respectively.
This can be accomplished using the <code>widths</code>, <code>heights</code>, and <code>class</code> parameters, respectively.
Line 39: Line 41:
* <code>rawsize</code> : Prevent the image from being upscaled
* <code>rawsize</code> : Prevent the image from being upscaled
** <code>rawsize x2</code> - <code>x10</code> : Scale the image a specific amount
** <code>rawsize x2</code> - <code>x10</code> : Scale the image a specific amount
* <code>smooth</code> : Use a smooth rather than pixelated image upscaling algorithm
* <code>blackbg</code> / <code>graybg</code> : Change the background color of the image container
* <code>blackbg</code> / <code>graybg</code> : Change the background color of the image container
* <code>invert-light</code> / <code>invert-dark</code> : Invert the image in the wiki's light or dark mode
* <code>invert-light</code> / <code>invert-dark</code> : Invert the image in the wiki's light or dark mode


==== Using rawsize ====
==== Using rawsize ====
Start with an opening tag of <code><nowiki><gallery class="rawsize"></nowiki></code> and step up the scaling one increment at a time (e.g. <code>rawsize x2</code>, <code>rawsize x3</code>, etc). If you reach a scale where any of the images overflow its gallery container, then use the class before that one. Do not increase the size of the gallery containers beyond the default to make room for scaled images.
Start with an opening tag of <code><nowiki><gallery class="rawsize"></nowiki></code> and step up the scaling one increment at a time (e.g. <code>rawsize x2</code>, <code>rawsize x3</code>, etc) until all sprites fit comfortably within their gallery container and without any images overflowing. Do not increase the size of the widths/heights value beyond the default 120px to make room for scaled images (but going smaller is fine).


It is possible to adjust the scaling on a per-image basis using the {{tem|class}} template. This could be used to reduce the scaling on just the overflowed image(s). For example:
It is possible to adjust the scaling on a per-image basis using the {{tem|class}} template. This could be used to reduce the scaling on just the overflowed image(s). For example:
Line 63: Line 66:
</pre>
</pre>


=== Example ===
==== Example ====
<gallery class="blackbg" widths="50" heights="50">
<gallery class="blackbg" widths="50" heights="50">
SM64 Asset Sprite CS Mario.png|Mario
SM64 Asset Sprite CS Mario.png|Mario
Line 81: Line 84:


This example applies a class to all images in the gallery. For details on how to apply classes on a ''per-image'' basis, see [[Template:Class]].
This example applies a class to all images in the gallery. For details on how to apply classes on a ''per-image'' basis, see [[Template:Class]].
=== Custom backgrounds ===
==== Global background ====
<gallery style="--bg:#00F">
SMBSSX1MarioSprite.png|[[Small Mario]]
SMBSSX1MarioSprite2.png|[[Super Mario (form)|Super Mario]]
SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}
</gallery>
<pre>
<gallery style="--bg:#00F">
SMBSSX1MarioSprite.png|[[Small Mario]]
SMBSSX1MarioSprite2.png|[[Super Mario (form)|Super Mario]]
SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}
</gallery>
</pre>
==== Per-image backgrounds ====
<gallery style="--bg1:#9494FF;--bg2:#4242FF">
SMB Smallmario.png|[[Small Mario]]{{class|bg1}}
SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg2}}
SMB Mario Portal Bowser Artwork.png|[[Bowser]]
</gallery>
<pre>
<gallery style="--bg1:#9494FF;--bg2:#4242FF">
SMB Smallmario.png|[[Small Mario]]{{class|bg1}}
SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg2}}
SMB Mario Portal Bowser Artwork.png|[[Bowser]]
</gallery>
</pre>
==== Combined ====
<gallery style="--bg:#9494FF;--bg1:#4242FF">
SMB Smallmario.png|[[Small Mario]]
SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg1}}
SMB Small Luigi Sprite.png|Small [[Luigi]]
SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}
</gallery>
<pre>
<gallery style="--bg:#9494FF;--bg1:#4242FF">
SMB Smallmario.png|[[Small Mario]]
SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg1}}
SMB Small Luigi Sprite.png|Small [[Luigi]]
SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}
</gallery>
</pre>


== Galleries in articles ==
== Galleries in articles ==

Latest revision as of 17:05, February 9, 2025

This help page covers how to create an image gallery.

Gallery basics

Galleries are best used in situations where many images need to be displayed. Galleries are like thumbnails boxed together in a table.

By default, galleries have a fluid width. Do not create galleries with a fixed width on any page outside of your userspace.

The basic syntax for a gallery is as follows: 

<gallery>
Image name 1.png|Caption 1
Image name 2.jpg|Caption 2
Image name 3.gif|Caption 3
</gallery>

Example

Here is the source code for the above gallery: 

<gallery>
MarioMP8Artwork.png|[[Mario]]
Luigi Artwork - Mario Party 7.png|[[Luigi]]
NSMBDS Bowser Artwork.png|[[Bowser]]
</gallery>

Advanced options

In some instances, it may be necessary to change the image widths, heights, and other aspects in order to display them properly in a gallery.

This can be accomplished using the widths, heights, and class parameters, respectively.

Supported classes

  • rawsize : Prevent the image from being upscaled
    • rawsize x2 - x10 : Scale the image a specific amount
  • smooth : Use a smooth rather than pixelated image upscaling algorithm
  • blackbg / graybg : Change the background color of the image container
  • invert-light / invert-dark : Invert the image in the wiki's light or dark mode

Using rawsize

Start with an opening tag of <gallery class="rawsize"> and step up the scaling one increment at a time (e.g. rawsize x2, rawsize x3, etc) until all sprites fit comfortably within their gallery container and without any images overflowing. Do not increase the size of the widths/heights value beyond the default 120px to make room for scaled images (but going smaller is fine).

It is possible to adjust the scaling on a per-image basis using the {{class}} template. This could be used to reduce the scaling on just the overflowed image(s). For example:

  • Rat's all, folks!

    Rat's all, folks!

  • I'm NOT a crusty crab!

    I'm NOT a crusty crab!

  • Snake me wanna shout

    Snake me wanna shout

Here is the source code for the above gallery: 

<gallery class="rawsize x4">
MouserL.gif|Rat's all, folks!
Clawgrip.gif|I'm NOT a crusty crab!
TriclydeL.gif|Snake me wanna shout{{class|x3}}
</gallery>

Example

  • Mario

    Mario

  • Yellow Coin

    Yellow Coin

  • Power Star

    Power Star

Here is the source code for the above gallery: 

<gallery class="blackbg" widths="50" heights="50">
SM64 Asset Sprite CS Mario.png|Mario
SM64 Asset Sprite CS Coin.png|Yellow Coin
SM64 Asset Sprite CS Power Star.png|Power Star
</gallery>

This example applies a class to all images in the gallery. For details on how to apply classes on a per-image basis, see Template:Class.

Custom backgrounds

Global background

<gallery style="--bg:#00F">
SMBSSX1MarioSprite.png|[[Small Mario]]
SMBSSX1MarioSprite2.png|[[Super Mario (form)|Super Mario]]
SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}
</gallery>

Per-image backgrounds

<gallery style="--bg1:#9494FF;--bg2:#4242FF">
SMB Smallmario.png|[[Small Mario]]{{class|bg1}}
SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg2}}
SMB Mario Portal Bowser Artwork.png|[[Bowser]]
</gallery>

Combined

<gallery style="--bg:#9494FF;--bg1:#4242FF">
SMB Smallmario.png|[[Small Mario]]
SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg1}}
SMB Small Luigi Sprite.png|Small [[Luigi]]
SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}
</gallery>

Galleries in articles

See MarioWiki:Galleries for details on how article gallery sections and dedicated gallery pages should be laid out.

[Edit]
Help, policy, and writing guideline pages
About the Super Mario Wiki About • General disclaimer • Introduction • Mushroom World Encyclopedia • Namespaces • Nintendo Independent Wiki Alliance (NIWA) • Privacy policy
User ranks Administrators • Autoconfirmed users • Autopatrolled users • Bots • Bureaucrats • Established users • Patrollers • Proprietor • Users
Editing General Article size • Categories • Citations • Conjectural names • Deletion policy • Editing help • Empty sections • Glitches • Good writing • Japanese • Lists • Manual of Style • Naming • Navigation templates • Notes • Notice templates • Pre-release and unused content • Reception and sales • Redirects • Redirect help • Shortcuts • Template help • Title restrictions • Version differences
Content Canonicity • Chronology • Coverage • Generic subjects • Minor NPCs • New articles • References • Spoilers • Upcoming content
Images Galleries • Gallery help • Image help • Image maps • Image optimization • Image use policy • Licenses
Coding help CSS • Formatting • Links • Lists • Media • Tables
Communication Talk pages Communication • No-signature policy • Signatures • Signature help • Welcoming users • WikiLove
Userspace Account services • Changing username • Personal files • Preferences • Userbox help • Userspace • YouTube
Vandalism Blocking policy • Courtesy • Protected pages • Vandalism • Warning policy
Miscellaneous Appeals • BJAODN • Copyrights • Don't shoot your foot off • FAQ • Glossary • Help contents • Proposals • Proposal archives • Rules directory • Searching help • Writing guidelines
Retrieved from "https://www.mariowiki.com/index.php?title=Help:Gallery&oldid=4727141"