Custom media queries in RWP 1.9

You have always been able to decide which image size that should be selected at which window width. This can be done programmatically in your templates.
But as of Responsify WP 1.9, this can easily be achieved from the WordPress backend thanks to a brand new user interface.

My goal with Responsify WP has always been to make it a plug and play solution for responsive images. But I also want it to be as developer friendly as possible. What I mean by that is that RWP should be highly customisable and flexible, but still easy to use.
Making the user of the plugin able to do more things without writing any code is another step in that direction. This new interface for custom media queries allows the regular WordPress user to take total control over their responsive images.

Okey, enough with the sales talk. How does this new interface work and when is it useful? The simplest example is a single, really narrow column with an article.

Let’s say that the image in the article is available in four sizes.

• thumbnail.jpg, 480px
• medium.jpg, 880px
• large.jpg, 1024px
• original.jpg, 2000px

Even if the column never becomes wider than 768px, a larger image will be downloaded if the window is wider. Unfortunately, this is how responsive images works. When the browser sees the following code, it only cares about the screen width, not the width of the context which contains the image.

<img
srcset="thumbnail.jpg 480w, medium.jpg 880w, large.jpg 1024w, original.jpg 2000w" 
sizes="(min-width: 1024px) 2000px, (min-width: 880px) 1024px, (min-width: 480px) 880px, 480px">

medium.jpg would be the best selection in this case, but since the window is 2560 pixels wide, original.jpg would be downloaded and used.
The same thing happens on a smaller screen where the column is even more narrow.

The column is 480 pixels wide, so thumbnail.jpg would be perfect. But since the screen has room for a bigger image, medium.jpg would be selected by the browser.

There’s no way for RWP to prevent this. Only you know how the layout of your website looks like.
But you can tell RWP which image sizes should be used and when.

Go to the RWP settings page inside WordPress and scroll down to the Custom media queries section. Click on the Add setting button.

Give the media query setting a name.

If the website is a blog and all pages has this narrow column layout, we can use this as the new default setting.
As we can see, thumbnail is already selected as the smallest image size. That’s exactly what we want in this case. Next, we should tell RWP when we wanna use medium.

In the example, thumbnail is 480px and that’s how wide the column is on smaller screens. The column becomes 768px on large screens and never any wider than that. Let’s say that this switch happens when the screen is at least 850 pixels wide. That’s when we wanna use medium instead of thumbnail.

Click the Add button.

That’s it! RWP will now generate the following markup instead:

<img
srcset="thumbnail.jpg 480w, medium.jpg 880w"
sizes="(min-width: 850px) 880w, 480w">

The large desktop computer won’t download original.jpg anymore, only the more appropriate medium.jpg.

As a bonus example, let’s say that this narrow column only exists on a few pages on your WordPress site. They might have a template called narrow-column.php.
In that case, these settings should not override the default ones that RWP generates. They should only be applied when that template is being used.
This can be done by doing this: