Module:Gallery

This Lua module is used on many pages and changes may be widely noticed. Test changes in the module's /sandbox or /testcases subpages, or in your own module sandbox. Consider discussing changes on the talk page before implementing them.

This module depends on the following other modules:

Module:Gallery (sandbox)

This template provides advanced gallery building functionality (fine-tuned formatting control). For creating generic galleries, use the Gallery tag.

This template displays a gallery of images in an array, left-to-right in rows. Global parameters |width= and |height= control the size of all images in the gallery. The number of images per row is based upon the image width parameters and the width of the screen. The number of images per row can change when the user resizes the window.

For style guidelines about where galleries are appropriate, see Wikipedia:Image use policy § Image galleries.

Blank syntax with all parameters

{{Gallery
| title        = 
| align        =
| footer       =
| style        =
| state        =
| height       =
| width        =
| perrow       =
| mode         = 
| whitebg      = 
| noborder     =
| captionstyle =
| File:
 | Write a caption here
 | alt1=
| File:
 | Write a caption here
 | alt2=
| File:
 | Write a caption here
 | alt3=
| File:
 | Write a caption here
 | alt4=
| File:
 | Write a caption here
 | alt5=
}}

Parameters

For each image

Specify a line of the following form for each image.

|File:Filename |Caption |altn=alternative text

Note that the file name and the caption do not need parameter names, but each alt text parameter must be preceded by |altn=.

Where:

|File:Filename – the image's file name. Either File: or Image: prefix may be used

|Caption – the caption under the image; see Wikipedia:Manual of Style/Captions

|altn= – alt attribute: |alt1= for the first image, |alt2= for the second image, etc

alternative text – the alternative text for the image, used by visually impaired or other readers who cannot see the image clearly. If omitted, the image's alt text will be blank.

Optional parameters

These parameters apply to the entire gallery:

|title= – The gallery's title

|align= – The alignment of the gallery on the page, left (default), center, or right; ignored when |state= is set

|footer= – Small, right-aligned text below the images

|style= – CSS style directives for the whole gallery (see Help:Cascading Style Sheets)

|state= – Sets the default state of collapsible galleries; use |state=expanded or |state=collapsed; collapsible galleries occupy the full page width

|mode= – Sets the mode used by the inner gallery tag. Common values include |mode=packed and |mode=nolines (see Help:Gallery tag for more options)

These parameters apply to all of the images in the gallery:

|noborder= – Cancel the border surrounding the images, use |noborder=yes to set.

|whitebg= – Cancel the white background after the images, use |whitebg=no to set.

|height= – Maximum height of each image. If this parameter is not included, |height= defaults to 180 pixels. Use a simple number here, e.g., Ta‌̱mpi‌̱let:Xt, without a units designation, e.g., Ta‌̱mpi‌̱let:!xt.

|width= – Maximum width of each image, default is 180 pixels. Use a number here, e.g., Ta‌̱mpi‌̱let:Xt, without units, e.g., Ta‌̱mpi‌̱let:!xt.

|perrow= – Number of images to display per row

|captionstyle= – CSS style directives for the captions (see Help:Cascading Style Sheets)

The image's original ratio of width to height cannot be modified by |width= or |height= – a rectangular image will not be made square if |width= and |height= are set to the same value.

Examples

{{Gallery
|title=Cultural depictions of George Washington
|width=160 | height=170
|align=center
|footer=Example 1
|File:Federal Hall NYC 27.JPG 
 |Statue of Washington outside [[Federal Hall National Memorial]] in [[New York City]], overlooking [[Wall Street]]
 |alt1=Statue facing a city building with Greek columns and huge U.S. flag
|File:Mount Rushmore2.jpg 
 |Construction of Washington portrait at [[Mount Rushmore]], c. 1932
 |alt2=Profile of stone face on mountainside, with 3 workers.
|File:2006 Quarter Proof.png 
 |Washington is commemorated on a [[Quarter (United States coin)|quarter]].
 |alt3=Shiny silver coin with profile of Washington bust. 
|File:George Washington Presidential $1 Coin obverse.png 
 |Washington on a [[dollar coin (United States)|dollar coin]]
 |alt4=Gold coin with bust of Washington facing slightly left
}}

