Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retina display support #13

Open
greinacker opened this issue Jul 5, 2012 · 2 comments
Open

Retina display support #13

greinacker opened this issue Jul 5, 2012 · 2 comments
Labels

Comments

@greinacker
Copy link

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

@mdeering
Copy link
Owner

mdeering commented Jul 6, 2012

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.

@geocom
Copy link
Contributor

geocom commented Oct 7, 2014

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

#gravitar{
background:transparent url("<%= gravatar_image_url("example@example.com", size: 200, secure: true) %>") 0px 0px no-repeat;
}

@media screen and (-webkit-device-pixel-ratio: 2.0){
#gravitar{
background:transparent url(<%= gravatar_image_url("example@example.com", 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants