Page MenuHomePhabricator

Decide on a structure for galleries
Open, MediumPublic

Description

As an example,

<gallery caption="123">
File:Test.png|456
File:Test.jpg|678
</gallery>

Currently, galleries look like as follows,

<ul class="gallery mw-gallery-traditional" typeof="mw:Extension/gallery" data-mw='{"name":"gallery","attrs":{},"body":{}}'>
<li class="gallerycaption">123</li>
<li class="gallerybox">
<div class="thumb"><figure-inline typeof="mw:Image"><a href="./File:Test.png"><img resource="./File:Test.png" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/95px-PNG_Test.png" data-file-width="3120" data-file-height="3920" data-file-type="bitmap" height="120" width="95" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/143px-PNG_Test.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/190px-PNG_Test.png 2x"/></a></figure-inline></div>
<div class="gallerytext">456</div>
</li>
<li class="gallerybox">
<div class="thumb"><figure-inline typeof="mw:Image"><a href="./File:Test.jpg"><img resource="./File:Test.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/95px-JPG_Test.jpg" data-file-width="3120" data-file-height="3920" data-file-type="bitmap" height="120" width="95" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/143px-JPG_Test.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/190px-JPG_Test.jpg 2x"/></a></figure-inline></div>
<div class="gallerytext">678</div>
</li>
</ul>

In that structure, the media are inline and maybe the whole thing can be considered a figure. To play around with that idea a little, it could look like,

<figure typeof="mw:Extension/gallery" data-mw='{"name":"gallery","attrs":{},"body":{}}'>
<ul class="gallery mw-gallery-traditional">
<li class="gallerybox">
<div class="thumb"><figure-inline typeof="mw:Image"><a href="./File:Test.png"><img resource="./File:Test.png" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/95px-PNG_Test.png" data-file-width="3120" data-file-height="3920" data-file-type="bitmap" height="120" width="95" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/143px-PNG_Test.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/190px-PNG_Test.png 2x"/></a></figure-inline></div>
<div class="gallerytext">456</div>
</li>
<li class="gallerybox">
<div class="thumb"><figure-inline typeof="mw:Image"><a href="./File:Test.jpg"><img resource="./File:Test.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/95px-JPG_Test.jpg" data-file-width="3120" data-file-height="3920" data-file-type="bitmap" height="120" width="95" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/143px-JPG_Test.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/190px-JPG_Test.jpg 2x"/></a></figure-inline></div>
<div class="gallerytext">678</div>
</li>
</ul>
<figcaption class="gallerycaption">123</figcaption>
</figure>

However, the outcome of the RFC (T251641#6212416) to switch from <figure-inline> to <span> for inline media was,

with the condition that we switch to <figure>s in galleries

The argument was that galleries can be considered presentational and structured as a list of figures. That would be,

<ul class="gallery mw-gallery-traditional" typeof="mw:Extension/gallery" data-mw='{"name":"gallery","attrs":{},"body":{}}'>
<li class="gallerycaption">123</li>
<li class="gallerybox">
<figure typeof="mw:Image"><a href="./File:Test.png"><img resource="./File:Test.png" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/95px-PNG_Test.png" data-file-width="3120" data-file-height="3920" data-file-type="bitmap" height="120" width="95" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/143px-PNG_Test.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/190px-PNG_Test.png 2x"/></a>
<figcaption class="gallerytext">456</figcaption>
</figure>
</li>
<li class="gallerybox">
<figure typeof="mw:Image"><a href="./File:Test.jpg"><img resource="./File:Test.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/95px-JPG_Test.jpg" data-file-width="3120" data-file-height="3920" data-file-type="bitmap" height="120" width="95" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/143px-JPG_Test.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/28/JPG_Test.jpg/190px-JPG_Test.jpg 2x"/></a>
<figcaption class="gallerytext">678</figcaption>
</figure>
</li>
</ul>

The first list item being the gallery caption (<li class="gallerycaption">123</li>) is a little distasteful though.

Event Timeline

Arlolra triaged this task as Medium priority.
Arlolra moved this task from Needs Triage to Current & Upcoming Work on the Parsoid board.

I would say the whole structure is in fact a figure encapsulating a list of figures. Roughly:

<figure class=gallery>
  <figcaption class=gallerycaption>
  <ul>
    <li>
      <figure class=image>
        <img>
        <figcaption class=imagecaption>
...

This most matches the semantics to me.

Change 723622 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@master] [WIP] Match gallery output with Parsoid

https://gerrit.wikimedia.org/r/723622

Change 723622 merged by jenkins-bot:

[mediawiki/core@master] Match gallery output with Parsoid

https://gerrit.wikimedia.org/r/723622

Change 881025 had a related patch set uploaded (by Jdlrobson; author: Bartosz Dziewoński):

[mediawiki/core@master] [wip] Gallery: Improve gallery for mobile (take 2)

https://gerrit.wikimedia.org/r/881025

Change 886403 had a related patch set uploaded (by Jdlrobson; author: Arlolra):

[mediawiki/skins/MinervaNeue@master] Make figure styling more specific to thumbs

https://gerrit.wikimedia.org/r/886403

Change 886403 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Make figure styling more specific to thumbs

https://gerrit.wikimedia.org/r/886403

Change 881025 abandoned by Jdlrobson:

[mediawiki/core@master] Gallery: Rewrite

Reason:

Not working on this currently as have too much on my plate :-( cc @thedj who also said he was interested in rewriting this.

https://gerrit.wikimedia.org/r/881025