Responsive Images with Foundation Interchange

Having a mobile friendly responsive website is always a good idea. Having a responsive website that loads really fast is even better. Large images are often a bottleneck and the cause of slower page load. A great way to solve this is to serve up different images based on the screen size instead of scaling a large image to fit.

To solve this dilemma, I recently discovered the Zurb Interchange module. Since I already use Foundation as a base theme/framework, I thought I would give it a try.

Basically, what this module does is implement the already existing Foundation interchange library with Drupal. It provides a nifty image field formatter that allows you to specify different images styles to show based on various media queries. It even allows you to convert the image into a background image.

Here is how to get Zurb Interchange up and running on your next project.

Requirements

• Drupal 7.x
• Foundation 4 or 5
• Zurb Interchange
• Jquery update
• A content type with an image field
•  

Initial Setup

Step1: Download and enable the appropriate branch based on your version of foundation (1.x for Foundation 4 and 5.x for Foundation 5).

Step 2: Make sure to include the required Javascript. There are several ways to do this based on your theme setup and version, but an easy way is to just add the path to the file directly into your ThemeName.info file:

scripts[] = js/foundation/foundation.interchange.js

Again, depending on how you setup your subtheme, you may need to copy the JS file that comes with Zurb foundation into your subthemes js directory. The Javascript file ships with foundation by default and is located at sites/all/themes/zurb_foundation/js/foundation/foundation.interchange.js

 

Image Styles

Step 3: Create a few image styles that we will be using to load the different images based on the media queries.

For this example, we will create three (3) different image style.

Name them:

• small
• medium
• large

Set them to scale the image appropriately based on your breakpoints. For example 640px wide for small, 1024px for medium and 1440px for large.

The naming convention is important for this to work properly. The interchange shortcuts (image style names) directly correlate to foundations breakpoints. So if you name your image style something like “Header Image” it won’t get displayed properly unless you create your own custom query, which is outlined in the interchange documentation.

If you have a lot of image styles, you will most likely need to do a few custom queries. Here is a quick snippet that can be placed in a custom js file:

$(document).foundation('interchange', {
 named_queries : {
   my_custom_query : 'only screen and (max-width: 640px)'
 }
});

 

Image Field Display

At this point, we should have our required modules installed, our JS loading and our image styles setup. Now we can configure the image fields to display responsive images!

Step 4: Go to the manage display page for the image field you want to become responsive. Edit the format settings and you should see the new Zurb Interchange Settings. Now, select and enable the image styles that we just created.

It’s important to rearrange the image styles in order of smallest to largest. This is because interchange will load the smallest image (mobile first) then change to the larger images based on larger devices and screen sizes.

 

Responsive Background Images

The Zurb Interchange module also adds the ability to turn the image field into a background image. This is a cool option and allows for responsive background images!

Step 5 (Optional): To use this option, all you need to do is select the “Set as a background image with Zurb Interchange” option.

Initially, you may think that this option is not working. This is because interchange only adds the background-image property. You will need to set the others background properties in your CSS (background-repeat, background-position, background-size) for everything to display properly.

 

Conclusion

All in all this a pretty cool module and if you’re building a responsive drupal website with Foundation, I would definitely recommend this.

If you’re interested in getting started with Foundation, check out my last blog post: Install Drupal 7 with a Foundation sub-theme using drush
 

Did you know that the Cheeky Monkey web development team is happy to help out other agencies with their work? Sometimes it’s Drupal expertise that is needed. Other times it’s because they simply need more hands-on-deck. In any case, call us if you need help!