Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#21388 closed task (blessed) (fixed)

Retina theme screenshots

Reported by: nacin's profile nacin Owned by: lancewillett's profile lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Customize Keywords: needs-patch
Focuses: Cc:

Description

Themes should be able to provide a screenshot called screenshot-2x.png or screenshot-600x450.png, and we should load it for retina displays (or load them always).

In doing this, we should consider switching the themes.php page to be infinite scroll, as that page can take a *long* time to load with a lot of themes (and now with even bigger images).

Change History (13)

#1 @nacin
11 years ago

  • Component changed from Themes to Appearance

#2 @sabreuse
11 years ago

  • Cc sabreuse@… added

#3 @desrosj
11 years ago

  • Cc desrosj@… added

#4 @andy
11 years ago

On WordPress.com we have a script called devicepx.js which looks for certain URL patterns in img src attrs and rewrites them for higher-res images. One of the patterns it matches is "-1x" before the file extension. It assumes it can safely rewrite that to "-2x". This might not be the best way -- perhaps to be less ambiguous and have fewer potential false positives it should use @1x -- but it's what we made.

So themes could announce their support by having a file called screenshot-1x.png as well as screenshot-2x.png. The advantage of putting this bit of data in the 1x filename is that you don't have to do a HEAD request to find out whether the 2x image exists.

#5 @saracannon
11 years ago

  • Cc sararcannon@… added

#6 @betzster
11 years ago

  • Cc j@… added

#7 @helenyhou
11 years ago

  • Keywords needs-patch added

This is the approach I'm thinking:

  • We just always load the screenshot that is provided, named as-is, and encourage theme authors to update to a 2x size (but no bigger). That 2x size would be 600x450. It's already CSS constrained, so nothing else to do there. Will need to communicate that guideline to Theme Review Team. Should also encourage (or enforce?) it being optimized using PngCrush or similar.
  • We implement lazy loading and unloading to deal with both load time and browser memory consumption. This is very interesting to me in that regard: http://airbnb.github.com/infinity/

#8 @ethitter
11 years ago

  • Cc erick@… added

#9 @nacin
11 years ago

Per IRC:

  • New theme guidelines — screenshot.png (.jpg, etc.) should be 600x450.
  • Change per_page from 999 to 36, to kick on infinite scroll and make this page snappier.

#10 @ryan
11 years ago

[21768] changes per_page.

#11 @lancewillett
11 years ago

In [21884]:

Twenty Twelve: update screenshot with double-sized version at 600x450, props drewstrojny. See #21388 and #21227.

#12 @nacin
11 years ago

  • Owner set to lancewillett
  • Status changed from new to assigned

I asked lancewillett to procure Twenty Ten and Twenty Eleven screenshots as well.

#13 @lancewillett
11 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In [22112]:

Twenty Ten and Eleven: update screenshot.png files in both themes to double-sized versions for HiDPI support. Fixes #21388.

Note: See TracTickets for help on using tickets.