Movatterモバイル変換


[0]ホーム

URL:


Jump to content
WikipediaThe Free Encyclopedia
Search

Help:Gallery tag

From Wikipedia, the free encyclopedia
For the content-adaptive gallery template, seeTemplate:Gallery.
For the Wikipedia image use policy for galleries, seeWikipedia:Image use policy § Image galleries.
"H:G" redirects here. For the help page on getting started with Wikipedia seeHelp:Getting started.
This help page is ahow-to guide.
It explains concepts or processes used by the Wikipedia community. It is not one ofWikipedia's policies or guidelines, and may reflect varying levels ofconsensus.
Before creating a gallery, please review theimage use policy for galleries. In general, galleriesshould be avoided if images can be effectively presented alongside the surrounding text.

Agallery tag displays several pictures in an array or similar layout.

Galleries can display images formed into rows and columns by using the<gallery>...</gallery> (conversion of Wikitext to HTML) tag. Be aware that different screen sizes and browsers may affectaccessibility for some readers.

Attributes and values

[edit]

Attributes and values go after the wordgallery and a blank space, and before the ending angle bracket:<galleryattributes...>

  • mode=
    • traditional Default, effect is explained below
    • nolines No borders, less padding, captions centered under images
    • packed All images aligned by having same height, justified, captions centered under images
    • packed-overlay Like packed, but caption overlays the image, in a translucent box
    • packed-hover Like packed-overlay, but caption is only visible on hover (degrades gracefully on screen readers, and falls back to packed-overlay if a touch screen is used)
    • slideshow Slideshow
  • caption= Adds an overall caption (or title) above the gallery; for multiple words, enclose in double quotes
  • widths= Maximum image widths in pixels (has no effect if mode is set to packed, packed-overlay, packed-hover, or slideshow)
  • heights= Image heights in pixels (has no effect if mode is set to slideshow)
  • perrow= Number of images per row (has no effect if mode is set to packed, packed-overlay, packed-hover, or slideshow;See usage notes, below)
  • showfilename=yes Show each filename below the corresponding image
  • class= One or more class names separated with spaces and enclosed in double quotes
  • style= One or more CSS declarations separated with semicolons and enclosed in double quotes

Usage notes

[edit]
c
p
123456789101112
1011111111111
2002222222222
3010333333333
4001044444444
5012105555555
6000210666666
7011321077777
8002032108888
9010143210999
1000120432101010
110123154321011
12000020543210
13011131654321
14002242065432
15010303176543
16001014207654
17012125318765
18000230420876
19011341531987
20002002642098
21 – 60 pictures
Green: ideal, Yellow: under half full, Red: orphan
c
p
123456789101112
210101130531109
220012241642010
230123352753111
24000040306420
25011101417531
26002212528642
27010323630753
28001034041864
29012145152975
30000200263086
31011311374197
320020224052108
33010133516309
340012446274110
350123050385211
36000010140630
37011121251741
38002232362852
39010343473963
40001004504074
41012115615185
42000220026296
430113311373107
44002042248408
45010103350519
460012144616210
470123255727311
48000030603840
49011141014951
50002202125062
51010313236173
52001024347284
53012135458395
540002405604106
55011301671507
56002012002618
57010123113729
580012342248310
590123453359411
60000000446050
Green: ideal, Yellow: under half full, Red: orphan

Number of pictures on last row of gallery
with c columns (browser-dependent)
and p pictures (editor can control)

i.e. good number of pictures to have in a gallery:
1, 2, 3, 4, 6, 8, 12, 14, 18, 20, ...
  • Indiscriminate use of theperrow attribute is strongly discouraged, because it overrides flexible use of different display sizes andaspect ratios, ranging from mobile miniature to wide "cinema" screens. However, the attributeshould be used when afixed grid arrangement is appropriate, such as "before/after", "low/medium/high", or other systematic comparisons of images.
  • Ifperrow is omitted, the width is fluid: one row comprises as many images as will fit across the available width of the user's display, wrapping automatically to as many additional lines as needed.
  • Omittingperrowis now the recommended default. Prior toMediaWiki 1.17, the default wasperrow=4.
  • The default width and height are currently 120px. Images displayed by the<gallery>...</gallery> tag do not obey user viewing preferences.
  • Thepacked mode will automatically adjust image sizes to use available display space optimally.
  • Every line specifies an image file. TheFile: prefix is unnecessary.
  • Captions are optional and are separated from file name by avertical bar ("|").
  • A common mistake is to forget the closing</gallery> tag.
  • When using, note that many parameters, specifically those relating to visual appearance, may not apply or work as expected to certain skins (notably the Minerva skin used by the mobile site).

