CSS Classes in Anchor Tags

When adding classes to the anchor tags wrapping the images, the preg_replace_callback calls do not find the appropriate a+img strings if the classes come between “<a” and “href”. If the classes are after the href, it works fine.

Example:
works: <a href="/wp-content/uploads/image.jpg" class="lightbox"><img src="...
does not work: <a class="lightbox" href="/wp-content/uploads/image.jpg"><img src="...

The real issue here is that the WordPress visual editor keeps relocating classes from the end of the anchor tags to the beginning. So I can manually put the classes in the right place with the code editor, but as soon as another user edits the post, it breaks.

I have remedied this with a small tweak to the regex strings:

function output($content) {
	$content = preg_replace_callback(
		'/(<a.[^>]*href=["\'])(.[^"]*?)(["\'])(.[^>]*)(><img )/s',
		array(get_class($this), 'output_callback'),
		$content);
	$content = preg_replace_callback(
		'/(<a.[^>]*href=["\'])(.[^"]*?)(["\'])(><img )/s',
		array(get_class($this), 'output_callback'),
		$content);
	return $content;
}

I haven’t really thought it through to determine if this would cause false positives in certain scenarios, so take this suggestion carefully.

Thanks for the plugin!