Feature Request: srcset support for responsive images

Hi MorpheusUK. I wanted the same thing, here is what I did. It also removes the fixed width that the plugin enforces.

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' );

The fallback picture for browsers not supporting srcset is the one you had initially selected, which remains in the src attribute. You can edit the regex to add more sizes in the srcset so that it fits your needs and what’s available among your flickr photos.

jb

Hi jb,

I’ve been a bit busy recently so haven’t had much time to work on the site but will give that a try.

Thanks,

Morpheus

Hi JB,

Okay just gave that a try using various caption removal options in that thread and without them and just your function and in many cases for me this seems to result in a white box saying image is no longer available (which it is). Removing the responsify_flickr function fixes this.

Any ideas,

What’s going wrong, sorry, I’m more of a Java, C++ guy and don’t really know PHP.

An example of one of the image URLs that breaks is:
<img style="width: 480px; height: 640px;" title="Staffordshire International Karate Championship 2015" src="https://farm8.staticflickr.com/7774/17501816105_0acbc2aa26_z.jpg" alt="Staffordshire International Karate Championship 2015" height="640" width="480"></img>

Cheers

Okay I have been playing around with the regex and i think it should be something like:

<img(.*src=\"(.*staticflickr\.com.*)(_.*)\.jpg\")(.*)height=\"(\d+)\"(.*)width=\"(\d+)\"(.*)>

However I’m not sure what $5 and $7 were supposed to be doing in the replacement string of your original, they map to the width and heigh values I think.

The one I have created above breaks down as follows with the URL in my previous post

1. [4-172] style="width: 480px; height: 640px;" title="Staffordshire International Karate Championship 2015" src="https://farm8.staticflickr.com/7774/17501816105_0acbc2aa26_z.jpg"
2. [108-165] https://farm8.staticflickr.com/7774/17501816105_0acbc2aa26
3. [165-167] _z
4. [172-232] alt="Staffordshire International Karate Championship 2015"
5. [240-243] 640
6. [244-245]
7. [252-255] 480
8. [256-256]

Okay just tried the following which breaks a different set of images:

function responsify_flickr($content) {
    $content = preg_replace('/<img(.*src=\"(.*staticflickr\.com.*)(_.*)\.jpg\")(.*)height=\"(\d+)\"(.*)width=\"(\d+)\"(.*)>/i', '<img$1 srcset="$2_n.jpg 320w, $2.jpg 500w, $2_b.jpg 1024w"$4 width="100%" height=\"$5\" width=\"$7\"/>', $content , -1);
    return $content;
}

add_filter( 'the_content', 'responsify_flickr' );

I don’t think the regex can be this universal, maybe the content needs to undergo multiple filters? At present trying to implement this is breaking some of the images (the static ones are from this plugin)

I’ve been trying this filter on this and the subsequent pages: https://www.birminghamshotokan.com/news-2/latest-bhskc/

You’re right, the regex should be adapted to match your img tag patterns. I see you have a
style="width: 480px; height: 640px;
on yours, so you would have to take it into consideration. I’m guessing any width and height can be ditched because you want your site and images to be responsive.

I used https://www.phpliveregex.com/ to test it with some sample code from my site.

Hi jbd7,

Really just to keep you in the loop as whatever I come up with may prove useful to you, I haven’t had a huge amount of time to play with this further but have had another go today, the test function is below:

function responsify_flickr($content) {
    $content = preg_replace('/<img(.*title=\"(.*)\")(.*src=\"(.*staticflickr\.com.*)(_.*)\.jpg\")(.*alt=\"(.*)\")(.*)height=\"(\d+)\"(.*)width=\"(\d+)\"(.*)>/i', '<img src="$4_o.jpg" srcset="$4_n.jpg 320w, $4.jpg 500w, $4_z.jpg 640w, $4_c.jpg 800w, $4_b.jpg 1024w, $4_h.jpg 1600w, $4_k.jpg 2048w" title="$2" alt="$7" width="100%" height="$9"/>', $content , -1);
    return $content;
}
add_filter( 'the_content', 'responsify_flickr' );

I used the function above which covers all the main resolution categories from Flickr sometimes with multiple values. This wont work as the base filenames change for some of the resolutions. On one example I have been looking at they seem consistent between 320 and 1024 but the original filename and larger sizes have different bases. This means that depending on which image size you selected when adding the image will determine whether the function will work at all. If you picked the original image size (denoted with “_o” in flickr) then it will fail. Same if you had picked one above 1024 wide.

I think the way to solve this so that it works in all situations is to change the insertImage function in the wp-flickr-embed.js file of the plugin to get a list of image names for each size and add the srcset attribute there.

I think it should be possible to get the url data when the callbackPhotoSizes method is called and either build up the srcset tag whilst it is processing the list and store it or store the returned list and build it up in the insertImage function.

Unfortunately I don’t have time to try this now or a suitable WordPress development environment to test it as I wouldn’t want to do that on the live site so it will have to wait until I next get some free time to play with this.

I’ll also post this on the github page in case anyone takes an interest.

Morpheus