Menu icon Foundation
Images, Interchange, and small Retina devices

Just now playing with Foundation 5, and love Interchange. I want to target different images to "small" and "medium" devices based on their pixel density... so that a Retina smartphone gets a high-res image, but a lower-end smartphone will only download a smaller image.

I see that I can write custom Named Queries. But I'm wondering if I need to or not.

Can I combine named queries, to do something like:

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

         

Thanks!

retinaResponsiveinterchange

Just now playing with Foundation 5, and love Interchange. I want to target different images to "small" and "medium" devices based on their pixel density... so that a Retina smartphone gets a high-res image, but a lower-end smartphone will only download a smaller image.

I see that I can write custom Named Queries. But I'm wondering if I need to or not.

Can I combine named queries, to do something like:

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

         

Thanks!

Porter Bayne over 4 years ago

Argh. That is not the code I posted, but editing the original post is not working.

Here is the code I meant to use:

<img data-interchange="[/path/to/small.jpg, (small)], [/path/to/small-retina.jpg, (small retina)]">

Rafi Benkual over 4 years ago

You will want to name your own query. That code does not work as interchange js is looking for one size class.

Rafi Benkual over 4 years ago

I think you can do it this way:

<img data-interchange="
[http://placehold.it/641x200&text=small, (small)],[http://placehold.it/1025x200&text=small-retina,(retina)]
">

Porter Bayne over 4 years ago

Thanks, Rafi. I'm not being redundant, am I? Am I correct that these use cases would still be fairly common, to support older/slower devices as well as newer high-pixel density ones?

  • small
  • small Retina
  • medium
  • medium Retina
  • large
  • large Retina

Rafi Benkual over 4 years ago

You are correct, interchange is made to work this way. Here's a demo set up that way. http://cdpn.io/ctfHE

Asif over 4 years ago

@Rafi - I still did not get it. Porter and my requirement is that we Require 1 interchange with 6 media query options:

small
small Retina
medium
medium Retina
large
large Retina

if interchange does not support this, then do you think we can make a feature request to include ?

Then the other solution I can figure is to create Custom Named Queries like the following:

jQuery(document).foundation('interchange', {
  named_queries : {
    small_retina : 'only screen and (min-width: 1px) and (-webkit-min-device-pixel-ratio: 2),only screen and (min-width: 1px) and (min--moz-device-pixel-ratio: 2),only screen and (min-width: 1px) and (-o-min-device-pixel-ratio: 2/1),only screen and (min-width: 1px) and (min-device-pixel-ratio: 2),only screen and (min-width: 1px) and (min-resolution: 192dpi),only screen and (min-width: 1px) and (min-resolution: 2dppx)',

    medium_retina : 'only screen and (min-width: 641px) and (-webkit-min-device-pixel-ratio: 2),only screen and (min-width: 641px) and (min--moz-device-pixel-ratio: 2),only screen and (min-width: 641px) and (-o-min-device-pixel-ratio: 2/1),only screen and (min-width: 641px) and (min-device-pixel-ratio: 2),only screen and (min-width: 641px) and (min-resolution: 192dpi),only screen and (min-width: 641px) and (min-resolution: 2dppx)',

   large_retina : 'only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2),only screen and (min-width: 1024px) and (min--moz-device-pixel-ratio: 2),only screen and (min-width: 1024px) and (-o-min-device-pixel-ratio: 2/1),only screen and (min-width: 1024px) and (min-device-pixel-ratio: 2),only screen and (min-width: 1024px) and (min-resolution: 192dpi),only screen and (min-width: 1024px) and (min-resolution: 2dppx)'

  }
});

and then use these Custom named Queries in your Interchange like :

<img data-interchange="[http://localhost/1.jpg, (medium)],[http://localhost/2.jpg, (medium_retina)],[http://localhost/3.jpg, (large)],[http://localhost/4.jpg, (large_retina)], [http://localhost/5.jpg, (small)], [http://localhost/6.jpg, (small_retina)]" />

Let me know if this works.

Ben Hutchings about 4 years ago

Just to give another thumbs-up to the custom queries route, I have this in app.js:

$(document).foundation({
  orbit: {
    // some orbit stuff...
  },
  interchange: {
    named_queries : {
      smallretina : 'only screen and (min-width: 1px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1px) and (min-resolution: 192dpi), only screen and (min-width: 1px) and (min-resolution: 2dppx)',
      mediumretina : 'only screen and (min-width: 641px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 641px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 641px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 641px) and (min-device-pixel-ratio: 2), only screen and (min-width: 641px) and (min-resolution: 192dpi), only screen and (min-width: 641px) and (min-resolution: 2dppx)',
      largeretina : 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1025px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (min-resolution: 192dpi), only screen and (min-width: 1025px) and (min-resolution: 2dppx)'
    }
  }
});

And this to set a background image in a page-wide div:

<div class="home-top-row faded" data-interchange="
  [pathto/img/home-640.jpg?name=default, (default)]
  ,[pathto/img/home-640.jpg?name=small, (small)]
  ,[pathto/img/home-1024.jpg?name=smallretina, (smallretina)]
  ,[pathto/img/home-1024.jpg?name=medium, (medium)]
  ,[pathto/img/home-1600.jpg?name=smallretina, (mediumretina)]
  ,[pathto/img/home-1600.jpg?name=large, (large)]
  ,[pathto/img/home-1920.jpg?name=largeretina, (largeretina)]">
  <div class="row">
    <div class="medium-12 columns">
        Header Row content...
    </div>
  </div>
</div>

And it works a treat.

Notes:
- I added querystrings to the image urls for testing, so you can easily see which one is being used in Element Inspector / Firebug.
- Ignore the image sizes I'm using, they are just what's available to me right now. They are not proper 'retina' sizings for those breakpoints.
- When setting the largeretina size, I used 1025px not 1024 as i figure 1024 is the top-end of the medium breakpoint. Could be wrong?

Gabriel Bajada over 2 years ago

This is awesome. I've used this a couple of times so far and it works great!

I've just started a project using Foundation 6 and this has stopped working!

Here's my my javascript. Any ideas?

$(document).foundation('interchange', {
named_queries : {
smallretina : 'only screen and (min-width: 1px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1px) and (min-resolution: 192dpi), only screen and (min-width: 1px) and (min-resolution: 2dppx)',
mediumretina : 'only screen and (min-width: 641px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 641px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 641px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 641px) and (min-device-pixel-ratio: 2), only screen and (min-width: 641px) and (min-resolution: 192dpi), only screen and (min-width: 641px) and (min-resolution: 2dppx)',
largeretina : 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1025px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (min-resolution: 192dpi), only screen and (min-width: 1025px) and (min-resolution: 2dppx)',
xlargeretina : 'only screen and (min-width: 1921px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1921px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1921px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1921px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1921px) and (min-resolution: 192dpi), only screen and (min-width: 1921px) and (min-resolution: 2dppx)'
}
});

Brian Tan over 2 years ago

That was a 2-year old post probably for F5. Options specification is changed in F6.

Check here http://foundation.zurb.com/sites/docs/javascript.html

Ben Hutchings over 2 years ago

Hi Gabriel,

I've not tried any of your code in F6, but just to add to Brian's pointer, here's the section that mentions adding new named queries in F6's Interchange docs: http://foundation.zurb.com/sites/docs/interchange.html#named-media-queries

Brent 11 months ago

I've had the same question on this...Isn't there a need for different assets to be loaded and not just different sizes & pixel densities, but the intersection of the two...i.e.

  • Small
  • Medium
  • Large
  • Small Retina
  • Medium Retina
  • Large Retina

I would think an iPhone 5s, an iPad, a MacBook Pro, and a 4k or 5k monitor, though all retina or better, would each need different graphics. What is loaded for a 5k monitor would greatly be overkill for an iPhone 5s, but what's loaded for a 5s would likely be blurry on a 5k monitor. Either way, all that's built in for us to work with for these is the retina query.

Also, I don't see it mentioned anywhere, but does retina always take precedence over size? i.e. The iPhone 5s has a screen size of 640x1146, which I believe would make if fall into the size query of small or medium, however, it has a pixel density of 326ppi, which makes it retina. So if a display is retina, is that the media query that applies to it, regardless of it's size?