Gallery definition lists do not validate

[splorp]

The definition lists that are used to display gallery content do not validate if an image does not have a caption associated with it. The image caption is normally placed within the list’s <dd> element. If the caption is not present, the <dd> element is not rendered, causing the list to not validate.

One solution owuld be to change the gallery thumbnail and image layouts to something other than definition lists. Otherwise, we could simply render out an empty or “untitled” <dd> element.

[danrubin]

I've just been doing some thinking/reading/coding around images and captions, and for The Photographic Journal I'm using <figure> and <figcaption> for this very reason (well, and they feel like the correct semantic choice).

<figcaption> is optional, so no issue there, and the <img> tag can be wrapped within <figure> (that's how it's intended), so we still get the benefit of a wrapping element around the image, and no negative issues if a caption (and its element) are not present.

What we lose is the unformatted list presentation, but this too is easy: put each <figure> in an <li>:

<ul>
  <li>
    <figure>
      <img>
      <figcaption>
    </figure>
  </li>
</ul>

and problem solved. Styling an unordered list is such a common practice that it actually ends up being a better combination of elements than the definition list, which I find can be a bitch sometimes when you want to keep the <dt> and <dd> pair grouped together.

Thoughts? :)

[splorp]

Brilliant.

Why I hadn’t I thought about the <figure> and <figcaption> elements is beyond me. They make perfect (and semantic) sense. After all, this is supposed to be an HTML5-savvy theme, right?

I would consider leaving out the unordered list elements altogether, as they do add quite a bit more markup. I’d like to test both ways and see how HTML5 Shiv handles the backwards compatibility, if we leave out the list.

[danrubin]

No disagreement; was only thinking the <ul> would allow a more ordered structure (visually and semantically) when everything is unstyled, but that's not a requirement by any means.

[splorp]

This slick chunk of code that Chris found could help a lot. It adds a filter to the image_send_to_editor function in the Media Uploader, wrapping inserted images in proper <figure> and <figcaption> elements.

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $html5 = "<figure id='post-$id media-$id' class='align-$align'>";
  $html5 .= "<img src='$url' alt='$title' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  }
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

[splorp]

The following function added in WordPress 3.6 implements HTML5 markup in various places, including the gallery.

add_theme_support( 'html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ));

https://codex.wordpress.org/Theme_Markup

This function was added to theme in commit 7da1420

[splorp]

Related to issue #62