Getting PB Responsive Images plugin to work with Wordpress Captions

PB Responsive Images is a great little plugin for Wordpress which enables support for responsive content images and requires minimal configuration.

The only problem is that it doesn't play nicely with Wordpress captions (the little descriptions that Wordpress can add underneath an image) and results in badly formatted HTML with no caption showing and the image scaled down to the smallest fallback size.

With a regular image, Wordpress will write the image code something like this ....

<img class="size-full wp-image-386" src="http://your-website.co.uk/wp-content/uploads/2014/11/your-imagejpg" alt="Image Alt Text" width="512" height="340" />

Which PB Responsive Images converts to something like this...

	<p>
		<a href="http://your-website.co.uk/wp-content/uploads/2009/10/your-image.jpg">
			<span data-picture data-alt="your-image" class="aligncenter size-full wp-image-351" data-width="1280" data-height="851">
				<span data-src="http://your-website.co.uk/slir/w300/wp-content/uploads/2009/10/your-image.jpg" data-media="all"></span>
				<noscript>
					<img src="http://your-website.co.uk/slir/w300/wp-content/uploads/2009/10/your-image.jpg" class="aligncenter size-full wp-image-351" alt="your-image" width="1280" height="851">
				</noscript>
				<span data-src="http://your-website.co.uk/slir/w470/wp-content/uploads/2009/10/your-image.jpg" data-media="(min-width:420px)"></span>
				<span data-src="http://your-website.co.uk/slir/w584/wp-content/uploads/2009/10/your-image.jpg" data-media="(min-width:600px) and (max-width:800px)"></span>
				<span data-src="http://your-website.co.uk/slir/w584/wp-content/uploads/2009/10/your-image.jpg" data-media="(min-width:885px)"></span>
			</span>
		</a>
	</p>

Now, if you add a caption to that same image, the code Wordpress generates looks like so...

	[caption id="attachment_386" align="aligncenter" width="512"]<img class="size-full wp-image-386" src="http://your-website.co.uk/wp-content/uploads/2014/11/your-imagejpg" alt="Image Alt Text" width="512" height="340" />The caption for the image[/caption]

And after the PB Responsive Images plugin has run the HTML will end up like so...

	<div id="attachment_387" style="width: 350px" class="wp-caption aligncenter">
		<img src="http://your-website.co.uk/slir/w300/wp-content/uploads/2014/11/your-image.jpg" class="size-full wp-image-387" alt="The image Alt Text" width="340" height="512">
		<p class="wp-caption-text">
			</noscript>
				<span data-src="http://your-website.co.uk/slir/w470/wp-content/uploads/2014/11/your-image.jpg" data-media="(min-width:420px)"></span>
				<span data-src="http://your-website.co.uk/slir/w584/wp-content/uploads/2014/11/your-image.jpg" data-media="(min-width:600px) and (max-width:800px)"></span>
				<span data-src="http://your-website.co.uk/slir/w584/wp-content/uploads/2014/11/your-image.jpg" data-media="(min-width:885px)"></span>
			</span> The caption for the image
		</p>
	</div>

As you can see the HTML that it outputs is pretty badly mangled, there is an opening <span> tag missing and the <noscript> tag is now self closing so there is no fallback image, plus the image that does remain will be resized by SLIR to 300px wide on all devices.

But fear not, with one tiny little modification it can be made to work perfectly.

If you navigate to wp-content/plugins/pb-responsive-images/responsive-image-polyfill.php and find the following line (line No. 120 on version 1.4.2) you will find the code that passes the content that Wordpress has written to the PB Responsive Images plugin so that it can be re-written into the new format.

	add_filter('the_content',array(&$this,'the_content'));

The problem here is that the PB Responsive Images plugin is running too soon, so it is converting the <img> tag into a series of <span> tags, before the Wordpress code that converts the [caption] shortcode has had chance to run. So when the caption code is ran it can't find the <img> tag anddoesnt format it correctly.

A quick look at the Wordpress function reference for add_filter shows that we can pass an optional parameter to the function in order to reduce it's priority and make it run later.

So if we reduce the priority from the default which is 10 to 20, it will run after the [caption] routine has finished, and this way it will still find a perfectly useable <img> within the caption code to do it's magic to.

	add_filter('the_content',array(&$this,'the_content'), 20);

Now, when the code is outputted it will be correctly formatted with the caption underneath and with all the responsive goodness that the plugin provides.

<div id="attachment_387" style="width: 350px" class="wp-caption aligncenter">
	<span data-picture data-alt="The image Alt Text" class="size-full wp-image-387" data-width="340" data-height="512">
		<span data-src="http://your-website.co.uk/slir/w300/wp-content/uploads/2014/11/your-image.jpg" data-media="all"></span>
		<noscript>
			<img src="http://your-website.co.uk/slir/w300/wp-content/uploads/2014/11/your-image.jpg" class="size-full wp-image-387" alt="The image Alt Text" width="340" height="512">
		</noscript>
		<span data-src="http://your-website.co.uk/slir/w470/wp-content/uploads/2014/11/your-image.jpg" data-media="(min-width:420px)"></span>
		<span data-src="http://your-website.co.uk/slir/w584/wp-content/uploads/2014/11/your-image.jpg" data-media="(min-width:600px) and (max-width:800px)"></span>
		<span data-src="http://your-website.co.uk/slir/w584/wp-content/uploads/2014/11/your-image.jpg" data-media="(min-width:885px)"></span>
	</span>
	<p class="wp-caption-text">The caption for the image</p>
</div>
By Karl Payne

Comments

There are no comments, don't be shy, somebody has to be first.

Leave a comment