維基百科

說明:Gallery tag

  關於根據內容調整的畫廊模版，請見「Template:畫廊」。

畫廊標籤可以以陣列或類似布局排列並顯示圖像，即圖像可以按行和列顯示，其原理是利用對<gallery>...</gallery>標籤的語法分析將Wikitext轉化為HTML。請注意，不同的屏幕和瀏覽器顯示尺寸或有可能影響可讀性。

參數

參數需要放在gallery，和HTML結束標籤之前，並且和前面間隔一個空格： <gallery 具体参数...>

  • mode=
    • traditional 默認模式
    • nolines 無邊框，減少圖像偏移，圖注居中
    • packed 圖像等高，圖注居中
    • packed-overlay 類似packed，但圖注會在透明浮框裡居中顯示
    • packed-hover 類似packed-overlay，但浮框僅在鼠標懸停時顯示
    • slideshow 幻燈片模式
  • caption= 在畫廊上方添加整體圖注
  • widths= 設定圖像固定寬度（單位：px）， mode=packed/packed-overlay/packed-hover/slideshow時無效
  • heights= 設定圖像固定高度（單位：px），mode=slideshow時無效
  • perrow= 每行圖片數量，mode=packed/packed-overlay/packed-hover/slideshow時無效，詳見使用說明
  • showfilename=yes 顯示圖片文件名
  • class= 例如class="class_name"
  • style= 例如style="css-attr1:xx;..."

mode=slideshow在2023年已失效

Galleries using both mode=slideshow and caption=... are broken as of mid January 2023. It has been reported at Wikipedia:Village pump (technical)#gallery mode="slideshow" broken and phab:T326990 with work on a fix. In the meantime, consider commenting out caption like this so it's easy to revert later:

<gallery mode=slideshow <!--caption=... (slideshow captions were broken in January 2023) -->

使用說明

  • 應該避免使用perrow參數，因為它不能根據圖像原有尺寸和長寬比例靈活布局，在移動設備或大屏設備上可能會導致圖像放縮失當。如果圖像適合固定比例網格布局時，例如圖像有「前/後」「低/中/高」等效對比及其它同類情況，最好使用這一參數。
  • 如果perrow省略，圖像寬度自會遵循自適應布局，自動根據用戶顯示寬帶決定每行圖片數量。
  • Omitting perrow is now the recommended default. Prior to MediaWiki 1.17, the default was 4.
  • 默認長寬120px，在<Gallery>...</Gallery>內的圖像並不遵循用戶偏好。
  • packed模式下，圖片總會自動調整大小，以更加有效利用顯示空間
  • 每一行都需要文件名，沒有必要加上文件前綴File:。
  • 圖注（英語：Photo caption）可選，在文件名後添加豎線 ("|")，在豎線右側寫圖注。
  • 一定、一定、一定要記得結尾的</gallery>標籤。
  • 使用時主要許多參數，尤其是和圖像外觀有關的參數，並不會在所有網站外觀下工作（特別是移動版的Minerva外觀）。

Loading in images

When loading in images using the Insert > Images and media, you will get the following: {{tsl|en|File:Name of file||thumb|Caption}}

In a gallery, you must remove all brackets ("[" or "]") (Except in wikilinks that are embedded within captions). You must also remove the |thumb. Finally, remove the File: prefix. You will be left with the following: Name of file|Caption

This is acceptable to the gallery. If you do not want to include a caption, remove |Caption.

語法

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>

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

Which gives:

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:

packed:

Changing <gallery> to <gallery mode=packed> produces a centered 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.

For lengthy captions under narrow images, it's probably best to add a heights= parameter to make the images somewhat larger, as the default small size, can lead to ugly images. 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.

Packed-hover:

This uses <gallery mode=packed-hover>. Hover your mouse over the images below. NOTE: This defaults to the behaviour of packed-overlay on the mobile site.

  •  
    The captions
  •  
    appear when
  •  
    you
  •  
    mouse over

擴展語法

Besides mode, the extended syntax is (see gallery tag help and hereafter for full list of parameters): 

<gallery caption="Sample gallery" widths="180px" heights="120px" >

Wiki.png|Captioned
Wiki.png|alt=The Wikipedia logo|Captioned with alt text
Wiki.png|{{tsl|en|Help:Contents/Links||Links}} can be put in captions.
Wiki.png|Full [[MediaWiki]]<br/>[[句法|syntax]] may now be used...
</gallery>

Which produces:

The widths= and perrow= parameters do nothing in the packed, packed-overlay, or packed-hover modes.

However, the heights= parameter can be extremely useful in these modes. This parameter specifies the initial height to render every image thumbnail, before images are possibly 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: 

<gallery mode=packed>

Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era {{tsl|en|photochrom||photochrom}}
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Thurston, the famous magician - East Indian Rope Trick.jpg|[[霍華·薩斯頓|Howard Thurston]] performing the [[印度通天绳|Indian rope trick]]
Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine ''[[Puck (雜誌)|Puck]]''.
</gallery>

gives:

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

<gallery mode=packed heights=200px>

Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era {{tsl|en|photochrom||photochrom}}
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Thurston, the famous magician - East Indian Rope Trick.jpg|[[霍華·薩斯頓|Howard Thurston]] performing the [[印度通天绳|Indian rope trick]]
Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine ''[[Puck (雜誌)|Puck]]''.
</gallery>

gives:

Other advice for using packed mode is to keep captions for particularly narrow images as short as is convenient.

Captions

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

<gallery mode=packed heights=150px style="text-align:left">

Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era {{tsl|en|photochrom||photochrom}}
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine ''[[Puck (雜誌)|Puck]]''.
</gallery>

gives:

  •  
    A Yeoman Warder, from a Victorian-era photochrom（英語：photochrom）
  •  
    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.

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

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

居中

To center a gallery use class="center": 

<gallery class="center">

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

Which gives:

The use of the perrow 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.

參見

 
MediaWiki有相關說明：Help:Images#Rendering a gallery of images
取自「https://zh.wikipedia.org/w/index.php?title=Help:Gallery_tag&oldid=75723359」