Inserting images

[edit]

When inserting images using the Insert > Images and media option, you will get the following:[[File:Name of file|thumb|Caption]]

In a gallery, you must remove all brackets ("[" or "]") (except in wikilinks embedded within captions). You must also remove all options except for the caption and|alt=. Note that|thumb,|upright,|right,|left,|center,|centre, andpx values arenot supported and may causeinvalid image option errors.

TheFile: prefix can be omitted, leaving you withName of file|Caption. However, it is helpful to include the prefix as an aid for quickly locating image specifiers in a gallery.

If you do not want to include a caption, remove|Caption as well.

Syntax

[edit]

There are several "modes" of galleries.

traditional:

"Traditional" mode is currently the default, and, as such, need not be specified. The basic syntax is:

<gallery>DetroitPublishingCo.-AYeomanoftheGuard(N.B.actuallyaYeomanWarder),fullrestoration.jpg|1Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|2Thurston,thefamousmagician-EastIndianRopeTrick.jpg|3JosephFerdinandKeppler-ThePiratePublisher-PuckMagazine-RestorationbyAdamCuerden.jpg|4</gallery>

Which gives:

  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4

If you want to make sure that any future changes to the default gallery mode will keep this style of gallery, you may specify "mode=traditional", similar to the examples below.

nolines:

By specifying the "nolines" mode parameter, the boxes are removed. Using the same syntax as before, but replacing<gallery> with<gallery mode=nolines> we get:

  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4

packed:

Changing<gallery> to<gallery mode=packed> produces acentered gallery, with slightly to significantly less space around each image (depending on its relative width and height), as shown below. It may relatively enlarge some images that were smaller in the above views.

  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4

For lengthy captions under narrow images, it's probably best to add aheights= parameter to make the images somewhat larger, as the default small size can lead to overly long stacks of caption text. See below.

Packed-overlay:This uses<gallery mode=packed-overlay> to produce captions overlaying the bottom of the image. The captions are probably best kept short.

  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4

Packed-hover:

This uses<gallery mode=packed-hover>.Hover your mouse over the images below.

  • The captions
    The captions
  • appear when
    appear when
  • you
    you
  • mouse over
    mouse over

Slideshow:

This uses<gallery mode=slideshow>.

  • The captions
    The captions
  • appear when
    appear when
  • you
    you
  • mouse over
    mouse over

Extended syntax

[edit]

Besides mode, the extended syntax is (seegallery tag help and hereafter on MediaWiki.org for full list of parameters):

<gallerycaption="Sample gallery"widths="180px"heights="120px">Wiki.png|CaptionedWiki.png|alt=TheWikipedialogo|CaptionedwithalttextWiki.png|[[Help:Contents/Links|Links]]canbeputincaptions.Wiki.png|Full[[MediaWiki]]<br/>[[syntax]]maynowbeused...</gallery>

Which produces:

  • Sample gallery
  • Captioned
    Captioned
  • The Wikipedia logo
    Captioned with alt text
  • Links can be put in captions.
    Links can be put in captions.
  • Full MediaWiki syntax may now be used...
    FullMediaWiki
    syntax may now be used...

Thewidths= andperrow= parameters do nothing in the packed, packed-overlay, or packed-hover modes, andclass="center" does nothing whenperrow= is used.

However, theheights= parameter can be extremely useful in these modes. This parameter specifies theinitial height to render every image thumbnail, before images arepossibly scaled up (keeping their size ratio) by JavaScript to fill rows; when needed the Javascript will query the image server to get resized thumbnails for several scales between 100% (the initial height specified) and about 125%. This gives good-looking galleries that can fill pages even when their size ratio are not exactly the same and allows using the actual area available for displaying on narrow mobile and large notebook/desktop/TV, and printing on various paper formats. (This mode also allows horizontally auto-scrollable galleries by embedding them in a large container within a scrollable container sized to fit the page width.)

For example, take the following:

