How to Make WordPress Images Responsive

January 22nd, 2013 - Tutorials | 13 Comments

One of the most exciting trends in web design, including WordPress development is “responsiveness”. You`re probably hearing all over the place about “responsive WordPress themes” and wonder what does it mean. Well, it means that a website reshapes itself to fit and look beautiful on any screen, especially on mobile phones and tablets. The process is not very complicated and it uses CSS media queries to transform a layout and optimize it for tablets and smartphones. Basically, using CSS, we rewrite the rules used when building the website interface for a normal screen.

As an example, if we defined the width of the regular website wrapper to 980px, for a smartphone with a screen dimension of 480x800px, we redefine the width of the wrapper to 480px and so on. But as hard as we try to make a WordPress theme 100% responsive, there are still situations when users have to pay attention at what type of content they use in posts or pages, without breaking the layout.

A special statute have images. Because they vary in dimensions, is difficult to create a rule for all of them. Let`s take an example: You write a blog post and use 2 images: one of 200x200px and the other of 640x480px. Most of responsive rules for images say that if a screen is smaller than 768px, the images will receive a width of 100%. Well, assigning a width of 100% to the big image is ok, but in the small image case it isn`t, because it will get resized from 200x200px to 768x768px and it will look really awful. The solution is to apply responsive rules to images in a selective manner, and this is where user comes in. He must know what images should scale or not.

The easiest way to give some WordPress power to a user is through shortcodes. I`m going to show you how to create a WordPress shortcode, meant to assign the responsive behavior to an image.

Usually, shortcodes and other custom functions are written inside functions.php file and I`m suggesting you do the same. The body of the shortcode is simple and what it does is to wrap in a div all the content found in it.

function responsive_images($atts, $content = null) {
     return '<div class="image-resized">' . $content .'</div>';
}

add_shortcode('responsive', 'responsive_images');

Here`s an example of how to use it:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive] 

If you inspect the image, you`ll see that now is wrapped by a div class called “image-resized”.

The last step is to assign the CSS rules to images between the shortcode by using @media-queries. Add this to your stylesheet:

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

In most cases, the code above works just fine but if you want to go further and assign different image dimensions for different screens, you can extend the media queries for certain dimensions:

/* 240px screens */
@media only screen and (max-width: 319px) {
    .image-resized img {
        width:240px;
        height:auto;
    }
}

/* 320px screens */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .image-resized img {
        width:320px;
        height:auto;
    }
}

/* 480px screens */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .image-resized img {
        width:480px;
        height:auto;
    }
}

Using a shortcode to implement a responsive behavior to images extends the standard CSS rules and offers to users the chance to actually involve in the process of web design. Although media queries exists since CSS version 2, the responsive phenomenon took dimension only recently and responsiveness based on CSS media queries is just a step forward to what it means mobile friendly websites. Nowadays, when most websites are jQuery enhanced with sliders and all kind of interactive stuff, the question raised is how would you adapt these features for mobile screens? But this is another discussion we`ll certainly approach in the future.