Menu icon Foundation
Retina display, sprites and data interchange

Hi, just wondering if someone can help me here.

Have just switched over to foundation and am loving it but am having a few problems getting my head around retina images and in particular when they are drawn from a sprite and then getting them into data interchange etc.

This is the current CSS and media query that I used on the old site.

.mob-sprite {
background: url(../img/mobile/mob-sprite.png)  no-repeat top left;
background-size: 122px 477px;
}
.mob-sprite-app-android{ background-position: 0 0; width: 122px; height: 40px; } 
.mob-sprite-app-iphone{ background-position: 0 -41px; width: 122px; height: 40px; } 
.mob-sprite-arrow-back{ background-position: 0 -82px; width: 13px; height: 25px; } 
.mob-sprite-arrow-fwd{ background-position: 0 -108px; width: 13px; height: 25px; float:right; } 
.mob-sprite-fanchants{ background-position: 0 -134px; width: 110px; height: 25px; } 
.mob-sprite-xamazon{ background-position: 0 -160px; width: 77px; height: 31px; } 
.mob-sprite-xgoogle{ background-position: 0 -192px; width: 100px; height: 31px; } 
.mob-sprite-xitunes{ background-position: 0 -224px; width: 77px; height: 31px; } 
.mob-sprite-social_facebook{ background-position: 0 -256px; width: 73px; height: 73px; } 
.mob-sprite-social_google{ background-position: 0 -330px; width: 73px; height: 73px; } 
.mob-sprite-social_twitter{ background-position: 0 -404px; width: 73px; height: 73px; } 



/*  retina display */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 240dpi) {

.mob-sprite {
    background-image: url(../img/mobile/mob-sprite-x2.png);
  } 
}

            

         

This is an example of the HTML that I use.

<span class="scarf24 scarf24-red-white"></span>

If someone could give me a heads up on how to tackle this it would be awesome.

data interchangeretinaspritesmedia querieshtmlcss

Hi, just wondering if someone can help me here.

Have just switched over to foundation and am loving it but am having a few problems getting my head around retina images and in particular when they are drawn from a sprite and then getting them into data interchange etc.

This is the current CSS and media query that I used on the old site.

.mob-sprite {
background: url(../img/mobile/mob-sprite.png)  no-repeat top left;
background-size: 122px 477px;
}
.mob-sprite-app-android{ background-position: 0 0; width: 122px; height: 40px; } 
.mob-sprite-app-iphone{ background-position: 0 -41px; width: 122px; height: 40px; } 
.mob-sprite-arrow-back{ background-position: 0 -82px; width: 13px; height: 25px; } 
.mob-sprite-arrow-fwd{ background-position: 0 -108px; width: 13px; height: 25px; float:right; } 
.mob-sprite-fanchants{ background-position: 0 -134px; width: 110px; height: 25px; } 
.mob-sprite-xamazon{ background-position: 0 -160px; width: 77px; height: 31px; } 
.mob-sprite-xgoogle{ background-position: 0 -192px; width: 100px; height: 31px; } 
.mob-sprite-xitunes{ background-position: 0 -224px; width: 77px; height: 31px; } 
.mob-sprite-social_facebook{ background-position: 0 -256px; width: 73px; height: 73px; } 
.mob-sprite-social_google{ background-position: 0 -330px; width: 73px; height: 73px; } 
.mob-sprite-social_twitter{ background-position: 0 -404px; width: 73px; height: 73px; } 



/*  retina display */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 240dpi) {

.mob-sprite {
    background-image: url(../img/mobile/mob-sprite-x2.png);
  } 
}

            

         

This is an example of the HTML that I use.

<span class="scarf24 scarf24-red-white"></span>

If someone could give me a heads up on how to tackle this it would be awesome.

hanspearce over 3 years ago

Sorry the HTML was incorrect!

<a class="button left mob-sprite mob-sprite-app-iphone" href="http://itunes.apple.com/gb/app/fanchants-football-songs-soccer/id375910081?mt=8"></a>

Samuel Kelemen over 3 years ago

You can specify different qualities of images by using data-interchange. Parameters should be "[image_path, (query_shortcut)], [next_path, (next_shortcut)]"

Shortcuts
Name Media Query
default only screen and (min-width: 1px)
small only screen and (min-width: 1px)
medium only screen and (min-width: 641px)
large only screen and (min-width: 1024px)
landscape only screen and (orientation: landscape)
portrait only screen and (orientation: portrait)

retina (4.2.1) only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)], [/path/to/retina-image.jpg, (retina)]">

<img data-interchange="[../img/mobile/mob-sprite.png, (default)], [../img/mobile/mob-sprite-x2.png, (retina)]">