Add facilities for reloading gravatar images in retina resolution.

Review Request #3482 — Created Nov. 8, 2012 and submitted

David Trowbridge
Add facilities for reloading gravatar images in retina resolution.

This adds a jQuery function which, when applied to an <img class="gravatar">
will parse the URL and reload it at the appropriate resolution for
high-resolution devices. This requires some javascript on the reviewboard side
as well, to call it in the relevant places.
Used this on my local install and saw it fetch a 64x64 image instead of a 32x32
one for the gravatar in the upper right corner of the page.
  • 0
  • 0
  • 5
  • 0
  • 5
Description From Last Updated
Christian Hammond
  2. djblets/gravatars/templatetags/ (Diff revision 1)
    I'm not wild about always fetching a larger file and scaling it down. For retina displays, there are ways to say "Here's the retina version you should fetch, if you do retina," which we should make use of instead.
    I'm not sure how to do that with gravatars, though. Need to look into it more... They advertised retina support recently, but don't say anything besides" fetch larger images."
    1. It sounds like the "retina" support they added is just an increased maximum size.
      There are a handful of different ways to implement retina images, but the only one that doesn't download either two different images or images that are 2x the "standard" size is to assign a css background-image based on devicePixelRatio queries (which can work for some of our assets but might be annoying here). In this case, the difference between downloading a 32x32 image and a 64x64 image isn't really very much compared to the round-trip time to begin with, so I don't really think it's a problem.
    2. I'm not worried about the bandwidth at all. I'm worried about the scaling. The images we get on a non-Retina display won't look as expected. A 32x32-optimized gravatar will only be used for 16x16, while a 64x64 will only be used for 32x32, and if not on a Retina display, they're going to be scaled down and look bad. If there aren't gravatars for that size on their profile, then we're going to get a scale-up using whatever algorithm they're using at, and the browser will use a different one to scale down.
      Wordpress announced full retina support and I read some things claiming it does gravatars with retina too (though I don't know what that looks like). Might be worth looking at.
    3. So after thinking about this and looking around for solutions, I think what we want to do is have a little piece of JavaScript (say, in jquery.gravy.js) that we can call that will look for all images with a "gravatar" class and parse out the URL. If it sees a s=<num>, it should alter the number, or otherwise, it should supply one. The number should be <existing_num> * window.devicePixelRatio.
      This should of course only make these changes if window.devicePixelRatio > 1.
      That should make everything work properly.
David Trowbridge
Christian Hammond
  2. djblets/media/js/jquery.gravy.js (Diff revision 2)
    To help satisfy lintian checkers I want to put in later, this should be in the form of:
    var src = blah,
        parts = blah;
    Same with below.
  3. djblets/media/js/jquery.gravy.js (Diff revision 2)
    should be parseInt(parts[1], 10);
  4. djblets/media/js/jquery.gravy.js (Diff revision 2)
    Weirdly, it's possible, I believe, to have a devicePixelRatio that's not a round number. Maybe we should Math.floor this.
  5. djblets/media/js/jquery.gravy.js (Diff revision 2)
    Add a ;
David Trowbridge
Christian Hammond
  1. Ship It!
David Trowbridge
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to master (7b9fc9e).