Page MenuHomePhabricator

Come up with a sane way of including screenshots with skins and displaying them in the UI
Closed, ResolvedPublic

Assigned To
Authored By
matmarex
Jun 6 2014, 11:57 PM
Referenced Files
F9036540: MinervaNeue.png
Aug 11 2017, 5:54 PM
F9028483: webplatform.png
Aug 11 2017, 3:31 AM
F9028466: Tempo.png
Aug 11 2017, 3:31 AM
F9028411: Blueprint.png
Aug 11 2017, 3:31 AM
F9028475: Splash.png
Aug 11 2017, 3:31 AM
F9028486: Vector.png
Aug 11 2017, 3:31 AM
F9028465: Nostalgia.png
Aug 11 2017, 3:31 AM
F9028436: Metrolook.png
Aug 11 2017, 3:31 AM

Description

We should have a sane way of including screenshots with skins and displaying them in the UI. These would be useful on Special:Preferences, in the installer when it will ask you which skin to choose, on Special:Version…

I coded up something that works but is probably not a good idea at https://gerrit.wikimedia.org/r/#/c/138110/ – this would just add support for a new key to $wgExtensionCredits.

One interesting issue is, what resolution should we expect the screenshot to be?

Another one is, how do we display it? Unless we want to push the whole thing through ResourceLoader CSS handling (which would be extremely silly), we need to know the URL path where the screenshot is available (relative to $wgStylePath?). This is not obvious :(

See Also: T70331: Make it possible to render the installer with any skin, or preview skins in the installer


The new convention:

  • Every skin can include screenshots in the screenshots/ directory, which will be shown in the installer (and possibly elsewhere in the future).
  • It should include at least one 1280x800px screenshot, plus any extra screenshots if your skin looks different at different screen resolutions or with different configuration options.
  • You should disable any extensions or uncommon configuration options when taking the screenshots.
  • Make sure not to include any copyrighted content in the screenshots – here's some public domain content you can use:
    • Page content: P5878
    • Site logo: the MediaWiki logo ($wgLogo = "/w/resources/assets/mediawiki.png";)
    • Images: 1 2 3

Examples:

Vector.png (800×1 px, 331 KB)
Timeless.png (800×1 px, 280 KB)
MonoBook.png (800×1 px, 367 KB)


Details

Reference
bz66295
SubjectRepoBranchLines +/-
mediawiki/skins/Timelessmaster+0 -0
mediawiki/skins/MinervaNeuemaster+0 -0
mediawiki/skins/GreyStuffmaster+0 -0
mediawiki/skins/Vectormaster+0 -0
mediawiki/skins/WPtouchmaster+0 -0
mediawiki/skins/webplatformmaster+0 -0
mediawiki/skins/Splashmaster+0 -0
mediawiki/skins/Truglassmaster+0 -0
mediawiki/skins/Tempomaster+0 -0
mediawiki/skins/Nostalgiamaster+0 -0
mediawiki/skins/Nimbusmaster+0 -0
mediawiki/skins/MonoBookmaster+0 -0
mediawiki/skins/Modernmaster+0 -0
mediawiki/skins/Metrolookmaster+0 -0
mediawiki/skins/Examplemaster+0 -0
mediawiki/skins/Maskmaster+0 -0
mediawiki/skins/Duskmaster+0 -0
mediawiki/skins/DeskMessMirroredmaster+0 -0
mediawiki/skins/Daddiomaster+0 -0
mediawiki/skins/CologneBluemaster+0 -0
mediawiki/skins/Bouquetmaster+0 -0
mediawiki/skins/eruditemaster+0 -0
mediawiki/skins/BlueSkymaster+0 -0
mediawiki/skins/BlueSkymaster+0 -0
mediawiki/skins/apexmaster+0 -0
mediawiki/skins/apexmaster+0 -0
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

What's wrong with ?useskin?

Except in the installer. That would need something fancier, or something. Unless there'd be some way to safely automatically include them temporarily for preview... er...

I don't know where I was going with that.

I actually agree with Isarra somewhat - a preview is better than a screenshot. That said the current experience is terrible. Previewing the preference page for one makes no sense - it would be far better to see something in the main namespace rendered via the chosen skin.

Tumblr does a great job in its theme interface. You can select and search for skins and they instantly get applied so it's easy to flick between them and see the skin in the context of an ipsum lorem article.

This could be a great opportunity to break skins out of Special:Preferences - maybe Special:Preferences/Skin and just provide a good simple interface for skin switching - maybe a drop down at the top and an Ipsum lorem article rendered below. When we have templating in core we could even do this rendering via JavaScript :-).

We wouldn't want it to get too complicated, both on the admin and on the user end, but I dunno.

If nothing else, having a small thumbnail just so there's something visual at all would certainly be useful, but we can't expect the thumbnail/screenshot to do much beyond that. So... er... there should be both. We should have both things - a more immediate preview mechanism, and a small thumbnail for initial eye-catching and later locating in the list.

matmarex set Security to None.

A full preview sounds a bit sketchy on the site, but would it potentially be possible to do the full preview somewhere else? Have a screenshot available with the skin, also have an optional link to a testwiki preview (like maybe just set up an entire toollabs wiki or whatever you call it for that)... this wouldn't cover all skins, but for ones included with the tarball and even in gerrit and crap it would be pretty straight forward to set up.

Would be a bit harder to maintain, though.

Change https://gerrit.wikimedia.org/r/371080 (fd8d75c1fd26e9ca0976111f1b3861935a53f84b) makes this possible. I guess we should take a bunch of screenshots and include them now? :o

Here are 24 screenshots for all the skins in our version control that I could effortlessly get to work and that did not have obvious huge rendering issues. They're at 1280x800px.

All of the content on the screenshots is in the public domain:

  • The textual content is just a lot of copy-paste of Lorem ipsum: P5878
  • The site logo (where shown) is the MediaWiki logo ($wgLogo = "/w/resources/assets/mediawiki.png";)
  • The images are classic art (1 2 3)

I'm going to commit these to the repos, and upload them to Commons, later (or tomorrow).

apex
apex.png (800×1 px, 305 KB)
Blueprint
Blueprint.png (800×1 px, 317 KB)
BlueSky
BlueSky.png (800×1 px, 184 KB)
Bouquet
Bouquet.png (800×1 px, 412 KB)
CologneBlue
CologneBlue.png (800×1 px, 301 KB)
Daddio
Daddio.png (800×1 px, 314 KB)
DeskMessMirrored
DeskMessMirrored.png (800×1 px, 954 KB)
Dusk
Dusk.png (800×1 px, 286 KB)
erudite
erudite.png (800×1 px, 241 KB)
Example
Example.png (800×1 px, 324 KB)
GreyStuff
GreyStuff.png (800×1 px, 283 KB)
Mask
Metrolook.png (800×1 px, 325 KB)
Metrolook
Modern.png (800×1 px, 325 KB)
Modern
MonoBook.png (800×1 px, 367 KB)
MonoBook
Mask.png (800×1 px, 1002 KB)
Nimbus
Nimbus.png (800×1 px, 326 KB)
Nostalgia
Nostalgia.png (800×1 px, 303 KB)
Splash
Splash.png (800×1 px, 716 KB)
Tempo
Tempo.png (800×1 px, 292 KB)
Timeless
Timeless.png (800×1 px, 280 KB)
Truglass
Truglass.png (800×1 px, 332 KB)
Vector
Vector.png (800×1 px, 331 KB)
webplatform
webplatform.png (800×1 px, 279 KB)
WPtouch
WPtouch.png (800×1 px, 305 KB)

Can MinervaNeue get in on the screenshot action? I cam generate one but it's likely to be inconsistent..

I tried to include it, but it's shown me some error message so I skipped it. Maybe I'll look at it again later and try to actually read what the error says. I don't think it's a major problem if it's inconsistent; I won't be taking screenshots of all skins forever so they will soon enough become inconsistent anyway.

@matmarex probably needs MobileFrontend to be installed. It's still a bit weird in that way. :(

Change 371521 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/apex@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371521

Change 371522 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/BlueSky@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371522

Change 371524 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/apex@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371524

Change 371525 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/BlueSky@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371525

Change 371526 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Bouquet@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371526

