Opened 12 years ago
Closed 12 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)
#7
@
12 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/
#9
@
12 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.
Note: See
TracTickets for help on using
tickets.
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.