Cultural depictions of George Washington

Statue of Washington outside Federal Hall National Memorial in New York City, overlooking Wall Street
Construction of Washington portrait at Mount Rushmore, c. 1932
Washington is commemorated on a quarter.
Washington on a dollar coin

{{Gallery
|title=Cultural depictions of George Washington
|width=120 |height=100
|align=center
|footer=Example 2a
|File:Federal Hall NYC 27.JPG
 |Statue of Washington outside [[Federal Hall National Memorial]] in [[New York City]], overlooking [[Wall Street]]
 |alt1=Statue facing a city building with Greek columns
|File:Mount Rushmore2.jpg
 |Work on Washington portrait at [[Mount Rushmore]], c. 1932
 |alt2=Profile of stone face on mountainside, with 3 workers.
|File:2006 Quarter Proof.png
 |Washington on a [[Quarter (United States coin)|quarter]]
 |alt3=Shiny silver coin with profile of Washington bust. 
|File:United_States_one_dollar_bill,_obverse.jpg
 |[[United States one-dollar bill|U.S. one-dollar bill]]
 |alt4=Front side of U.S. dollar bill, with Washington portrait in center.
|File:George Washington Presidential $1 Coin obverse.png
 |Washington on a [[dollar coin (United States)|dollar coin]]
 |alt5=Gold coin with bust of Washington facing left
}}

Cultural depictions of George Washington

Statue of Washington outside Federal Hall National Memorial in New York City, overlooking Wall Street
Work on Washington portrait at Mount Rushmore, c. 1932
Washington on a quarter
U.S. one-dollar bill
Washington on a dollar coin

Cultural depictions of George Washington

Statue of Washington outside Federal Hall National Memorial in New York City, overlooking Wall Street
Work on Washington portrait at Mount Rushmore, c. 1932
Washington on a quarter
U.S. one-dollar bill – the caption here is still constrained by the width parameter.
Washington on a dollar coin

TemplateData

Place this template on an article or user page to create a gallery of images on that page along with captions. Anyone may place this template.

Template parameters[Edit template data]
Parameter		Description	Type	Status
title	`title`	Title for the overall gallery Example Pictures of chickens	String	suggested
align	`align`	Alignment of the gallery on the page; possible values include left, right, and center Suggested values `left` `center` `right` Default left Example center	String	optional
footer	`footer`	Creates a footer which will appear in the lower right corner of the overall gallery, in small font, of whatever text the editor placing it wishes to put there Example Early works	String	optional
CSS styling	`style`	Allows custom Cascading Style Sheets styling to be added to the gallery block. Example border: 1px solid black;	String	optional
captionstyle	`captionstyle`	This parameter allows an editor to utilize Cascading Style Sheet code for caption	Unknown	optional
state	`state`	This parameter allows the editor to determine whether or not the gallery will initially appear as either expanded or collapsed for readers Suggested values `expanded` `collapsed` Default expanded Example collapsed	String	optional
height	`height`	determines the maximum height for any image within the gallery Default 180 Example 100	Number	optional
width	`width`	Analogous to height parameter; sets maximum width for any image in the gallery Default 180 Example 120	Number	optional
mode	`mode`	Sets the mode used by the inner gallery tag, see Help:Gallery tag for more options Suggested values `traditional` `nolines` `packed` `packed-overlay` `packed-hover` `slideshow` Default traditional	String	optional
noborder	`noborder`	Cancel the border surrounding the images Default no Example yes	String	optional
whitebg	`whitebg`	Used to disable the white background in the inner gallery tag Default yes Example no	Boolean	optional

Tracking categories

Help:Gallery tag
{{Cleanup gallery}}, to mark unencyclopedic image galleries
{{Gallery layout}}, to apply Gallery-style layout to arbitrary blocks of content such as template output
{{Gallery items}}
{{Image array}}
{{Image frame}}
{{Multiple image}}
{{Photomontage}}
{{Stack}}, where images etc. can be stacked down right hand side avoiding spacing and floating problems

-- This module implements {{gallery}}

local p = {}

local templatestyles = 'Module:Gallery/styles.css'
local yesno = require('Module:Yesno')

local function trim(s)
	return mw.ustring.gsub(mw.ustring.gsub(s, '%s', ' '), '^%s*(.-)%s*$', '%1')
