Core Essentials

Responsive Picture Block

Create truly responsive, art-directed images in the block editor. Wrap multiple Image blocks (Desktop/Tablet/Mobile/Custom) and render a single HTML e …

stefanledin

<p>Responsify WP is the WordPress plugin that cares about responsive images.</p>
<h3>Features</h3>
<ul>
<li>Use <code>img</code> with srcset/sizes attributes.</li>
<li>…or the <code>picture</code> element.</li>
<li>Works with or without <a href="http://scottjehl.github.io/picturefill/" rel="nofollow ugc">Picturefill</a>.</li>
<li>Supports high resolution images (retina).</li>
<li>Custom media queries.</li>
<li>Handpick which image sizes to use.</li>
<li>Responsive background images.</li>
</ul>
<h3><a href="https://www.youtube.com/watch?v=3ThYWO6vHKI&spfreload=10" rel="nofollow ugc">Demo</a></h3>
<p>Responsify WP finds featured images and all images inside the content and makes them responsive.<br />
For example, you might have a template that looks like this:</p>
<pre><code><article>
    <h1><?php the_title();?></h1>
    <?php the_content();?>
</article>
</code></pre>
<p>That will output something like this:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img src="large.jpg" alt="Image description">
</article>
</code></pre>
<p>But once you have activated the plugin, it will look like this instead:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img sizes="(min-width: 300px) 1024px, (min-width: 150x) 300px, 150px"
        srcset="thumbnail.jpg 150w,
        medium.jpg 300w,
        large.jpg 1024w"
        alt="Image description">
</article>
</code></pre>
<p>You can also choose to use the <code>picture</code> element instead:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <picture>
        <source srcset="full-size.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>
</article>
</code></pre>
<p>It also works with high resolution (retina) images:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <picture>
        <source srcset="full-size.jpg" media="(min-width: 1024px)">
        <source srcset="large.jpg, large_retina.jpg 2x" media="(min-width: 300px)">
        <source srcset="medium.jpg, medium_retina.jpg 2x" media="(min-width: 150px)">
        <img srcset="thumbnail.jpg, thumbnail_retina.jpg 2x" alt="Image description">
    </picture>
</article>
</code></pre>
<p>The different versions of the image in the examples above is in the standard <code>thumbnail</code>, <code>medium</code>, <code>large</code> and <code>full</code> sizes.<br />
The <strong>media queries</strong> are based on the width of the “previous” image.<br />
Any <strong>custom sizes</strong> of the image will also be found and used.</p>
<h3>Settings</h3>
<p>You can <strong>select which image sizes</strong> that the plugin should use from the RWP settings page.<br />
These settings can be overwritten from your templates.</p>
<pre><code><?php

// Using get_posts()
$posts = get_posts( array(
    'post_type' => 'portfolio',
    'rwp_settings' => array(
        'sizes' => array('large', 'full')
    )
) );
foreach( $posts as $post ) {
    // ...
}

// Using WP_Query()
$query = new WP_Query( array(
    'category_name' => 'wordpress',
    'rwp_settings' => array(
        'sizes' => array('large', 'full')
    )
) );
if ( $query->have_posts() ) {
    // ...
}
?>
</code></pre>
<p><strong>Available settings:</strong></p>
<ul>
<li>Select which image sizes to use.</li>
<li>Set/override attributes.</li>
<li>Set custom media queries.</li>
<li>Turn on/off retina.</li>
<li>Ignore image formats.</li>
</ul>
<h3>Functions</h3>
<p>RWP provides a number of functions that can generate responsive images in your templates.<br />
Let’s say that you have the following markup for a very large header image:</p>
<pre><code><header>
    <?php the_post_thumbnail( 'full' ); ?>
</header>
</code></pre>
<p>As you probably know, <code>the_post_thumbnail()</code> will create a regular <code><img></code> tag with the full-size image in this case.<br />
But you don’t want to send a big 1440px image to a mobile device. This can easily be solved like this:</p>
<pre><code><header>
    <?php
    $thumbnail_id = get_post_thumbnail_id( $post->ID );

    // Generate an <img> tag with srcset/sizes attributes.
    echo rwp_img( $thumbnail_id );

    // Generate a <picture> element
    echo rwp_picture( $thumbnail_id );
    ?>
</header>
</code></pre>
<h3>Website</h3>
<p><a href="http://responsifywp.com" rel="nofollow ugc">http://responsifywp.com</a>.</p>
<h3>Demo</h3>
<p><a href="http://responsifywp.com/demo" rel="nofollow ugc">http://responsifywp.com/demo</a>.</p>
<h3>Documentation and examples</h3>
<p><a href="https://github.com/stefanledin/responsify-wp" rel="nofollow ugc">https://github.com/stefanledin/responsify-wp</a>.</p>
<h3>Requirements</h3>
<ul>
<li>PHP 5.3</li>
</ul>


Alternatives to Responsify WP

Top alternatives