Page MenuHomePhabricator

Consolidate image widening JavaScript
Closed, ResolvedPublic

Assigned To
Authored By
Mhurd
Mar 21 2017, 6:49 PM
Referenced Files
F7614906: IMG_0007.PNG
Apr 18 2017, 5:48 PM
F7614899: IMG_0008.PNG
Apr 18 2017, 5:48 PM
F7508284: Counties of England.PNG
Apr 12 2017, 4:25 PM
F7508286: Letters.PNG
Apr 12 2017, 4:25 PM
F7508285: Kingdom (biology).PNG
Apr 12 2017, 4:25 PM
F7508270: Food.PNG
Apr 12 2017, 4:25 PM
F7361020: food not wide.mov.gif
Apr 7 2017, 11:59 PM
F7362398: england.mov.gif
Apr 7 2017, 11:59 PM

Description

The iOS and Android apps use some similar JS for image widening.

Consolidate the 2 implementations in the "applib" repo.

Event Timeline

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

Here's consolidating image widening into the applib repo: (including fairly comprehensive tests!)
https://github.com/wikimedia/applib/pull/8

Here's the iOS patch for using the consolidated image widening from the applib repo:
https://github.com/wikimedia/wikipedia-ios/pull/1313

JMinor triaged this task as Medium priority.Apr 5 2017, 5:52 PM

Testing criteria:

( @ABorbaWMF - these may be good cases to add to the regression test list )

Examples of article images which SHOULD BE widened:

  1. Most non-icon images in an article, for example, the first couple images on 'enwiki > Food':
    • Before widening (tap image for animation):
      food not wide.mov.gif (720×400 px, 1 MB)
    • After widening (tap image for animation):
      food wide.mov.gif (720×400 px, 2 MB)

Examples of images in a article which SHOULD NOT BE widened:

  1. Side-by-side images:
    • On 'enwiki > Vincent van Gogh > Letters', the pictures of Vincent and Theo should still be side-by-side, that is, NOT widened (tap image for animation):
      van gogh.mov.gif (720×396 px, 2 MB)
  2. Imagemap images:
    • On 'enwiki > Kingdom (biology)', the colorful hierarchy image in the lead section should NOT be widened, that is, it should appear as it does in the animation below, centered and taking up about one-third of the screen's width (tap image for animation):
      kingdom.mov.gif (720×400 px, 805 KB)
  3. Images in tables:
    • On 'enwiki > Counties of England' the images in the first collapsed table should NOT be widened (tap image for animation):
      england.mov.gif (720×396 px, 901 KB)
Mhurd added a subscriber: cmadeo.

@cmadeo hey, skipping design review on this because it shouldn't change anything - we just moved where the code lives

Testing on iPhone 7 (iOS 10.2.1) and Wikipedia app 5.4.1 (1099). I looked at the photos @ABorbaWMF displayed above on my end,
Food is widened as expected

Food.PNG (1×750 px, 3 MB)
while Letters, Kingdom (biology) and Counties of England are not widened (again as expected) so this looks fixed.
Letters.PNG (1×750 px, 525 KB)

Kingdom (biology).PNG (1×750 px, 200 KB)
Counties of England.PNG (1×750 px, 210 KB)

Tested on an iPhone 7+ with iOS 10.3 and an iPad Mini 2 Retina with iOS 10.2 both running App 5,4,1,1099

I saw the same results as Nicholas on the iPhone. Everything seemed to be fine.

On the iPad it did not appear to widen the images as seen in the example for 'Food' below. Also, there was some strange alignment on the table images.

IMG_0008.PNG (2×1 px, 2 MB)
IMG_0007.PNG (2×1 px, 322 KB)