Page MenuHomePhabricator

Mode slideshow of gallery tag is not working in phone screens
Open, Needs TriagePublic

Description

System info in which it was found -
MediaWiki version = 1.30.0
This same problem also exists on Wikipedia website too (read below for examples), so I should say the problem still exists in newer versions too (Wikipedia running on 1.32.0)

Info about phone screen -
Extension used = MobileFrontend
Theme = MinervaNeue
Please note that Wikipedia also uses these tools to create the mobile pages.

Important - Slideshow works fine in Vector theme in desktop screens.

Problem description -

When the following code (as suggested by MediaWiki documentation) is used to create slideshow it gives a slideshow in desktop pages using the above mentioned softwares. But it shows thumbnails in a column on phone screens using the above tools. The slideshow works when you select vector theme in phone screens too. So, the problem might be in the MinervaNeue theme or MobileFrontend extension.

Code (the usual wikitext used to create slideshow; nothing special)-
<gallery mode="slideshow">
File:foo.bar
File:foo1.bar
</gallery>

Pages involved -
https://en.wikipedia.org/wiki/Help:Gallery_tag#Syntax
Check the slideshow in the above page in both desktop and mobile screen and you will see the difference.

Event Timeline

Restricted Application added a project: Multimedia. · View Herald TranscriptMay 17 2018, 2:45 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Note on that page: "When using, note that many parameters, specifically those relating to visual appearance may not apply or work as expected to certain skins (notably the Minerva skin used by the mobile site)"
This is one if those cases.

Im not sure what code is responsible for doing this but Minerva or Mobilefrontend is not explicitly turning this off.

TheDJ added a subscriber: TheDJ.May 18 2018, 8:09 AM

This is mediawiki.page.gallery.slideshow, which doesn't have target mobile.

@TheDJ let's try turning it on today and see what it looks like.

@Biologically it's written in OOUI so it looks like turning it on is not a problem but the module itself causes a severe reflow/restructure of the page (is jumpy) which I'd prefer for us to fix before enabling on mobile.

It also seems to break the media viewer on mobile, so we'd need to adjust that as well.

@Jdlrobson , thank you. I shall eagerly wait for these changes in the next updates.

Jdlrobson moved this task from Needs triage to MinervaNeue on the Mobile board.May 29 2018, 3:19 PM
Vvjjkkii renamed this task from Mode slideshow of gallery tag is not working in phone screens to stcaaaaaaa.Jul 1 2018, 1:09 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
AfroThundr3007730 renamed this task from stcaaaaaaa to Mode slideshow of gallery tag is not working in phone screens.Jul 1 2018, 5:05 AM
AfroThundr3007730 raised the priority of this task from High to Needs Triage.
AfroThundr3007730 updated the task description. (Show Details)
AfroThundr3007730 added a subscriber: Aklapper.

@Yuriy_kosygin has suggested at the English Wikivoyage that this should be the default gallery mode for most mobile/smartphone readers. It sounds like a reasonable approach (swipe through the images, rather than seeing tiny/illegible thumbs).

With a volunteer hat on: Does this also mean the end of the archaic image policy on Wikivoyage? https://en.wikivoyage.org/wiki/Wikivoyage:Image_policy#Minimal_use_of_images

ARR8 added a subscriber: ARR8.Mar 12 2019, 4:08 AM

@Whatamidoing-WMF Thank your add me, my thoughts are as you described!

@Jdlrobson That's right, but when reading on the mobile version, the image show is vertical (even if the picture is no more than 5), causing the reader need keep to scroll down to find what they want text. Taking the Scroll gallery is hopeful. Let the image scroll left and right.

Change 505286 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Gallery slideshow: Enable on mobile

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

Jdlrobson added a comment.EditedApr 25 2019, 11:10 AM

https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/505286/ enables this on mobile.
For an anonymous user JavaScript payload jumps from 155kb to 235kb. The module mediawiki.page.gallery.slideshow is loaded at the top of the page via a call to mw.loader.load(RLPAGEMODULES);. See T176211 and solution for Popups on why this is a problem. Aside from the performance consideration, this is a big jump for one feature. Enabling this as is sets a precedent and could easily result in mobile having a simple JavaScript payload to desktop. We can do better!

Firstly, It looks like enabling it is not enough - it also doesn't render due to the lazy loading images transform on mobile. Obviously that patch is not enough to make this work:

There is also flash of unstyled content on desktop, that should be taken care of. This kind of thing is a big problem on mobile, where connections tend to slow, and for readers who have begun reading before the page is fully loaded, they may be confused by such a repaint which would lose them their place in the article. Ideally the styles for this module should be loaded up front (or space reserved). My preference would be for the gallery code to be loaded once an arrow is clicked, however moving it off the critical JS path seems like a good first step.

https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/505286/ enables this on mobile.
For an anonymous user JavaScript payload jumps from 155kb to 235kb. The module mediawiki.page.gallery.slideshow is loaded at the top of the page via a call to mw.loader.load(RLPAGEMODULES);. See T176211 and solution for Popups on why this is a problem. Aside from the performance consideration, this is a big jump for one feature. Enabling this as is sets a precedent and could easily result in mobile having a simple JavaScript payload to desktop. We can do better!

I think loading that code later would be fine, would that be sufficient?

Firstly, It looks like enabling it is not enough - it also doesn't render due to the lazy loading images transform on mobile. Obviously that patch is not enough to make this work:

Ah, I didn't test with content below the fold.

There is also flash of unstyled content on desktop, that should be taken care of.

Yes, the current implementation falls back to the other gallery style for no-JS environments, but we could detect client JS environments and avoid the FOUC (or at least the height change).