Page MenuHomePhabricator

Consider adding .mw-wiki-logo {background-size: 135px} to skin CSS
Closed, ResolvedPublic

Description

Often people use an incorrectly sized logo for $wgLogo. We should consider adding to skin CSS something like .mw-wiki-logo {background-size: contain} .mw-wiki-logo {background-size: 135px} in order that the logo be scaled appropriately.

Downside, is users might not see brokeness, and then not fix their logo size, which is the ideal outcome, as too big a logo is bad for bandwidth.

Event Timeline

Actually we probably don't want background-size:contain, because the a.mw-wiki-logo has a size of 160x160, but logos are supposed to be 135x135 (I think).

So maybe:

.mw-wiki-logo {background-size: 135px 135px}

Or if we want to preserve aspect ratio (do we? I have no idea. Probably. This only works properly if the image is wider than it is high.)

.mw-wiki-logo {background-size: 135px auto}
Bawolff renamed this task from Consider adding .mw-wiki-logo {background-size: contain} to skin CSS to Consider adding .mw-wiki-logo {background-size: 135px} to skin CSS.Sep 7 2018, 5:53 PM
Bawolff updated the task description. (Show Details)

Or if we want to preserve aspect ratio (do we? I have no idea. Probably. This only works properly if the image is wider than it is high.)

Unless you’re a fan of this new look, it would probably be wise to preserve aspect ratio :-)

interesting. TIL, that not all the logos are the same size. The docs (in includes/DefaultSettings.php) do say The logo size should be 135x135 pixels but guess that's not true in practise.

Hmm, Looking through them, they are not even all the same width. astwikiquote.png is 150px. The extremes seem to be trwikiquote.png at 90x134 and arbcom_enwiki.png at 157x160

various logo sizes
90x134
100x134
106x128
113x130
117x135
118x97
120x117
120x120
120x130
120x37
121x155
123x149
123x151
123x153
123x154
124x135
124x150
124x152
124x154
124x155
125x129
125x139
125x155
125x160
128x121
128x128
128x139
128x155
129x147
129x158
129x85
130x140
132x149
133x155
133x160
134x130
134x154
135x100
135x101
135x103
135x104
135x108
135x111
135x114
135x121
135x123
135x124
135x125
135x126
135x127
135x128
135x130
135x131
135x133
135x134
135x135
135x139
135x140
135x142
135x143
135x147
135x149
135x150
135x152
135x155
135x160
135x161
135x164
135x165
135x167
135x169
135x171
135x174
135x175
135x183
135x95
135x99
136x139
136x155
136x165
140x135
140x145
140x180
144x144
147x140
148x113
148x148
149x135
150x150
150x153
150x154
150x155
150x172
150x188
151x151
152x145
152x152
153x153
154x115
155x114
155x135
155x151
155x155
156x110
157x160

So looks like this is probably a bad idea, as there are a wide variety of logo sizes in use in practise even in Wikimedia, let alone third parties.

hi i want to solve this task ,can anyone give me the link of the repository file

@Ayush8745: Please look at the "Tags" in the side bar to see projects related to tasks. In this case, https://phabricator.wikimedia.org/project/profile/155/ says "This project is part of the core MediaWiki software itself" (which means mediawiki/core and https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker ).

@Ayush8745: a requirement for this task is to ensure all logos have a 135px width size, ie resize logos here: https://github.com/wikimedia/operations-mediawiki-config/tree/master/static/images/project-logos

Logos are optimized after resize (I'm not sure what the current optimization is, previously it was optipng -o 7)

This should get the feedback / approval from the wiki community. A good way to do that is to open a topic in the village pump.

This is probably more in the scope of T232012.

Krinkle claimed this task.
Krinkle added a subscriber: Krinkle.

This issue was already solved a year or so ago. The CSS for the logo is generated by ResourceLoaderSkinModule, and includes background-size: 135px auto;.

This means at the display layer, the images are no longer cut off. Scaling the image files themselves for WMF config is a separate issue tracked at T232012 and perhaps another task might be needed as well.