Enhancement: srcset support for responsive images

[MorpheusUK]

Hello,

Would it be possible to add an option to generate srcset tags for other flickr image sizes when inserting an image either automatically for all the sizes or via a check box next to each size that the user wants to have a srcset tag for.

I am currently using the RICG Responsive Image plugin but as this plugin doesn't use the media library it doesn't trigger that plugin and I generally host the majority of the sites pictures on Flickr.

Thanks

[hiddentao]

This would be possible, though note that I'm quite busy right now on other projects so won't be able to get around to this for a long while. PR is welcome.

[jbd7]

Hi ramesh,

How does that look like now?

I switched my theme to a responsive version, and would also like to see this feature in your plugin. I've actually been using WP Media Flickr (I had installed and slightly modified it before your fork appeared) and wonder if it's possible to use the class name of previously inserted Flickr images and make WP deliver the best size (_n.jpg, _z.jpg, _l.jpg) according to the screen size.

jb

[MorpheusUK]

Hi, I've been looking into getting this working for my site after jbd7 posted a function to add srcset tags on the WordPress forum for the plugin. I'm posting this here in case anyone else is interested in this. I've had very little time to investigate this but after playing around with the function and various regex's I've come to the conclusion 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 (the part before the "_" or simply the filename if no underscore is present before the file extension) 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 or partailly depending which image is picked by the browser from the srcset tag. 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.

This doesn't address any UI configuration for this but would generate srcset tags for all sizes.

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.

Morpheus