Filter the images in to HTML markup to send to the editor

Today, I have created the filter hook function to filters every images when I add them in WordPress Editor in to the <figure></figure> HTML Markup, and I used the image_send_to_editor filter to do this.

When I add the image without Caption, the images are added to the <figure></figure> HTML Markup without any problem, but when I used the caption with image, the image doesn’t add to the <figure></figure> HTML Markup. This is the function I used within my functions.php

<?php

  function YPE_filter_images_in_editor($html,$id,$caption,$title,$align,$url,$size,$alt) {

    $html   = get_image_tag( $id, $alt, $title, $align, $size );
    $html5  = "<figure id='post-$id media-$id' class='figure align$align'>";
    $html5 .= $html;
    $image_parse = wp_prepare_attachment_for_js($id);
    $caption     = $image_parse['caption'];

    if(!empty($caption)) {
      $html5 .= "<figcaption>$caption</figcaption>";
    }

    $html5 .= "</figure>";
    return $html5;
  }

  add_filter( 'image_send_to_editor', 'YPE_filter_images_in_editor', 10, 9);

?>

Related posts