Blogestudio

Pau Iglesias

<p>For each image uploaded WordPress generates several versions with different sizes. These images will be inserted<br />
in the post content using the visual editor selecting the right format size for the current theme, so that<br />
images can be displayed correctly in the theme layout avoiding the overflow to the sidebars or another elements.</p>
<p>These images are now part of the content, and are harcoded in posts independently to any change in the design<br />
or behavior of the blog.</p>
<p>Therefore, when switching your theme to another theme smaller, or the new theme is very big respect the old<br />
layout, may be these images do not fit perfectly with the new design.</p>
<p>For these cases the purpose of this plugin is the searching in the post content of images with the old image sizes<br />
(that result bad sizes for the current theme) and replace it for the right image format: thumbnail, medium, large,<br />
full or custom format size.</p>
<p>The process is simple and consists of three steps. The first step is a form to introduce the width to find, or the<br />
period between two widths separated by an hyphen (-) with max 100 points of difference. Optionally you can enter<br />
a custom post type, or leave blank for the ‘post’ post type.</p>
<p>In the next step present the coincidence or multiple coincidences for each post, with the old html code in grey color,<br />
and in black the replacement, and also the new image is displayed. For each item there is a checkbox (by default checked)<br />
that you can uncheck if the result is wrong or an exception.</p>
<p>Finally, at the end of the list, a submit button can perform these changes. Before this final step, is advisable to<br />
backup your posts table.</p>


Replace Content Image Size

What a simple and effective plugin to get the job done.

I was able to replace old Image Sizes to the New Image sizes with one click.

And before changing the sizes, it gave me preview for all OLD image html tags and the new tags will be...

Thank you so much for the great plugin!

Great work Pau Iglesias!


Gets the Job Done, Perfectly!

Find images displayed in posts content and change the format size, very useful when you change the blog theme.

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>


Replace Content Image Size vs Responsify WP