Drupal Module Spotlight: Media Query Images

There are a number of responsive image techniques for Drupal. Typical responsive image modules used regularly include: Responsive Images, Client-Side Adaptive Image, Borealis, Adaptive Image. These typically allow you to create a drupal Field which is an image and it will respond to the viewport of the device visiting your website. Some of these modules use Javascript, some don’t.

A new module entering this space is Media Query Images. This module can make use of the BreakPoints module, and optionally Picture module to in a nutshell:

  1. Let you define breakpoints which images should be generated per viewport size.
  2. It then generates media query rules stored in CSS to allow remote browsers to fetch the correctly sized image — there is no javascript needed clientside for responsive images using this module as its using/generating media queries for you. (On older browsers it uses Respond.js which has known issues with IE8 at this time)
  3. Optionally supports the Picture module to match up breakpoints to custom drupal image_styles rules.

An example of media_query_images with the Breakpoints integration enabled is shown here, for the given Breakpoint setting, the specific image_style of Thumbnail should be used:

mqi--breakpoints

This module and its 2 drupal dependencies (or at least just Breakpoints), seem really easy to use and install. Hopefully its adoption will take off.

note: This module maintainer and I are long time acquaintances :P. But, having heard about this module from him, I felt the need to expose it out to the world at large!

Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


4 × 5 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>