WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#21388 closed task (blessed) (fixed)

Retina theme screenshots

Reported by: nacin Owned by: 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
6 years ago

  • Component changed from Themes to Appearance

#2 @sabreuse
6 years ago

  • Cc sabreuse@… added

#3 @desrosj
6 years ago

  • Cc desrosj@… added

#4 @andy
6 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
6 years ago

  • Cc sararcannon@… added

#6 @betzster
6 years ago

  • Cc j@… added

#7 @helenyhou
6 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
6 years ago

  • Cc erick@… added

#9 @nacin
6 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
6 years ago

[21768] changes per_page.

#11 @lancewillett
6 years ago

In [21884]:

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

#12 @nacin
6 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
6 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.