gravatar_image_tag
gravatar_image_tag copied to clipboard
Retina display support
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...
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.
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.