Page MenuHomePhabricator

Responsive gallery for Wikipedia mobile website and mobile apps (Android, iOS)
Open, Needs TriagePublic

Assigned To
None
Authored By
Kozuch
Apr 20 2021, 7:56 PM
Referenced Files
F34409001: Screenshot_2021-04-21-01-12-11-452_org.wikipedia.jpg
Apr 20 2021, 11:17 PM
F34409002: Screenshot_2021-04-21-01-13-19-394_org.wikipedia.jpg
Apr 20 2021, 11:17 PM
F34409003: Screenshot_2021-04-21-01-11-51-621_org.wikipedia.jpg
Apr 20 2021, 11:17 PM
F34408947: Screenshot_2021-04-21-00-13-59-419_org.wikipedia.jpg
Apr 20 2021, 10:20 PM
F34408946: Screenshot_2021-04-21-00-14-13-626_org.wikipedia.jpg
Apr 20 2021, 10:20 PM
F34408945: Screenshot_2021-04-21-00-11-41-894_org.wikipedia.jpg
Apr 20 2021, 10:20 PM
F34408865: Screenshot_2021-04-20-19-25-16-018_com.android.chrome.jpg
Apr 20 2021, 7:56 PM
F34408866: Screenshot_2021-04-20-19-25-35-898_com.android.chrome.jpg
Apr 20 2021, 7:56 PM
Tokens
"Like" token, awarded by Kozuch.

Description

The <gallery> tag has only one column in portrait orientation on mobile website. Landscape orientation has (fixed?) 4 columns. I think two fixed columns in portrait mode would be nice for traditional gallery mode. For "packed" mode images could be freely floating in portrait mode (multiple on row).

Other approach would be to rework the whole gallery for mobile view for it to be truly responsive. This would be the best case.

Mobile apps (Android tested only) - in portrait mode gallery produces has huge images (almost 100% screen width). Fix this the same way as mobile website. I think iOS app has the same problem (testing needed).

Screens for mobile website (Android):

Files - mode = traditional

Screenshot_2021-04-20-19-25-16-018_com.android.chrome.jpg (2×1 px, 75 KB)

Screenshot_2021-04-20-19-25-35-898_com.android.chrome.jpg (1×2 px, 116 KB)

Files - mode = packed

Screenshot_2021-04-20-19-27-32-707_com.android.chrome.jpg (2×1 px, 145 KB)

Screenshot_2021-04-20-19-28-00-589_com.android.chrome.jpg (1×2 px, 278 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Adding screenshots from Android Wikipedia app from this page: https://cs.m.wikipedia.org/wiki/N%C3%A1rodn%C3%AD_park_%C4%8Cesk%C3%A9_%C5%A0v%C3%BDcarsko

Bugs:

  • image width 100% (make responsive)
  • One image is different - same format as in classic/mobile website (different size)
  • images blurred (probably upscaled thumbnail)

Screenshot_2021-04-21-00-13-59-419_org.wikipedia.jpg (2×1 px, 890 KB)

Screenshot_2021-04-21-00-14-13-626_org.wikipedia.jpg (2×1 px, 688 KB)

Screenshot_2021-04-21-00-11-41-894_org.wikipedia.jpg (2×1 px, 719 KB)

New findings for Android app. After loading in portrait orientation the gallery has 100% width. Changed orientation to landscape and back to portrait again - the width changed.

Screenshot_2021-04-21-01-11-51-621_org.wikipedia.jpg (2×1 px, 578 KB)

Screenshot_2021-04-21-01-12-11-452_org.wikipedia.jpg (1×2 px, 342 KB)

Screenshot_2021-04-21-01-13-19-394_org.wikipedia.jpg (2×1 px, 524 KB)

I found out that the behavior above applies not only to image galleries but also to normal standalone images throughout the whole article.