gravatar_image_tag icon indicating copy to clipboard operation
gravatar_image_tag copied to clipboard

Retina display support

Open greinacker opened this issue 12 years ago • 2 comments

Would be cool to be able to specify an option that would enable support for Hi DPI displays.

I think it could be fairly simple - right now, the "size" attribute is used for both the <img> tag width and height, and the gravatar image URL. If there was a way to separate these two, so the <img> width/height were say 40, and the gravatar request would use size=80, I think that would cover it...

greinacker avatar Jul 05 '12 21:07 greinacker

Marked as a TODO.

Just inspected the gravatars on Github they are doing something similar. Where they always pull down the 140px size gravatar and I have not seen it displayed anywhere > 70px. So aside from being able to double the size for retina it may make sense to be able to also lock the size for caching purposes.

mdeering avatar Jul 06 '12 05:07 mdeering

The way I am doing this is to use gravitar_image_url with css

#gravitar{ background:transparent url("<%= gravatar_image_url("[email protected]", size: 200, secure: true) %>") 0px 0px no-repeat; }

@media screen and (-webkit-device-pixel-ratio: 2.0){ #gravitar{ background:transparent url(<%= gravatar_image_url("[email protected]", size: 400, secure: true) %>) 0px 0px no-repeat; background-size: 200px 200px; }

This way it only loads the image size for the display in use. It may have issues with high-def windows computers due to the webkit designation however I have tested it and it works on mac, iOS and android. You can also add a 3.0 pixel ratio for the new iPhone 6.

Only issue is that the current build does not correctly handle params so if secure is true size gets mangled by the css. Have pushed a pull request that fixes this issue by changing the order so that secure does not become a param.

geocom avatar Oct 07 '14 10:10 geocom