It seems like we are always trying to stay one step ahead of proposed web standards in an attempt to future-proof our sites and take advantage of emerging technologies. One such proposed standard that is exciting - yet difficult to implement at times in existing frameworks - is the new responsive PICTURE element.
Not so fast... The element is still in the "unofficial draft" state, so it has limited support (some advance versions of newer browsers might have it, but nothing in production to date). However, there are some solutions out there that will serve up the element if the browser supports it, but fallback to the polyfill solution if not. One that is turning out to be incredibly helpful is the combination of the Picture and Breakpoints modules to help future-proof D7 sites that implement responsive themes like Omega.
How does it work? Pretty simple - (once you get the hang of it, after setting a few up):
- Install the Breakpoints and Picture modules.
- Define breakpoints for your images (and additionally core image styles for those breakpoints if you don't already have some you'd like to leverage).
- Define breakpoint groups that will be used by the Picture module to associate breakpoints to image styles.
- Map image styles to breakpoints in each group.
- Under Manage Display for an image field, select the Picture field formatter instead of Image and select the picture group (aka breakpoint group) you want to use for this field. Other settings are similar to the Image field formatter.
- Check out your new images!
What you should see on a browser that does not support the PICTURE element yet is a collection of IMG and SCRIPT tags to manage the polyfills leveraging weblinc's picture library. On a browser that supports the element, you will see a PICTURE element generated using the CSS3 media queries defined by the Breakpoints module and the images being served up from image style paths as mapped by the Picture module. The beauty of this solution in Drupal is that you can apply it to existing image fields with minimal impact since the implementation is encapsulated in a field formatter, with only wrapper-level CSS changes being your biggest hurdle.
For a more detailed tutorial on setting up and leveraging these incredibly useful modules, check out the tutorial on drupal.org.