Page MenuHomePhabricator

Images in tables are too small
Open, Needs TriagePublic

Description

Description

If you open a page of a football team (example "RSC Anderlecht") in the Wikipedia App, you got a list of players (section "Players"). Unfortunately, the images, which indicate the national team, are really really small (generated by {{Template:Football_squad_player}}). Note, that the flag above the table (generated through Template:Flagicon, like the flags in the table, too) looks fine).

Steps to reproduce

  1. Open the app for the english Wikipedia
  2. Search for a football team
  3. Scroll to the players section

Expected results

The national team flag image should be as big as needed to be good visible on a smartphone.

Actual results

The image is really really small and in fact not visible.

Environments observed

App version: 2.0.111-r-2015-09-16
Android OS versions: Android 5.
Device model: HTC One M9
Device language: english

Replication

https://en.m.wikipedia.org/wiki/R.S.C._Anderlecht#Players

Event Timeline

Florian created this task.Oct 22 2015, 7:57 PM
Florian raised the priority of this task from to Needs Triage.
Florian updated the task description. (Show Details)
Florian added a subscriber: Florian.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 22 2015, 7:57 PM
Restricted Application added a subscriber: StudiesWorld. · View Herald TranscriptNov 18 2015, 8:15 PM
TheDJ added a subscriber: TheDJ.Dec 1 2015, 1:01 PM

It's due to "max-width: 100% !important;" on the image.

That template's markup is horrendous for responsive layout. As it uses two separate tables in two <td>s, it doesn't take the overflow-x property for table overflows into account. Instead of fixing behavior around this markup, we should probably rather improve the template markup.

A first step would be to put min-width: 23px to the <td> which holds the .flagicon.

Is this task actionable in extension code? I'd like to remove Readers-Web-Backlog and mark with the proper extension or other project if it's really an extension responsibility or some other Phabricator-associated project's responsbility.

@dr0ptp4kt So from my research back three months it was a template issue, not an extension one. What would be the right place/the right tag to mark it with then?

TheDJ added a comment.EditedMar 17 2016, 1:44 PM

We could add the following rule to MediaWiki:Mobile.css

.flagicon img {
    min-width: 23px;
}

That will solve this one specific problem of flags, but the more general problem remains. Ideally again, this is an example of something that could be more easily fixed if we had T483: RfC: Allow styling in templates

[edit] proposed on en.wp

Where is the max-width coming from?

This happens because of the rule .content a > img {max-width: 100% !important; } which is what makes images responsive.

This particilar image is inside inline element (a, span)
It can be fixed by defining a width on flagicon on wiki
e.g.

.flagicon {
    width: 23px;
    display: inline-block;
}

Something to bring up on https://en.wikipedia.org/wiki/Template_talk:Flagicon ?

TheDJ added a comment.May 16 2017, 2:03 PM

I was thinking about this again, and maybe we should solve this with some JS post processing.

Something like:

$('table img').each( function( i, element ) {
  if( $(element).attr('width') >= 120 ) {
      $(element).css( 'min-width', 120 + 'px' );
  } else if ( $(element).attr('width') < 120 ) {
      $(element).css( 'min-width', $(element).attr('width') + 'px');
  }
} );

It would cause a reflow of some page content, but since it's limited to tables, it's probably going to be quite rare. It also won't work for elements which are in table layout, but not an actual table....
My cutoff at 120 is rather arbitrarily chosen, but can be refined.

He7d3r added a subscriber: He7d3r.Jun 22 2017, 1:00 PM

The line max-width: 100% !important; seems to make the images of the table to disappear from the table
https://pt.m.wikipedia.org/wiki/Lista_de_presidentes_do_Brasil#Lista_de_presidentes
once we scroll down to the next section and then scroll up again to the table:
https://imgur.com/VBuRbJ1

On Firefox's Inspector, disabling the CSS rule mentioned above restores the image and enabling it again, removes the images. More specifically, it seems to reduce the width/height of the image to zero, since I get

$('table img').first().width()
90

when the CSS rule is disabled and

$('table img').first().width()
0

when it is enabled.

TheDJ added a comment.EditedJul 27 2017, 7:08 PM

@He7d3r yes, that's expected (per the CSS spec) when you have such a sized element inside table layout. The problem is that you cannot easily know which images are inside an element using table layout. And if you want to have responsive image sizing (which requires max-width: 100% !important), then you have a problem.

The workarounds are:
1: Put explicit size on your table cells
or
2: Put min-width on your images

Unfortunately this is not an easy problem to fix if you cannot predict your content.

Jdlrobson updated the task description. (Show Details)Oct 22 2018, 6:51 PM
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptWed, Sep 11, 10:24 AM
Thbrown added a comment.EditedWed, Sep 11, 10:51 AM

I thought it was worth adding that the sporting nationality flag icons are now missing entirely for "Players" sections of all association football club articles viewed on the Wikipedia App (Android). The current situation now conflicts with this ticket's title that "the images are too small", so an update to the ticket title & description might be required. Thank you!

Be advised, this issue is a possible duplicate of: https://phabricator.wikimedia.org/T201884

See screenshot of same page, below:

@Thbrown: Cannot reproduce in a web browser when using mobile frontend. Issues with a mobile app should probably go into a specific task for an app. Thanks

Thanks @Aklapper
In that case, I think https://phabricator.wikimedia.org/T201884 covers the issue enough. I will close this ticket.

Thbrown closed this task as Resolved.Sat, Sep 14, 10:28 AM
Aklapper reopened this task as Open.Sat, Sep 14, 12:06 PM

Reopening because this task is still not about some mobile app.