Getting WordPress to play nice with responsive images

If you subscribe to the print version of .net magazine (if not, why not!?), you will have seen that this month’s issue features an excellent article on “Responsive Design with WordPress”.

In the article, author Jesse Friedman outlines a load of really useful techniques for making the most of, and overcoming, inherent WordPress functionality in order to produce a truly effective responsive website. If you’re thinking of producing a responsive site with WordPress you should definitely pick up a copy of his article. It’s a must-read.

Having recently rebuilt my personal blog on WordPress using a responsive, mobile-first approach I was familiar with some of the techniques covered in the article. However, the one item that really stood out for me was Jesse’s approach to enabling fluid images via jQuery.

Advertisement

The problem with WordPress and “fluid images”

As I'm sure you’re all aware 'fluid images'  – which make use of max-width: 100% – require that images have no fixed width or height in order that they can scale to the size of their container. Unfortunately, WordPress automatically calculates the dimensions of images generated from the Media library and adds the corresponding width and height attributes to any <img> tags.

This is great for page rendering speed but it throws a massive spanner in the works when it comes to creating responsive layouts as image dimensions are no longer constrained to the size of their container.

That’s a problem.

The non-jQuery solution

In his article Jesse’ suggests using jQuery to remove the width and height attributes from all <img> tags on the page once it has loaded. This certainly works but when building my site I didn’t like the idea of relying on JavaScript to achieve this, especially if there were a lot of images on the page in question.

This is where WordPress filters came to the rescue.

The WordPress codex defines a filter as:

“...hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen.”

As it turns out this is exactly what we need. By setting up a filter to run on all images as the final action before they are rendered on the page, we can use PHP to remove the width and height attributes thereby circumventing the need for (potentially) expensive DOM manipulation via JavaScript.

The code

In the code above we’re adding two filters using the add_filter function. The first argument is the filter we want to hook into and the second specifies the function we want to run when the filter is called.

In our code we hook into two obscure functions:

1. post_thumbnail_html – images retrieved with the post_thumbnail()
2.  image_send_to_editor – images added to the editor

We then using a regular expression to remove both the width and height attributes from the image tags. Now when our images are sent to the browser they can be fully 'fluid' just like Mr Marcotte told us they should.

A confession

I have to confess having had the idea of using add_filter to remove attributes I could not for the life of me locate the correct WordPress filters to hook into.

After a lot of searching I finally came across this extremely helpful post on Wordpress Stack Exchange by Nathaniel Taintor which provided the information about the two filters I needed.

Caveats

As far as I know the only major draw-back to this approach is that it doesn’t remove the width and height attributes from all images on your site. I found this to be an issue, specifcally with the Gravatar images WordPress uses in comments.

If anyone has a solution to this issue please do leave a comment so we can all benefit.

I hope this has been useful and demonstrated an alternative to relying on JavaScript to implement “fluid images” on WordPress websites.