Change 371521 merged by jenkins-bot:
[mediawiki/skins/apex@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371521

Change 371527 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/CologneBlue@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371527

Change 371524 abandoned by Bartosz Dziewoński:
Add skin screenshot for the installer

Reason:
Whoops, duplicate.

https://gerrit.wikimedia.org/r/371524

Change 371528 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Daddio@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371528

Change 371525 abandoned by Bartosz Dziewoński:
Add skin screenshot for the installer

Reason:
Whoops, duplicate.

https://gerrit.wikimedia.org/r/371525

Change 371529 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/DeskMessMirrored@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371529

Change 371530 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Dusk@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371530

Change 371531 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/erudite@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371531

Change 371532 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Example@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371532

Change 371522 merged by jenkins-bot:
[mediawiki/skins/BlueSky@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371522

Change 371533 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Mask@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371533

Change 371534 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Metrolook@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371534

Change 371535 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/MinervaNeue@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371535

Change 371536 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Modern@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371536

Change 371537 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/MonoBook@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371537

Change 371538 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Nimbus@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371538

Change 371539 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Nostalgia@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371539

Change 371540 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Splash@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371540

Change 371541 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Tempo@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371541

Change 371542 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Truglass@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371542

Change 371543 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Vector@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371543

Change 371544 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/webplatform@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371544

Change 371545 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/WPtouch@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371545

Change 371546 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/GreyStuff@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371546

Change 371535 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371535

Change 371543 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371543

Change 371531 merged by jenkins-bot:
[mediawiki/skins/erudite@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371531

Change 371532 merged by jenkins-bot:
[mediawiki/skins/Example@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371532

Change 371533 merged by jenkins-bot:
[mediawiki/skins/Mask@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371533

Change 371548 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Timeless@master] Add skin screenshots for the installer

https://gerrit.wikimedia.org/r/371548

Change 371526 merged by jenkins-bot:
[mediawiki/skins/Bouquet@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371526

Change 371527 merged by jenkins-bot:
[mediawiki/skins/CologneBlue@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371527

Change 371528 merged by jenkins-bot:
[mediawiki/skins/Daddio@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371528

Change 371529 merged by jenkins-bot:
[mediawiki/skins/DeskMessMirrored@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371529

Change 371530 merged by jenkins-bot:
[mediawiki/skins/Dusk@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371530

Change 371534 merged by jenkins-bot:
[mediawiki/skins/Metrolook@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371534

Change 371536 merged by jenkins-bot:
[mediawiki/skins/Modern@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371536

Change 371546 merged by jenkins-bot:
[mediawiki/skins/GreyStuff@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371546

Change 371545 merged by jenkins-bot:
[mediawiki/skins/WPtouch@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371545

Change 371544 merged by jenkins-bot:
[mediawiki/skins/webplatform@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371544

Change 371542 merged by jenkins-bot:
[mediawiki/skins/Truglass@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371542

Change 371541 merged by jenkins-bot:
[mediawiki/skins/Tempo@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371541

Change 371540 merged by jenkins-bot:
[mediawiki/skins/Splash@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371540

Change 371539 merged by jenkins-bot:
[mediawiki/skins/Nostalgia@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371539

Change 371538 merged by jenkins-bot:
[mediawiki/skins/Nimbus@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371538

Change 371537 merged by jenkins-bot:
[mediawiki/skins/MonoBook@master] Add skin screenshot for the installer

https://gerrit.wikimedia.org/r/371537

Change 371548 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Add skin screenshots for the installer

https://gerrit.wikimedia.org/r/371548

With these patches merged, 24 skins out of 42 in our version control have screenshots.

The others ones are read-only repos, immediately fatal when enabled, don't seen to have any styles at all, or have other big problems.

SkinStatus
apex
Athena
Blueprint
BlueSky
BlueSpiceSkin
Bouquet
CologneBlue
CustomPage
Daddio
DeskMessMirrored
Dusk
DuskToDawn
Empty
erudite
Example
Gamepress
GreyStuff
HasSomeColours
Mask
Material
mediawiki-strapping
Metrolook
MinervaNeue
Modern
MonoBook
Nimbus
Nostalgia
p2wiki
Poncho
Refreshed
Schulenburg
Splash
Synagonism
Tempo
Timeless
Tomas
Truglass
Vector
VectorV2
webplatform
WoOgLeShades
WPtouch
matmarex assigned this task to Legoktm.
matmarex removed a project: Patch-For-Review.
matmarex updated the task description. (Show Details)
matmarex removed a subscriber: wikibugs-l-list.

It would be good to write this up as a seleniumJS script (see VisualEditor/build/screenshots.js), because skins change.

This task has been pointed from T179709: [beginner] [recurring] Set up your MediaWiki development environment and upload a screenshot of a MediaWiki skin, where we are trying to take screenshots of skins that doesn't have one yet in their mediawiki.org skin page. Have the pictures taken during the work done for this task been inserted on mw.org?

No. I almost did it, but to upload them there, you'd have to find out the right license for every single one separately, and that was more effort than I was willing to put into it. The skins can each have different licenses, they're not all on GPL like MediaWiki.