1

I'm trying to figure out how to output the WP images from the media uploader as Figure/Figcaption. Using the WP Twenty Sixteen theme the output is figure/figurecaption by default, and searching for the code I can't find how it's done. I thought that adding:

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

Was enough. BTW, I want to clarify how they do it or what is the proper way to make it work. I've found snippets like this from (here):

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 );

But in the Twenty Sixteen theme code I haven't found nothing similar.

1 Answer 1

1

add_theme_support( 'html5', array( 'gallery' ) ); or with another arguments such as search-form, comment-form, comment-list and caption, its call as Theme Markup

Added gallery and caption support was introduced since WordPress version 3.9.

As of version 3.9 WordPress uses <figure> and <figcaption> elements, instead of the generic definition list markup to output galleries. More on this in the Make WordPress Core article. ~ WordPress

add_filter( 'image_send_to_editor', 'image_add_caption', 20, 8 ); was default filter in WordPress ( see https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/default-filters.php#L441 ), thats why you can find it out in theme. With function image_add_caption, it will add shortcode [caption] in image.

4
  • 1
    Then, if I'm using the las wp version and have added html5 support, why the images does not output as figure/figcaption Commented Mar 16, 2016 at 9:18
  • For single image, you need to add text in Caption input field after you upload an image, then insert into editor, it will add shortcode caption for your image.
    – Jevuska
    Commented Mar 16, 2016 at 9:21
  • Thank you @Jevuska, it solved the problem. But, I think that even without caption the image element should be surrounded by the <figure> tag. Commented Mar 21, 2016 at 7:12
  • @Kevin I see, I think you sould add caption shortcode, it is a better approach to add element figcaption into selected image inside post content to display in front-end. If without shortcode as marker, and you need fire by function to add those elements into image in front-end, you will get many trouble which image that should use those elements. I hope you understand.
    – Jevuska
    Commented Mar 21, 2016 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.