<gallerymode="packed">DetroitPublishingCo.-AYeomanoftheGuard(N.B.actuallyaYeomanWarder),fullrestoration.jpg|AYeomanWarder,fromaVictorian-era[[photochrom]]Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|TheOfficialprogramofthe1913WomanSuffrageProcessionheldinWashington,D.C.Thurston,thefamousmagician-EastIndianRopeTrick.jpg|[[HowardThurston]]performingthe[[Indianropetrick]]JosephFerdinandKeppler-ThePiratePublisher-PuckMagazine-RestorationbyAdamCuerden.jpg|"ThePiratePublisher",asatireofcopyrightinfringementfromthemagazine''[[Puck(magazine)|Puck]]''.</gallery>

gives:

  • A Yeoman Warder, from a Victorian-era photochrom
    A Yeoman Warder, from a Victorian-eraphotochrom
  • The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
    The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
  • Howard Thurston performing the Indian rope trick
  • "The Pirate Publisher", a satire of copyright infringement from the magazine Puck.
    "The Pirate Publisher", a satire of copyright infringement from the magazinePuck.

As you can see, the narrowness of the image distorts the caption. This may easily be fixed by adding theheights= parameter, as such.

<gallerymode=packedheights=200px>DetroitPublishingCo.-AYeomanoftheGuard(N.B.actuallyaYeomanWarder),fullrestoration.jpg|AYeomanWarder,fromaVictorian-era[[photochrom]]Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|TheOfficialprogramofthe1913WomanSuffrageProcessionheldinWashington,D.C.Thurston,thefamousmagician-EastIndianRopeTrick.jpg|[[HowardThurston]]performingthe[[Indianropetrick]]JosephFerdinandKeppler-ThePiratePublisher-PuckMagazine-RestorationbyAdamCuerden.jpg|"ThePiratePublisher",asatireofcopyrightinfringementfromthemagazine''[[Puck(magazine)|Puck]]''.</gallery>

gives:

  • A Yeoman Warder, from a Victorian-era photochrom
    A Yeoman Warder, from a Victorian-eraphotochrom
  • The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
    The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
  • Howard Thurston performing the Indian rope trick
  • "The Pirate Publisher", a satire of copyright infringement from the magazine Puck.
    "The Pirate Publisher", a satire of copyright infringement from the magazinePuck.

To avoid long stacks of caption text keep captions for narrow images short.

Captions

[edit]

For all modes except traditional, captions are centered. To left-align the captions, specify the CSS declarationtext-align:left in thestyle= attribute:

<gallerymode=packedheights=150pxstyle="text-align:left">DetroitPublishingCo.-AYeomanoftheGuard(N.B.actuallyaYeomanWarder),fullrestoration.jpg|AYeomanWarder,fromaVictorian-era[[photochrom]]Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|TheOfficialprogramofthe1913WomanSuffrageProcessionheldinWashington,D.C.JosephFerdinandKeppler-ThePiratePublisher-PuckMagazine-RestorationbyAdamCuerden.jpg|"ThePiratePublisher",asatireofcopyrightinfringementfromthemagazine''[[Puck(magazine)|Puck]]''.</gallery>

gives:

  • A Yeoman Warder, from a Victorian-era photochrom
    A Yeoman Warder, from a Victorian-eraphotochrom
  • The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
    The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
  • The Pirate Publisher, a satire of copyright infringement from the magazine Puck.
    The Pirate Publisher, a satire of copyright infringement from the magazinePuck.

Centered captions: To center a caption when other options are ineffective, perhaps the most-reliable alternative is to use:

yourimage.jpg|<divstyle="text-align: center;">yourcaption</div>

Multi-line captions: To specify line breaks, add<br /> HTML tags, or use{{br}}. If you need a blank line, you can use{{br|2}}.

Center

[edit]

To center a gallery useclass="center":

<galleryclass="center">Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|1Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|2Thurston, the famous magician - East Indian Rope Trick.jpg|3Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|4</gallery>

Which gives:

  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4

The use of theperrow attribute will cause this to not work. Where a specific number of images per row is desired, use separate<gallery> elements. Centered galleries are the default for most variant gallery modes.

See also

[edit]
MediaWiki has documentation related to:Help:Images#Rendering a gallery of images
General
technical help
Special
page
-related
Wikitext
Links anddiffs
Media files: images,
videos and sounds
Other graphics
Templates and
Lua modules
Data structure
HTML andCSS
Customisation
and tools
Automated editing
Retrieved from "https://en.wikipedia.org/w/index.php?title=Help:Gallery_tag&oldid=1323301079"
Categories:
Hidden categories:

[8]ページ先頭

©2009-2025 Movatter.jp