How to Easily Make WordPress Images Responsive!

In this article, we’ll look at how to use WordPress’ built-in featured images capability to deliver different-sized image files to different devices. “Featured images,” sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3.

It enables you to specify a featured image for each post and display it with the post’s content. The fact that the image is stored in the post’s meta data, rather than embedded in the post’s content, means we can use it more flexibly, as we shall see. Its automatically adapt to smaller screens such as iPad. Make WordPress images responsive is not difficult to do: Here is a simple recipe to achieve it on your blog.

The first thing to do is to create the shortcode. To do so, open your functions.php file and paste the following code in it:

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

add_shortcode('responsive', 'responsive_images');

Once done, open your style.css file and add those CSS rules:

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

You can now use the [responsive] shortcode to insert responsive images in your blog:

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

Thanks to Rockable Themes for the tip!

The post How to Easily Make WordPress Images Responsive! appeared first on WordPress Experts.