Loading...

The problem

You may have noticed that when WordPress inserts an image into the Editor it creates this kind of code:

<a title="foobar" href="http://url_to_image.jpg">
    <img class="align size-full" title="foobar" src="url_to_image.jpg" alt="foobar"/>
</a>

And if you include a caption to the image it will show up like this:

[ caption id="attachment_id" align="align" width="xxx" ]
    <a href="url_to_image.jpg">
        <img src="url_to_image.jpg" alt="" title="foobar" width="xxx" height="yyy" class="size-large" />
    </a> 
Caption Here[ /caption ]

But that is obviously not correct Html5 markup and not at all semantic or parsable by robots. I’m very surprised at how slowly WordPress adapts to Html5, while it’s already been going on for years now.

The solution

So here’s the hack.

Edit your functions.php (ideally you’re working on a Child copy) and add the following:

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
$url = wp_get_attachment_url($id);
$src = wp_get_attachment_image_src( $id, $size, false );

if ($caption) {
	$html5 = "<figure class='align$align withcaption' >";
	$html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' /></a>";
	$html5 .= "<figcaption>$caption</figcaption>";
	$html5 .= "</figure>";
} else {
	$html5 = "<figure class='align$align nocaption' >";
	$html5 .= "<a href='$url' data-title='$caption'><img src='$src[0]' alt='$alt' /></a>";
	$html5 .= "</figure>";
}

return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

What this does is hook this new function that re-writes the html being sent to the editor from the Media Browser making use of Html5’s figure and figcaption tags.

So now, for newly inserted images (not the already inserted ones), you get this code instead:

<figure class="align nocaption">
    <a href="url_to_image.jpg"><img src="url_to_image.jpg" alt="Alt text"></a>
</figure>

And with a caption:

<figure class="align withcaption">
    <a href="url_to_image.jpg" data-title='Caption Here'><img src="url_to_image.jpg" alt="Alt text"></a>
    <figcaption>Caption Here</figcaption>
</figure>

The styling

Finally, it is very easy to style these new tags. Here’s an example:


/* Restyling for figcaptions */

#main-content figure.withcaption {
	border: 1px solid #DDD;
	padding:5px;
	background: #fff;
	border-radius: 3px;
}

#main-content figcaption {
	background: #FFF;
	color: #666;
	text-align: center;
	padding: 5px 0;
	color: #8c8d94;
	font-size: .8em;
	font-style:italic;
}

This is an example of a styled Html5 figcaption imported directly from the Media Browser.
This is an example of a styled Html5 figcaption imported directly from the Media Browser.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

One Reply to “Html5 correct figure captioning for WordPress”

  1. Active Screen Scrolling Mockup for Websites | Obsessive Coffee Disorder says: July 31, 2014 at 4:56 pm

    […] Human Html5 correct figure captioning for WordPress Easy peasy MAMP installation […]

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.