WordPress.org

Make WordPress Core

#21388 closed task (blessed) (fixed)

Retina theme screenshots

Reported by: nacin Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Appearance 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)

comment:1 nacin21 months ago

  • Component changed from Themes to Appearance

comment:2 sabreuse21 months ago

  • Cc sabreuse@… added

comment:3 desrosj21 months ago

  • Cc desrosj@… added

comment:4 andy21 months 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.

comment:5 saracannon21 months ago

  • Cc sararcannon@… added

comment:6 betzster21 months ago

  • Cc j@… added

comment:7 helenyhou20 months 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/

comment:8 ethitter20 months ago

  • Cc erick@… added

comment:9 nacin20 months 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.

comment:10 ryan20 months ago

[21768] changes per_page.

comment:11 lancewillett19 months ago

In [21884]:

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

comment:12 nacin19 months ago

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

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

comment:13 lancewillett19 months 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.