Responsify WP

Cares about responsive images. So should you

Download

Responsive images.
Plug and play

Responsify WP searches through your content and makes all images responsive. It finds and uses the various image sizes that WordPress generates.

Before

<article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img src="full.jpg" alt="Image description">
</article>

After

<article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img sizes="(min-width: 1024px) 2048px,
        (min-width: 300px) 1024px,
        (min-width: 150px) 300px,
        150px" 
        srcset="thumbnail.jpg 150w,
        medium.jpg 300w,
        large.jpg 1024w,
        full.jpg 2048w"
        alt="Image description">
</article>

Image or picture

Use img with srcset/sizes attributes. Or the picture element. Responsify WP supports both.

img[srcset/sizes]

<img sizes="(min-width: 1024px) 2048px,
    (min-width: 300px) 1024px,
    (min-width: 150px) 300px,
    150px" 
    srcset="thumbnail.jpg 150w,
    medium.jpg 300w,
    large.jpg 1024w,
    full.jpg 2048w"
    alt="Image description">

picture

<picture>
    <source srcset="full.jpg" media="(min-width: 1024px)">
    <source srcset="large.jpg" media="(min-width: 300px)">
    <source srcset="medium.jpg" media="(min-width: 150px)">
    <img srcset="thumbnail.jpg" alt="Image description">
</picture>

Retina support

Responsify WP supports high resolution, or retina, images. Devices with high pixel ratio will be served a larger verion of the image, thus making it look crisp and sharp.

Simply add custom image sizes for 1.5x, 2x or whatever pixel density you want.

Add sizes

<?php
add_image_size( 'thumbnail@1.5x', 225, 225 );
add_image_size( 'medium@1.5x', 450, 450 );
add_image_size( 'large@1.5x', 1536, 1536 );

add_image_size( 'medium@2x', 600, 600 );
add_image_size( 'large@2x', 2048, 2048 );

add_image_size( 'medium@3x', 900, 900 );
?>

picture

<picture>
    <source srcset="large.jpg, large@1.5x.jpg 1.5x, large@2x.jpg 2x" media="(min-width: 300px)">
    <source srcset="medium.jpg, medium@1.5x.jpg 1.5x medium@2x.jpg 2x, medium-retina-xxl.jpg 3x" media="(min-width: 150px)">
    <img srcset="thumbnail.jpg, thumbnail@1.5x.jpg 1.5x" alt="Image description">
</picture>

img

<img 
    srcset="thumbnail.jpg 150w, thumbnail@1.5x 225w, medium.jpg 300w, medium@1.5x.jpg 450w, medium@2x 600w, large.jpg 1024w, large@1.5x 1536w, large@2x 2048w"
    sizes="(min-width: 300px) 1024px, (min-width: 150px) 300px, 150px">

Uses Picturefill, if you want

Responsify WP comes with the excellent Picturefill polyfill which takes care of browser support for you.

Picturefill

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="full.jpg" media="(min-width: 1024px)">
    <source srcset="large.jpg" media="(min-width: 300px)">
    <source srcset="medium.jpg" media="(min-width: 150px)">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="thumbnail.jpg">
</picture>

Native mode

<picture>
    <source srcset="full.jpg" media="(min-width: 1024px)">
    <source srcset="large.jpg" media="(min-width: 300px)">
    <source srcset="medium.jpg" media="(min-width: 150px)">
    <img src="thumbnail.jpg">
</picture>

Easy to customize

Do you need to override the default behavior? Responsify WP is made to be customized. Your responsive images can be tailor made by passing the rwp_settings array to a post query.

Custom media queries

<?php
$args = array(
    'rwp_settings' => array(
        'media_queries' => array(
            'medium' => 'min-width: 500px',
            'large' => 'min-width: 1024px',
            'full' => 'min-width: 2000px'
        )
    )
);
$query = new WP_Query( $args );
?>

Output:

<picture>
    <source srcset="full.jpg" media="(min-width: 2000px)">
    <source srcset="large.jpg" media="(min-width: 1024px)">
    <source srcset="medium.jpg" media="(min-width: 500px)">
    <img srcset="thumbnail.jpg">
</picture>

Handpick sizes

<?php
$args = array(
    'rwp_settings' => array(
        'sizes' => array('thumbnail', 'medium', 'large')
    )
);
$posts = get_posts( $args );
?>

Output:

<img srcset="thumbnail.jpg 150w, medium.jpg 300w, large.jpg 1024w" sizes="...">

Powerful functions

Generate markup

Outside the loop? No problems, the rwp_img() or rwp_picture() functions helps you whenever, and wherever you need it.

<?php
// Generates a picture element
echo rwp_picture( $attachment_id, $optional_settings );
// Generates a img tag with srcset/sizes attributes
echo rwp_img( $attachment_id, $optional_settings );
?>

Output:

<picture>
    <source srcset="[...]" media="[...]">
    <img srcset="[...]">
</picture>

<img sizes="[...]" srcset="[...]">

Just the attributes

This function returns an array of attributes for a specified element.

<?php
$img_attributes = rwp_attributes( $attachment_id, array(
    'element' => 'img'
) );
?>

Output:

Array(
    ['srcset'] => thumbnail.jpg 150w, medium.jpg 300w, large.jpg 1024w
    ['sizes'] => (min-width: 300px) 1024px, (min-width: 150px) 300px, 150px
)

Responsive backgrounds

This function creates an style tag with CSS for your dynamic background image.

<?php
$background = get_field('header_image');
echo rwp_style( $background, array(
    'selector' => '#page-header'
) );
?>

Output:

#page-header {
    background-image: url("thumbnail.jpg");
}
@media screen and (min-width: 150px) {
    #page-header {
        background-image: url("medium.jpg");
    }
} 
/* And so on... */