Page MenuHomePhabricator

Images in tables are too small
Closed, ResolvedPublic



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).

Screenshot_2015-10-22-21-56-43.png (1×1 px, 197 KB)

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


Event Timeline

Florian raised the priority of this task from to Needs Triage.
Florian updated the task description. (Show Details)
Florian added a subscriber: Florian.

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?

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

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

Something to bring up on ?

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.

The line max-width: 100% !important; seems to make the images of the table to disappear from the table
once we scroll down to the next section and then scroll up again to the table:

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()

when the CSS rule is disabled and

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

when it is enabled.

@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
2: Put min-width on your images

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

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:

See screenshot of same page, below:

Flagicon_R.S.C_Anderlecht.jpg (2×1 px, 336 KB)

@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 covers the issue enough. I will close this ticket.

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

Jdlrobson added a subscriber: Porges.

To be clear, this has to be dealt with on wiki when it occurs. Without an image width or height or min widththe mobile site will not be able to determine what to do correctly