Gallery Images

From MusicWiki Detroit
Jump to: navigation, search


Rendering a gallery of images

Gallery syntax

It's easy to make a gallery of thumbnails with the <gallery> tag.

The syntax is:

<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</gallery>


Note that the image code is not enclosed in brackets when enclosed in gallery tags.

Captions are optional, and may contain wiki links or other formatting. Some of the parameters controlling thumb output can also be used here, specifically the ones that modify the file (as opposed to ones that control where in the page the image falls).

For example, with multi-paged media like pdfs, you can use code like <tvar|code>page=4</>.

The File: prefix can be omitted.

For example:


<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg|alt=An example image. It has flowers
File:Example.jpg|''italic caption''
Example.jpg|on page "{{PAGENAME}}"
</gallery>

is formatted as:


Mode parameter

We have an experimental <mode>mode</> parameter, taking options as follows:

  • traditional is the original gallery type used by MediaWiki.
  • nolines is similar to <tvar|traditional>traditional</>, but with no border lines.
  • packed causes images to have the same height but different widths, with little space between the images.

The rows in this Responsive web design mode organize themselves according to the width of the screen.

  • packed-overlay shows the caption overlaid on the image, in a semi-transparent white box.
  • packed-hover is similar to packed-overlay, but with the caption and box only showing up on hover.

For example:

<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

Gives gallery mode:packed-hover:


Examples of the other modes:


mode="traditional"

mode="nolines"

mode="packed"

mode="packed-overlay"


Optional gallery attributes

The gallery tag itself takes several additional parameters, specified as attribute name-value pairs:


<gallery {parameters}>
{images}
</gallery>


  • caption="{caption}": (caption text between double quotes for more than a word) sets a caption centered atop the gallery.
  • widths={width}px: sets the widths of the images, default 120px. Note the plural, widths .
  • heights={heights}px: sets the (max) heights of the images.
  • perrow={integer}: sets the number of images per row.

0 means automatically adjust based on width of screen.

  • showfilename={anything}: Show the filenames of the images in the individual captions for each image
  • mode={traditional|nolines|packed|packed-hover|packed-overlay}: See section above (1.22+).

Note The widths and heights parameters are taken more as suggestions than strict values for packed (and related) modes. Packed modes will adjust the width of images in order to make each row the same length.}}


Example:

Coding:

<gallery widths=60px heights=60px perrow=7 caption="Sunflowers are groovy">
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
File:Example1.jpg
</gallery>


Result:


Row of images that will wrap to browser width

One way that works for a row of images with varying widths is not to use "thumb" or "left" or "none".

If "thumb" is not used (and thus no captions) a row of images will wrap to the browser width.

If necessary, narrow the browser window to see the images wrap to the next row.


[[File:Example1.jpg|220px]]
[[File:Example1.jpg|100px]]
[[File:Example1.jpg|150px]]
[[File:Example1.jpg|250px]]
[[File:Example1.jpg|200px]]
[[File:Example1.jpg|50px]]
[[File:Example1.jpg|220px]]
[[File:Example1.jpg|175px]]

Example1.jpg Example1.jpg Example1.jpg Example1.jpg Example1.jpg Example1.jpg Example1.jpg Example1.jpg

To wrap images of varying widths with captions it is necessary to use div HTML for an unordered list. Along with style="display: inline-block;". For more info and ideas see: Give Floats the Flick in CSS Layouts.

<div><ul> 
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example1.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>


  • Caption 1
  • Caption 2
  • Caption 3
  • Caption 4
  • Caption 5
  • Caption 6
  • Caption 7
  • Caption 8


Also, sometimes one wants varying widths for images in a row.</translate> <translate> Outside of a gallery, or the div HTML, it is impossible to have individual captions for images in a row of images that will wrap to the browser width. Try it and see. Nothing else using wikitext works correctly. Images will either overlap stuff on the right, or force a horizontal scroll bar.

Using a left float ("left") for some images, combined with "none" for some of the images, will not work consistently either, especially if there is also a right sidebar of images.

Weird things will occur.

At narrower browser or screen widths an image out of the row may appear far down the page after the end of the right sidebar of images.


Help Links