Page MenuHomePhabricator

Provide an rotating reader-interactive "slider" gallery mode
Closed, ResolvedPublic40 Estimated Story Points

Assigned To
Authored By
Jdforrester-WMF
Mar 1 2016, 1:35 AM
Referenced Files
F3865961: gallery-one-prominent.png
Apr 12 2016, 6:35 PM
F3865966: gallery-one-prominent-expanded.png
Apr 12 2016, 6:35 PM
F3865970: gallery-expandable-grey.png
Apr 12 2016, 6:35 PM
F3642827: mmv-gallery-thumbnail.png
Mar 16 2016, 11:41 AM
F3642417: mmv-gallery.png
Mar 16 2016, 9:49 AM
F3642151: one-image-gallery.gif
Mar 16 2016, 9:01 AM
F3642060: gallery-scroll.gif
Mar 16 2016, 7:57 AM
F3613972: Screen Shot 2016-03-11 at 2.53.49 pm.png
Mar 11 2016, 9:29 AM
Tokens
"Like" token, awarded by IKhitron."Love" token, awarded by JeanFred.

Description

This has been long-provided on Wikia (see https://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders ) and makes for a compact way to show a large number of potentially-interesting images without dominating an article/page. Provide this as "just" another <gallery> mode type with some clean simple styling.

Goals

  • Have an interactive element in the article
  • Surface more multimedia
  • Attractive to users
  • Ability to have large galleries. Currently editors limit the images in a gallery because it takes up too much space. For example-
  • Have a fixed size component on the page. For eg, hero slider or a thumbnail sized gallery. (related to above)
  • Possibly have auto generated galleries using–
    • Wikidata queries
    • Categories on Commons
  • Better mobile support
    • Mobile web shows images one after the other vertically. See F3613649.
    • Android app does the same but removes image borders and margins. See F3613655.

Examples in the wild

Possible layouts

Open issues

  • Making sure this works in bother the Parser and Parsoid, and is nicely backwards-compatible.
  • How should video and audio object work here?
  • Not sure what to do in no-JS or print mode; probably fall back to regular gallery operation?
  • What to do about captions? How relevant are they? What treatment would we give these?
  • A visual (as opposed to wikitext) editor inside VE for galleries coming soon.
    • What would VE edit mode look like for this mode? How could you drag the images to the right position if they're not all visible at once?

Event Timeline

From the examples at Wikia it seems that the ways to display a group of images they considered are based on two factors: (a) focus on one item at a time and (b) view part of the rest. These seem to serve two related goals: make the experience more immersive and deal with the volume of large galleries.

For example both the slider and the slideshow focus on one image at a time, but only one of them provides an overview of the next items. One aspect to consider is whether those models are isolated or it is possible to move through them (by user interaction, based on the viewport size, the number of items in the gallery, etc.). For example, a user can view/hide the overview of the rest of the elements. The examples on how to transition from a "slideshow" to a "slide" or a "gallery view":

slide-to-slider.png (255×740 px, 52 KB)

slide-to-gallery.png (259×718 px, 59 KB)

Based on the above model, another combination to deal with volume would be to show only a couple of rows for the current galleries with an option t access the rest of the items.

Regarding making the experience more immersive there are some interesting patterns among the experiments on interactive storytelling the New York times did some time ago. For example, full-width one-at-a-time scroll-down-based galleries where one image is shown as the description is scrolled over it to move to the next.

Comments from discussion about this:

Updated task description based on @Jdforrester-WMF's comment and my notes from the meeting.

The current gallery in mediawiki has a bunch of modes, I was wondering if we can re-use them in a way that keeps gallery creation pretty much the same and just adds functionality on top of it. For example, if we add delay and perScroll to the gallery attributes, we could effectively keep the same interface for auto-rotating galleries.

Consider the following gallery from Pablo Picasso's Crystal period:

Gallery with extra attributes
<gallery widths="170px" heights="180px" delay="2000" perscroll="5">
    File:Pablo Picasso, 1909, Femme assise (Sitzende Frau), oil on canvas, 100 x 80 cm, Staatliche Museen zu Berlin, Neue Nationalgalerie.jpg|1909, ''Femme assise (Sitzende Frau)'', oil on canvas, 100 × 80&nbsp;cm, [[Berlin State Museums|Staatliche Museen]], [[Neue Nationalgalerie]], Berlin
    File:Pablo Picasso, 1909-10, Figure dans un Fauteuil (Seated Nude, Femme nue assise), oil on canvas, 92.1 x 73 cm, Tate Modern, London.jpg|1909–10, ''Figure dans un Fauteuil (Seated Nude, Femme nue assise)'', oil on canvas, 92.1 × 73&nbsp;cm, [[Tate Modern]], London. This painting from the collection of [[Wilhelm Uhde]] was confiscated by the French state and sold at the [[Hôtel Drouot]] in 1921
    File:Pablo Picasso, 1910, Woman with Mustard Pot (La Femme au pot de moutarde), oil on canvas, 73 x 60 cm, Gemeentemuseum, The Hague. Exhibited at the Armory Show, New York, Chicago, Boston 1913.jpg|1910, ''Woman with Mustard Pot (La Femme au pot de moutarde)'', oil on canvas, 73 × 60&nbsp;cm, Gemeentemuseum, The Hague. Exhibited at the Armory Show, New York, Chicago, Boston 1913
    …
</gallery>

This could be rendered as it currently is on non-JS browsers, but for more capable browsers we could (animated, click to view):

gallery-scroll.gif (900×1 px, 759 KB)

(there could be chevrons on either side to let the user control scrolling)


A transition attribute would be nice too

This could work to replace single images as well. For example in the British museum article:

<gallery delay="1" transition="vertical" perscroll="1">
    File:British Museum, The Elgin Room, 1937.jpg, The [[Elgin Marbles|Elgin]] Room, 1937
    File:P8282318.1.JPG, Left to Right: [[Montagu House, Bloomsbury|Montagu House]], Townley Gallery and [[Robert Smirke (architect)|Sir Robert Smirke]]'s west wing under construction, July 1828
    File:Mauso03.JPG, The [[Mausoleum at Halicarnassus|Mausoleum of Halicarnassus]] Room, 1920s
</gallery>

one-image-gallery.gif (483×776 px, 142 KB)

(animated, click to view)

Clicking an image inside a gallery could open a Commons style (see F3613972) MultimediaViewer with the thumbnails of the images in the gallery on top.

mmv-gallery.png (900×1 px, 1 MB)

And as @Pginer-WMF pointed out, it would be helpful to have a thumbnail view, especially for larger galleries.

mmv-gallery-thumbnail.png (900×1 px, 1 MB)

I like the ideas in T128429#2125449 and T128429#2125586 a bunch. :-)

I'm not so sure about blurring into re-implementing (or, frankly, touching at all) MediaViewer; that's for Reading to change, and it's got its own baggage and things to change. I do like the idea of a 'contact sheet' view, but possibly distinct from the main thing?

I like the ideas in T128429#2125449 and T128429#2125586 a bunch. :-)

Yay!

I'm not so sure about blurring into re-implementing (or, frankly, touching at all) MediaViewer; that's for Reading to change, and it's got its own baggage and things to change. I do like the idea of a 'contact sheet' view, but possibly distinct from the main thing?

Hm. I understand, but the a lot of Multimedia things like this are reading .

Feedback from the Editing design meeting:
@Pginer-WMF:

  • We should research the use cases for different kinds of galleries and see how users interact with them. For example a hero image gallery would differ quite a bit from a gallery with very long captions.

@Volker_E :

Following up on @Prtksxna's comment, especially the original research by ND.edu dev on low click through rates of feature-links loaded sliders as page headers caught my attention back then.
But as @Prtksxna laid out clearly, it's about context and user expectation in such a feature and a gallery representation is a different task.

This would also obsolete https://de.wikipedia.org/wiki/Vorlage:Galerie (and in other languages: Q5849805), right? We should make sure that we'll be able to recreate that template in terms of the new gallery mode. :)

Based on the stated goals, I think there are three design principles we may want to follow:

  • Anticipate hidden content. When showing a fraction of the images, we may want to provide some cue that there are more images beyond those shown initially. Otherwise it's not clear whether the image shown has a whole collection of Picasso paintings behind it or not. In some of the examples above, animation is used to surface the fact that there is more content but that requires people to wait for it without further context.
  • Keep the user in control. Moving information away from the user automatically can be problematic. For example, if the user is reading a description about a painting and it just goes away, it may be frustrating. We could explore ways to better align the behaviour of the gallery to user intents (e.g., react to scrolling).
  • Support the (change of) activity. The focus of the user may change between text and images, and we want galleries to be useful in both cases. Showing 3 pictures of Picasso at a time can be helpful to avoid breaking the article with a huge gallery, but it may make it hard to have an overview of his paintings or look for a specific painting you had in mind.

I tried to illustrate some ideas based on the above principles in case they are useful:

Show one prominent item while surfacing the rest

gallery-one-prominent.png (768×1 px, 444 KB)

This approach provides one item in detail, surfaces some of the rest of the items in the gallery as thumbnails, and provides an access to the whole set if needed.

Users focusing in the text may appreciate having one detailed image that takes less space than the full gallery. Users interested in the rest of the images can access them by clicking on the thumbnails (or hover over them), or click on any to move through them using media viewer. Users interested in an overview can view all the thumbnails:

gallery-one-prominent-expanded.png (768×1 px, 524 KB)

In order to add dynamism, we can align image changes with the use of scroll: Once the gallery reaches the top of the page instead of moving out of the viewport, it can become sticky and move through different images as the user keeps scrolling (at least while the user is in the same text-intensive section).

I created a quick video to illustrate the idea.

Expandable gallery

gallery-expandable-grey.png (768×1 px, 538 KB)

Similar to the concept defined by Prateek at T128429#2125449, but including (a) explicit navigation to replace automatic transitions, (b) a reference of the current position using dots at the bottom and (c) an option to expand the gallery (which will show all items in-place as current galleries do).

Change 289632 had a related patch set uploaded (by Prtksxna):
Gallery: Add new slider mode

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

Change 289632 had a related patch set uploaded (by Prtksxna):
Gallery: Add new slider mode

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

Has there been any final decision on which direction to go with this?
I cannot find much detail in the ticket or the patchset indormation.

@Amire80, should a normal carousel like the bootstrap one, be different in RTL languages? Should the thumbnails be in reverse order?
If you could share an example of a good RTL carousel, it would be very helpful.

Change 289632 merged by jenkins-bot:
Gallery: Add new slider mode

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

Jdforrester-WMF renamed this task from Provide an auto-rotating reader-interactive "slider" gallery mode to Provide an rotating reader-interactive "slider" gallery mode.Jul 7 2016, 5:00 PM
Jdforrester-WMF closed this task as Resolved.
Jdforrester-WMF assigned this task to Prtksxna.
Jdforrester-WMF added a project: User-notice.
Jdforrester-WMF set the point value for this task to 40.

I just saw this, and think that the "Show one prominent item while surfacing the rest" from T128429#2200008 is stunningly beautiful and useful. I hope it's not too late to say "+1 for that direction!". :-)

I just saw this, and think that the "Show one prominent item while surfacing the rest" from T128429#2200008 is stunningly beautiful and useful. I hope it's not too late to say "+1 for that direction!". :-)

Thanks @Quiddity!

As I asked in T128429#2308441, I have not much idea on whether this idea has been considered for future steps or discarded by the team.

In order to avoid the idea to get lost in a closed Phab ticket in case someone is interested, I extracted it to its own ticket: T140242: Support galleries where one item is shown prominently while still showing the rest

Any demo or doc somewhere?

A very sad demo on beta. Documentation coming on Help:Images soon.

I just saw this, and think that the "Show one prominent item while surfacing the rest" from T128429#2200008 is stunningly beautiful and useful. I hope it's not too late to say "+1 for that direction!". :-)

Thanks @Quiddity!

As I asked in T128429#2308441, I have not much idea on whether this idea has been considered for future steps or discarded by the team.

In order to avoid the idea to get lost in a closed Phab ticket in case someone is interested, I extracted it to its own ticket: T140242: Support galleries where one item is shown prominently while still showing the rest

Thank you, Pau. We decided not to implement that at first to get some feedback on the first version, but it's definitely a possibility.

Thank you, Pau. We decided not to implement that at first to get some feedback on the first version, but it's definitely a possibility.

Thanks for the additional context, James.

Any demo or doc somewhere?

A very sad demo on beta.

Thanks!

Documentation coming on Help:Images soon.

Done, please review.

Quick feedback from there:

  • add a tooltip on the centered icon. Personal note: what is it for btw? Oh, I've seen it: it masks the gallery, but that's not close to it.
  • opening Mediaviewer when you click on a thumbnail is not intuitive. You expect to display that item on the slideshow
  • have a constant height between images would be appreciated - yo-yo effect

Looks good, but heights does not work - it's one very big height on viewing and one very small height on preview.

Sorry, but at the moment this seems to be unusable for the article namespace:

  • There is no way to set the widths/heights of the images - the gallery resizes randomly for every image
  • The gallery caption size is a way to big especially if you have small images
  • the extended mode (clicked on the center icon) is not very intuitive and stylish.
  • mode="slideshow" and perrow="..." causes vertical scrolling

Documentation coming on Help:Images soon.

Done, please review.

This is a bit premature. :-( We agreed we were going to seek input later, rather than just write it into the documentation as if it's final. This is not a good venue for feedback.

Sorry, but at the moment this seems to be unusable for the article namespace:

  • There is no way to set the widths/heights of the images - the gallery resizes randomly for every image

It's not perfect, indeed, @hgzh, but:

  • First time we have a slideshow that really works in chrome.
  • There is a way to make it one-sized, and small enough to use it in articles - just put it in one cell table with given width.
IKhitron rescinded a token.
IKhitron awarded a token.

Sorry, for this. Actions do not work well in mobile.

Documentation coming on Help:Images soon.

Done, please review.

This is a bit premature. :-( We agreed we were going to seek input later, rather than just write it into the documentation as if it's final.

Sorry, I didn't knew about that.

I've assumed it was final: the task is resolved, the system looks like stable, User-notice has been added to the task and there is no "please wait" in the comments. This is the combo for public announcement in Tech News and, by extension, anywhere else.

This is not a good venue for feedback.

Sure, my bad. I've created subtasks.

Ow, sorry, only noticed this now.

@Amire80, should a normal carousel like the bootstrap one, be different in RTL languages? Should the thumbnails be in reverse order?

Yes, definitely.

The circle that signifies that first image must be on the right end of the circles row.

If you could share an example of a good RTL carousel, it would be very helpful.

I will if I find something.