Go Semantic For More Responsive And Flexible WordPress Images and Embeds

Go Semantic For More Responsive And Flexible WordPress Images and Embeds

Quite a chunk of the HTML output of your WordPress site comes not from your theme but from the bowels of the WordPress core.

A combination of WordPress’ age and a necessary requirement for backwards compatibility, some of that markup is decidedly old-fashioned.

If you want truly responsive and flexible images and embeds, you need to get modern and semantic.

Tag cloud of image related markup
Bring html5 semantic markup to your WordPress site’s images

In version 3.6, WordPress added Semantic Markup as a theme feature. This allowed any theme to generate updated markup when calling functions such as wp_list_comments, comment_form and get_search_form.

Version 3.9 added two more options to Semantic Markup, gallery and caption, which updates the generated HTML for images and galleries.

For example, this is the legacy markup for two images, one with a caption and one without:

{code}

/* image with caption */
<div id=”attachment_1041″ style=”width: 212px” class=”wp-caption alignnone”>
<img class=”size-medium wp-image-1041″ src=”http://www.test.dev/wp-content/uploads/2013/03/spider-man-202×300.jpg” alt=”The Amazing Spider Man” width=”202″ height=”300″>
<p class=”wp-caption-text”>The Amazing Spider Man</p>
</div>

/* image without caption */
<p>
<img class=”alignnone wp-image-1042 size-medium” src=”http://www.test.dev/wp-content/uploads/2013/03/the-dark-knight-rises-198×300.jpg” alt=”The Dark Knight Rises” width=”198″ height=”300″>
</p>

{/code}

And this is the markup once caption is added to the Semantic Markup feature list:

{code}

/* image with caption */
<figure id=”attachment_1041″ style=”width: 202px;” class=”wp-caption alignnone”>
<img class=”size-medium wp-image-1041″ src=”http://www.test.dev/wp-content/uploads/2013/03/spider-man-202×300.jpg” alt=”The Amazing Spider Man” width=”202″ height=”300″>
<figcaption class=”wp-caption-text”>The Amazing Spider Man</figcaption>
</figure>

/* image without caption */
<p>
<img class=”alignnone wp-image-1042 size-medium” src=”http://www.test.dev/wp-content/uploads/2013/03/the-dark-knight-rises-198×300.jpg” alt=”The Dark Knight Rises” width=”198″ height=”300″>
</p>

{/code}

As you can see the original div on the image with a caption has been replaced with by figure and the caption itself placed within figcaption rather than a p element with the class of  wp-caption-text.

To activate this change in markup, you can either create the world’s simplest plugin that adds the theme feature support using the after_theme_setup action:

Or you can simply include the function and the add_action statement in your theme’s functions.php file (to be properly “semantic” then it should be in a child theme functions.php).

As useful as this is, there are still two issues with this markup. Firstly, the dimensions are still hardcoded on elements using width, height and style attributes when we probably want to be able to control this in our CSS. Secondly, the caption-less image is still wrapped in a p element which nearly always will require some corrective styling.

Fortunately, help is at hand with the very recently released plugin, Pco Media Handler.

This plugin adds the theme feature support for captions, addresses the two issues I mentioned and adds a couple of extra useful features:

  1. Removes p elements that wrap around inline images
  2. Makes avatars responsive by removing width and height
  3. Makes images in the post content responsive by removing width and height
  4. Makes featured images responsive by removing width and height
  5. Changes inline images that have captions to use the standard html5 figure/figcaption elements (only if not already defined in your theme features)
  6. Makes oembeds responsive, so that they fit the width of the container
  7. Links inline image to none by default, not to the media file

Simply removing the hardcoded dimensions means that you have total control over your images and media and by applying a width of 100% in your CSS can make them fully responsive.

Of course, semantic markup has other advantages not the least of which is the ability to work out how content items are related.

The figure element clearly identifies images that are actually related to the content (and is probably justification in itself for always adding a caption, even if you decide to hide it with CSS) whilst a figcaption is obviously the caption for its sibling img. These relationships can only be tenuously assumed with the original WordPress markup using div and p instead of figure and figcaption.

Plenty of advantages, then, in bringing the markup of your site up to date: cleaner markup, easier styling, better responsiveness and the ability to explicitly determine how the components in your content are related.