jbd7

<p>Embed Pro Flickr is a WordPress plugin designed to help you customize the Flickr images embedded on your website, especially when working with the Flickr Embed block inside the Gutenberg editor.<br />
It also takes cares of Flickr images embedded manually, especially before WordPress 5.0, ensuring consistency in the visitor experience, and without modifying the database.</p>
<p>It is aimed at Flickr photographers who are also WordPress bloggers, and particularly to those who have been using this combo over the years and seen breaking changes.</p>
<p>Expected impact:</p>
<ul>
<li>Faster page load: visitors are only served the smallest image size necessary for their screen  </li>
<li>More visually appealing: higher resolution images are made available to the browser, for example to visitors with Retina screens, thanks to the image sizes already processed by Flickr </li>
<li>Ensures visual consistency between images embedded manually from Flickr, images embedded using the Caption shortcode and images embedded using the Flick Embed block</li>
<li>Increased SEO by automatically using Flickr metadata to set titles and captions</li>
</ul>
<p>Plugin features:</p>
<ul>
<li>Systematically add classes to Flickr Embed blocks</li>
<li>Customize what happens when clicking on an image embedded with the Flickr Embed block </li>
<li>Assign the Flickr photo title to the  tag</li>
<li>Make the Flickr photo page URL open in a new window</li>
<li>Automatically add a caption with the Flickr image title, and optionally hyperlink it</li>
<li>Make Flickr images responsive with <code>srcset</code> and <code>sizes</code> attributes, just like native WordPress images, improving the website loading time while serving better images to visitors. </li>
<li>Replace the hyperlinked Flickr page with the JPG image</li>
<li>Wrap lone <code><img></code> tags inside <code><figure></code> tags</li>
<li>Responsify caption shortcodes with fixed width, used in older version of WordPress</li>
</ul>
<p>Plugin chracteristics:</p>
<ul>
<li>Does NOT create new image sizes</li>
<li>Does NOT modify the database to operate. However, for debugging purposes, it can clear up cached oEmbed meta_keys in <code>wp_postmeta</code> faster than the 24-hour default</li>
<li>Lightweight (one single PHP page)</li>
<li>Has no visible component on the front end</li>
<li>Does not increase the site response time, provided a caching plugin is used</li>
</ul>
<h3>Configuration</h3>
<p>To configure plugin, go to ‘Settings’ -> ‘Embed Pro Flickr’ from the WordPress dashboard</p>


Embed Pro Flickr

Embed Pro Flickr helps you customize Flickr photos embedded in your WordPress site, improving user experience, performance and SEO.

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>


Embed Pro Flickr vs Responsify WP