Customizing individual images on posts

Question

So I'm trying to customize the output of single image in my posts, adding custom divs and classes. I found a good tutorial online here - How to wrap every image in a post with a div?

The function works in that when I add an image it put its in a a . Then is goes directly to displaying the $html img and doesn't show a containing link with the $url as the href. This is not a huge issue, I can always just work the returning $html content.

The main issue I'm having is when I add a paragraph under a inserted image in Wordpress, the paragraph text is also wrapped in a .

Here's the function:

add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );    
function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    return '

     <div id="js-simple-lightbox Testing" class="cbp">
        <div class="cbp-item">
            <a href="'. $url . '" data-title="Workout Buddy<br>by Tiberiu Neamu">
              <div class="cbp-caption-defaultWrap">'. $html .'</div>
              </a>
            </div><!-- end cbp-item -->
        </div>
    </div>';


}

Here's the output in Wordpress WYSIWIG editor on Text:

<div id="js-simple-lightbox Testing" class="cbp">
<div class="cbp-item">
<div class="cbp-caption-defaultWrap"><a href="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.05-AM1.png"><img class="alignnone size-full wp-image-243 img-responsive" src="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.05-AM1.png" alt="Screen Shot 2015-10-28 at 1.46.05 AM" width="290" height="381" /></a></div>
</div>
</div>
<div class="cbp-caption-defaultWrap"></div>
<div class="cbp-caption-defaultWrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula magna tristique, porta diam ornare, lacinia arcu. Sed ac augue mi. In purus turpis, imperdiet eget dui id, convallis sodales velit. Etiam ante lorem, aliquam vitae neque quis, pretium bibendum nisl. Nullam pellentesque leo dui, et lobortis est ornare non. Morbi suscipit orci a tellus vehicula vehicula a a justo. Suspendisse aliquet mattis nunc,</div>
<div class="cbp-caption-defaultWrap"></div>
<div class="cbp-caption-defaultWrap">
<div id="js-simple-lightbox Testing" class="cbp">
<div class="cbp-item">
<div class="cbp-caption-defaultWrap"><a href="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.10-AM1.png"><img class="alignnone size-full wp-image-241 img-responsive" src="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.10-AM1.png" alt="Screen Shot 2015-10-28 at 1.46.10 AM" width="268" height="440" /></a></div>
</div>
<!-- end cbp-item -->

</div>
</div>

Here's what I put in Wordpress WYSIWIG editor on Visual:

Please let me know if you have any suggestions on how to get this working properly. If you know of another solution to editing single inserted images on posts I'd love to hear about. I'm trying not to effect any other inserted media such as galleries, so anything that filters just img tags in the posts won't be helpful.

Answer 1

The best answer I had was to add a &nbsp in the function callback html at the end of the section tag. This forced the curser out of section wrapper in the WYSIWIG of Wordpress. It's not the perfect fix but it worked.

function html5_insert_image($html, $id, $caption, $title, $alt, $align, $url) {
$url = wp_get_attachment_url($id);
$html5 = "<section class='js-simple-lightbox'>";
$html5 .= "<figure class='cbp-item'>";
$html5 .= "<a  class='cbp-lightbox' data-title='$title' href='$url'>";
$html5 .= "<img class='img-responsive' src='$url' alt='$alt' width='100%' />";
$html5 .="</a>";
$html5 .= "</figure>";
$html5 .= "</section>&nbsp;";
return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );