Help:Gallery: Difference between revisions

From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
m (replaced deleted image)
mNo edit summary
 
(51 intermediate revisions by 18 users not shown)
Line 1: Line 1:
'''Here's how to create a picture gallery:'''
This help page covers how to create an image '''gallery'''.


1. Galleries are best used in situations where a lot of pictures need to be displayed. Galleries are like thumbnails boxed together in a table.
== Gallery basics ==
Galleries are best used in situations where many images need to be displayed. Galleries are like thumbnails boxed together in a table.


2. Here is an example of a gallery:
By default, galleries have a fluid width. Do not create galleries with a fixed width on any page outside of your [[MarioWiki:Userspace|userspace]].


The basic syntax for a gallery is as follows:
<pre>
<gallery>
Image name 1.png|Caption 1
Image name 2.jpg|Caption 2
Image name 3.gif|Caption 3
</gallery>
</pre>
=== Example ===
<gallery>
MarioMP8Artwork.png|[[Mario]]
Luigi Artwork - Mario Party 7.png|[[Luigi]]
NSMBDS Bowser Artwork.png|[[Bowser]]
</gallery>
Here is the source code for the above gallery:
<pre>
<gallery>
<gallery>
Image:MarioMP8a.PNG|<center>'''[[Mario]]'''</center>
MarioMP8Artwork.png|[[Mario]]
Image:Luigi.jpg|<center>'''[[Luigi]]'''</center>
Luigi Artwork - Mario Party 7.png|[[Luigi]]
Image:Bowser222.jpg|<center>'''[[Bowser]]'''</center>
NSMBDS Bowser Artwork.png|[[Bowser]]
</gallery>
</pre>
 
== 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 <code>widths</code>, <code>heights</code>, and <code>class</code> parameters, respectively.
 
=== Supported classes ===
* <code>rawsize</code> : Prevent the image from being upscaled
** <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>invert-light</code> / <code>invert-dark</code> : Invert the image in the wiki's light or dark mode
 
==== 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) 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:
 
<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>
 
Here is the source code for the above gallery:
 
<pre>
<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>
</pre>
 
=== Example ===
<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>
 
Here is the source code for the above gallery:
 
<pre>
<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>
</gallery>
<pre><gallery>
</pre>
Image:MarioMP8a.PNG|<center>'''[[Mario]]'''</center>
 
Image:Luigi.jpg|<center>'''[[Luigi]]'''</center>
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]].
Image:Bowser222.jpg|<center>'''[[Bowser]]'''</center>
</gallery></pre>


3. The main idea for a gallery is this:
== Galleries in articles ==
<pre><gallery>
See [[MarioWiki:Galleries]] for details on how article gallery sections and dedicated gallery pages should be laid out.
Image:Image name.png|<center>Caption</center>
</gallery></pre>


[[Category:Help|{{PAGENAME}}]]
{{MarioWiki}}
{{Shortcut|MW:GALLERY}}
{{Shortcut|SMW:GALLERY}}
[[Category:Help]]

Latest revision as of 17:39, November 5, 2024

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:

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

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.

Galleries in articles

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