end

local tracking, preview

local function checkarg(k,v)
	if k and type(k) == 'string' then
		if k == 'align' or k == 'state' or k == 'style' or k == 'title' or
			k == 'width' or k == 'height' or k == 'whitebg' or
			k == 'mode' or k == 'footer' or k == 'perrow' or k == 'noborder' or
			k:match('^alt%d+$') or k:match('^%d+$') then
			-- valid
		elseif k == 'captionstyle' then
			if not v:match('^text%-align%s*:%s*center[;%s]*$') then
				table.insert(tracking, '[[Category:Pages using gallery with the captionstyle parameter]]')
			end
		else
			-- invalid
			local vlen = mw.ustring.len(k)
			k = mw.ustring.sub(k, 1, (vlen < 25) and vlen or 25) 
			k = mw.ustring.gsub(k, '[^%w%-_ ]', '?')
			table.insert(tracking, '[[Category:Pages using gallery with unknown parameters|' .. k .. ']]')
			table.insert(preview, '"' .. k .. '"')
		end
	end
end

function p.gallery(frame)
	-- If called via #invoke, use the args passed into the invoking template.
	-- Otherwise, for testing purposes, assume args are being passed directly in.
	local origArgs = (type(frame.getParent) == 'function') and frame:getParent().args or frame
    
    -- ParserFunctions considers the empty string to be false, so to preserve the previous 
    -- behavior of {{gallery}}, change any empty arguments to nil, so Lua will consider
    -- them false too.
    local args = {}
    tracking, preview = {}, {}
    for k, v in pairs(origArgs) do
    	if v ~= '' then
    		args[k] = v
    		checkarg(k,v)
    	end
	end
	
	if (args.mode or '') == 'packed' and (args.align or '') == '' then
		args.align = 'center'
	end

	local tbl = mw.html.create('div')
	tbl:addClass('mod-gallery')
    
	if args.state then
		tbl
			:addClass('mod-gallery-collapsible')
			:addClass('collapsible')
			:addClass(args.state)
	end
	
	if args.style then
		tbl:cssText(args.style)
	else
		tbl:addClass('mod-gallery-default')
	end
	
	if args.align then
		tbl:addClass('mod-gallery-' .. args.align:lower())
	end

	if args.title then
		tbl:tag('div')
			:addClass('title')
				:tag('div')
					:wikitext(args.title)
	end
	
	local gargs = {}
	gargs['class'] = 'nochecker' .. (args.noborder and '' or ' bordered-images')
	gargs['widths'] = tonumber(args.width) or 180
	gargs['heights'] = tonumber(args.height) or 180
	gargs['style'] = args.captionstyle
	gargs['perrow'] = args.perrow
	gargs['mode'] = args.mode
	if yesno(args.whitebg or 'yes') then
		gargs['class'] = gargs['class'] .. ' whitebg'
	end
	
	local gallery = {}
	
	local imageCount = math.ceil(#args / 2)

    for i = 1, imageCount do
		local img = trim(args[i*2 - 1] or '')
		local caption = trim(args[i*2] or '')
		local alt = trim(args['alt' .. i] or '')
		if img ~= '' then
			table.insert(gallery, img .. (alt ~= '' and ('|alt=' .. alt) or '') .. '|' .. caption )
		end
	end
	
	tbl:tag('div')
		:addClass('main')
		:tag('div')
			:wikitext(
				frame:extensionTag{ name = 'gallery', content = '\n' .. table.concat(gallery,'\n'), args = gargs}
				)
    
	if args.footer then
		tbl:tag('div')
			:addClass('footer')
				:tag('div')
					:wikitext(args.footer)
	end

	local trackstr = (#tracking > 0) and table.concat(tracking, '') or ''
	if #preview > 0 then
		trackstr = require('Module:If preview')._warning({
			'Unknown parameters ' .. table.concat(preview, '; ') .. '.'
		}) .. trackstr
	end
	
	return frame:extensionTag{ name = 'templatestyles', args = { src = templatestyles} } .. tostring(tbl) .. trackstr
end

return p

Blank syntax with all parameters

Parameters

For each image

Optional parameters

Examples

TemplateData

Tracking categories

See also