RWP to srcset images from Flickr

Resolved jbd7
(@jbd7)

11 years ago
Hi Stefan,

I came across your plugin that seems to do what I want, but my case is a bit different.

My blog posts have lots of photos. I inserted them with WP Flickr Embed plugin, and the code looks like
```
<div style="width: 510px" class="wp-caption aligncenter">
<a href="http://farm4.static.flickr.com/3788/flickr-url_b.jpg" data-lightview-group="xxx" data-lightview-options="xxx" class="lightview" title="xxx"  rel="lightbox" data-lightview-title="xxx">
<img title="xxx" src="https://farm4.staticflickr.com/3788/flickr-url.jpg" alt="xxx" width="500" height="375" />
</a>
<p class="wp-caption-text">Caption</p>
</div>
```
My theme got upgraded to a responsive version and I want my photos to use the no-more fixed-width layout. By the way, in the new theme, I noticed the <div> got replaced by <figure> and <figcaption>.

I would like, without modifying all my previous posts and thousands of embedded Flickr pictures, that width becomes 100%, and add srcset so that pictures of different sizes are picked up by the browser . As you may already know, Flickr stores images of different sizes that can be easily retrieved by changing the last letter of the URL (cf: https://www.flickr.com/services/api/misc.urls.html ).

I am referring to you to know what would be the safest and cleanest way to do this. I have no experience with PHP but am ready to trial-and-error with bits of code. I understood that I can either use your plugin and modify it so that it picks up Flickr URLs (I am not interested in applying it to my few images present in the WP media library), or create a filter in functions.php of my child theme that basically search/replace to get my desired result.

Thank you for providing any hint,

JB

https://wordpress.org/plugins/responsify-wp/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author stefanledin
(@stefanledin)

11 years ago

Hi JB!
Your Flickr images is still being loaded from flickr.com and isn’t saved to your WP media library, right? In that case, I’m afraid RWP can’t help you 🙁 RWP only works with images that is inserted into WordPress.

This is a great feature request for the WP Flickr Embed plugin though! 😉

Thread Starter jbd7
(@jbd7)

11 years ago

Right, it’s all hosted on Flickr servers.

Thanks for replying quickly, I will try with a filter then. The developer of that WP-Flickr plugin is busy and I’m afraid there are not enough WP devs with their content on Flickr to write such a feature.

All the best with your 1.9,

JB
Thread Starter jbd7
(@jbd7)

11 years ago
In case someone has the same setup as me, I managed to do what I wanted and here is a solution. It was easier than I thought.

I first added a filter to the caption shortcode to remove the width, as per https://wordpress.stackexchange.com/questions/129666/removing-height-and-width-from-images-with-a-caption

Then I added a filter in my child theme functions.php to remove width and height from the img tag and to add different Flickr sizes in srcset:
```
function responsify_flickr($content) {
    $content = preg_replace('/<img(.*src=\"(.*staticflickr.com.*).jpg\")(.*)width=\"(\d+)\"(.*)height=\"(\d+)\"(.*)\/>/i', '<img$1 srcset="$2_n.jpg 320w, $2.jpg 500w, $2_b.jpg 1024w"$3width="100%"$5$7/>', $content , -1);
    return $content;
}

add_filter( 'the_content', 'responsify_flickr' );
```

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘RWP to srcset images from Flickr’ is closed to new replies.

Tags