Articles by alphabetic order
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
 Ā Ī Ñ Ś Ū Ö Ō
1 2 3 4 5 6 7 8 9 0


Help:Gallery

From Chinese Buddhist Encyclopedia
Jump to navigation Jump to search

How to make gallery:

1 option

In edit mode click Advanced and there is Insert and after that little icon representing picture. Click that to get this example. You can continue this list as big as you want

<gallery>
0CLwH02SKo.jpg|Caption Text
0f7ce.jpg|Caption2 Text
</gallery>

Result:

Different modes

mode="packed-hover"

<gallery mode="packed-hover">
0CLwH02SKo.jpg|Caption Text
0f7ce.jpg|Caption2 Text
</gallery>

Result:

mode="traditional"

<gallery mode="traditional">
0CLwH02SKo.jpg|Caption Text
0f7ce.jpg|Caption2 Text
</gallery>

Result:

mode="packed"

<gallery mode="packed">
0CLwH02SKo.jpg|Caption Text
0f7ce.jpg|Caption2 Text
</gallery>

Result:

mode="packed-overlay"

<gallery mode="packed-overlay">
0CLwH02SKo.jpg|Caption Text
0f7ce.jpg|Caption2 Text
</gallery>

Result:

Optional gallery attributes

<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
<gallery widths=60px heights=60px perrow=7 caption="Gallery Text to Add">
0CLwH02SKo.jpg|Caption Text
0f7ce.jpg|Caption2 Text
10cv74 n.jpg
108 Mara.jpg
0b-800wi.jpg
03 diamond sutra.jpg
024 n.jpg
00x224.jpg|Caption
</gallery>

Result:

2nd Option

2nd Option is to use tables to allign pictures

  • |- Is line break as you see there are 4 pictures in row and then |-
  • | New column in table
{|
|-
| [[File:0b-800wi.jpg|thumb|250px|Caption goes here]]
| [[File:024 n.jpg|thumb|250px|]]
| [[File:00x224.jpg|thumb|250px|]]
| [[File:10cv74 n.jpg|thumb|250px|]]
|-
| [[File:0CLwH02SKo.jpg|thumb|250px|]]
| [[File:03 diamond sutra.jpg|thumb|250px|]]
|}

Result:

Caption goes here
024 n.jpg
00x224.jpg
10cv74 n.jpg
0CLwH02SKo.jpg
03 diamond sutra.jpg

Allign the top and centre the table

  • style="margin: 1em auto 1em auto;" for centering the table
  • style="vertical-align:top;" Allign the top. Uses righ, left, top, bottom
{| style="margin: 1em auto 1em auto;"
|-style="vertical-align:top;"
| [[File:0b-800wi.jpg|thumb|250px|]]
| [[File:024 n.jpg|thumb|250px|]]
| [[File:00x224.jpg|thumb|250px|]]
| [[File:10cv74 n.jpg|thumb|250px|]]
|- style="vertical-align:bottom;"
| [[File:0CLwH02SKo.jpg|thumb|250px|]]
| [[File:03 diamond sutra.jpg|thumb|250px|]]
|}

Result:

0b-800wi.jpg
024 n.jpg
00x224.jpg
10cv74 n.jpg
0CLwH02SKo.jpg
03 diamond sutra.jpg

See Also