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

I like the <figure> inside <figure> option that @lzno proposed makes sense. Switching from inline to block styles makes the semantics clearer for accessibility, in terms of associating the caption with the image.

Discussed at tech forum and decided @Arlolra should prototype this in parsoid so that we can run visualdiff testing and see whether actual deployment is feasible.