Specs/HTML/2.0.0/Extensions/Gallery

The basic structure is as follows.

This gallery:

<gallery caption="caption1">
File:Image.jpg|caption2
</gallery>

Renders as:

<ul class="gallery mw-gallery-traditional" typeof="mw:Extension/gallery" data-mw='{"name":"gallery","attrs":{},"body":{}}'>
<li class="gallerycaption">... caption1 HTML ... </li>
<li class="gallerybox">
  <div class="thumb">... inline image HTML for Image.jpg ...</div>
  <div class="gallerytext">... caption2 HTML ... </div>
</li>
</ul>

packed-overlay and packed-hover modes add some additional structure around gallerytext

<div class="gallerytextwrapper"><div class="gallerytext">... caption2 HTML ...</div></div>

Attributes to support (on the extension tag):

• showfilename
• caption
• mode
• widths
• heights
• perrow

<gallery caption="caption1" showfilename="" mode="packed" perrow="4">...</gallery>

Renders as:

<ul ... data-mw='{"name":"gallery","attrs":{"showfilename":"","mode":"packed","perrow":"4"},"body":{}}'>... </ul>

A more involved example:

<gallery caption="Foo [[Main Page]]">
[[x|xx]]]]
File:Nonexistent.jpg|caption
Image:foobar.jpg|some '''caption''' [[Main Page]]
foobar.jpg
Image:foobar.jpg|Blabla|alt=This is a foo-bar.|blabla.
Image:foobar.jpg|link=Main_Page
</gallery>

Renders as:

<ul class="gallery mw-gallery-traditional" typeof="mw:Extension/gallery" about="#mwt3" data-mw='{"name":"gallery","attrs":{},"body":{}}'>
<li class="gallerycaption">Foo <a rel="mw:WikiLink" href="./Main_Page" title="Main Page">Main Page</a></li>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Error mw:Image"><a href="./File:Nonexistent.jpg"><img resource="./File:Nonexistent.jpg" src="./Special:FilePath/Nonexistent.jpg" height="120" width="120"/></a></figure-inline></div><div class="gallerytext">caption</div></li>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Image"><a href="./File:Foobar.jpg"><img resource="./File:Foobar.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" data-file-width="240" data-file-height="28" data-file-type="bitmap" height="14" width="120"/></a></figure-inline></div><div class="gallerytext">some <b>caption</b> <a rel="mw:WikiLink" href="./Main_Page" title="Main Page">Main Page</a></div></li>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Image"><a href="./File:Foobar.jpg"><img resource="./File:Foobar.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" data-file-width="240" data-file-height="28" data-file-type="bitmap" height="14" width="120"/></a></figure-inline></div><div class="gallerytext"></div></li>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Image"><a href="./File:Foobar.jpg"><img alt="This is a foo-bar." resource="./File:Foobar.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" data-file-width="240" data-file-height="28" data-file-type="bitmap" height="14" width="120"/></a></figure-inline></div><div class="gallerytext">blabla.</div></li>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Image"><a href="./Main_Page"><img resource="./File:Foobar.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" data-file-width="240" data-file-height="28" data-file-type="bitmap" height="14" width="120"/></a></figure-inline></div><div class="gallerytext"></div></li>
</ul>

A showfilename example:

<gallery showfilename="">
File:Foobar.jpg
Image:Foobar.jpg|some '''caption''' [[Main Page]]
</gallery>

Renders as:

<ul class="gallery mw-gallery-traditional" typeof="mw:Extension/gallery" about="#mwt3" data-mw='{"name":"gallery","attrs":{"showfilename":""},"body":{}}'>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Image"><a href="./File:Foobar.jpg"><img resource="./File:Foobar.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" data-file-width="240" data-file-height="28" data-file-type="bitmap" height="14" width="120"/></a></figure-inline></div><div class="gallerytext"><a href="./File:Foobar.jpg" class="galleryfilename galleryfilename-truncate" title="File:Foobar.jpg">File:Foobar.jpg</a></div></li>
<li class="gallerybox" style="width: 155px;"><div class="thumb" style="width: 150px; height: 150px;"><figure-inline typeof="mw:Image"><a href="./File:Foobar.jpg"><img resource="./File:Foobar.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" data-file-width="240" data-file-height="28" data-file-type="bitmap" height="14" width="120"/></a></figure-inline></div><div class="gallerytext"><a href="./File:Foobar.jpg" class="galleryfilename galleryfilename-truncate" title="File:Foobar.jpg">File:Foobar.jpg</a>some <b>caption</b> <a rel="mw:WikiLink" href="./Main_Page" title="Main Page">Main Page</a></div></li>
</ul>

Editing support

All the extension attributes, except caption, need to be edited via data-mw.

Parsoid provides the raw extension body text in body.extsrc and raw gallerycaption in data-mw='{"attrs":{"caption":""}}' for clients to edit in a raw-text editor. If these data-mw properties are provided in the edited HTML, Parsoid uses that to generate serialized output for the extension. These properties should be removed from data-mw to enable serializing the HTML content instead.

As of December 2016, this HTML editing support should be considered experimental while we work with existing clients like VisualEditor to test the accuracy of this feature.