Summary

Add facilities for reloading gravatar images in retina resolution.

Review Request #3482 — Created Nov. 8, 2012 and submitted Nov. 24, 2012, 11:26 p.m.

Information

Owner

david

Repository

Djblets

Branch

master

Bugs

Depends On

Reviewers

Groups

djblets

People

Description

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.

Testing Done

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.

Issues

Description	From	Last Updated
I'm not wild about always fetching a larger file and scaling it down. For retina displays, there are ways to …	chipx86	Nov. 24, 2012, 3:54 p.m.
To help satisfy lintian checkers I want to put in later, this should be in the form of: var src …	chipx86	Nov. 24, 2012, 11:11 p.m.
should be parseInt(parts[1], 10);	chipx86	Nov. 24, 2012, 11:10 p.m.
Weirdly, it's possible, I believe, to have a devicePixelRatio that's not a round number. Maybe we should Math.floor this.	chipx86	Nov. 24, 2012, 11:10 p.m.
Add a ;	chipx86	Nov. 24, 2012, 11:10 p.m.

djblets/gravatars/templatetags/gravatars.py (Diff revision 1)

Show all issues

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."

david Nov. 17, 2012, 11:54 p.m.

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.

chipx86 Nov. 18, 2012, 11:03 p.m.

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 gravatars.com, 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.

chipx86 Nov. 19, 2012, 4:49 p.m.

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.

Change Summary:

Reload the images in javascript instead of always loading the 2x image.

Summary:

-	Use retina gravatars.
+	Add facilities for reloading gravatar images in retina resolution.

Description:

~		Use retina gravatars.
	~	Add facilities for reloading gravatar images in retina resolution.

~		When fetching gravatars for a given size, actually fetch the image for twice
~		that size but let the browser scale it down.
	~	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.

Diff:

Revision 2 (+26 -1)

Show changes

	djblets/gravatars/templatetags/gravatars.py
	djblets/media/js/jquery.gravy.js

djblets/media/js/jquery.gravy.js (Diff revision 2)

Show all issues

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.

djblets/media/js/jquery.gravy.js (Diff revision 2)
Show all issues
```
should be parseInt(parts[1], 10);
```

djblets/media/js/jquery.gravy.js (Diff revision 2)

Show all issues

Weirdly, it's possible, I believe, to have a devicePixelRatio that's not a round number. Maybe we should Math.floor this.

djblets/media/js/jquery.gravy.js (Diff revision 2)
Show all issues
```
Add a ;
```

Change Summary:

Update for review comments.

Diff:

Revision 3 (+30 -2)

Show changes

	djblets/gravatars/templatetags/gravatars.py
	djblets/media/js/jquery.gravy.js

Ship it!

```
Ship It!
```

Status: Closed (submitted)

Change Summary:

Pushed to master (7b9fc9e).