Requesting an @2x version of the NFL logos CSS Sprite so that images on various Pickem pages are crisp on high resolution displays.

Comments

jvandervort’s picture

jvandervort commented
Status: Active » Fixed
tlreiners’s picture

tlreiners commented

CSS Sprite doesn't render for higher resolution displays. One method is to use a media query for the @2x version

found this via google...might help.

jvandervort’s picture

jvandervort commented
Status: Fixed » Active

I've just included higher res images, you can either use them, or the lower, but not both (pickem admin setting).
I know about media queries, but I'm not looking to design my own responsive pickem theme right now.
Just trying to knock down bugs before the season starts.

tlreiners’s picture

tlreiners commented

I'm not seeing the option in the pickem admin area for the team logo size (just the site logo). The goal here isn't a responsive theme, it's just to provide images for any theme that won't appear blurry on modern smartphones, tablets, laptops, etc...

Any chance you could provide the high resolution source used to create the sprite? I could use it to create a sprite that is exactly twice the size of the one being used (same layout and spacing proportions but 60 x 3400 px)?

I'll create the image and try to code the additional CSS.

jvandervort’s picture

jvandervort commented

I thought you were talking about the site logos.
Yes, the small team logos on various pages are small, but they shouldn't be fuzzier on high-res, just smaller with the same clarity (unless the device is doing something strange with sub-pixels. This would be a larger question I'm not sure how to answer.

tlreiners’s picture

tlreiners commented

I've tested it on two "retina" devices and they are blurry on both displays. The browser on these devices draws everything that isn't designed for it's retina display at 2x. So the 25px by 25px team logos are actually rendered as 50px by 50px (zoomed and blurry). This would be present on most Android, Apple, and Microsoft smartphones / tablets built within the past 2 years (also on some desktops / laptops).

I think the images provided in the assets directory will work. I'll submit the additions to the pickem_nfl.css file here.

jvandervort’s picture

jvandervort commented

Check out the latest dev on the my picks page sprites.

  • jvandervort committed 6f5163a on 7.x-1.x 
    Issue #2318025: Add media queries for retina display of sprites.
jvandervort’s picture

jvandervort commented

Also, does the main rotating logo look good enough, or does it need the same treatment?

tlreiners’s picture

tlreiners commented

I had just finished implementing this on my dev site and was about to upload it, but you beat me to it. My solution was very similar.

Your retina logos look good on the two devices that I have!!!

I don't use the rotating site logo functionality, but similar treatment wouldn't hurt, and I'll test it for you.

jvandervort’s picture

jvandervort commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.