Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Punal Chotrani
Punal Chotrani
8,817 Points
Posted by Punal Chotrani
Punal Chotrani
8,817 Points

Wordpress editor filter

I'm using the 'image_send_to_editor' filter, to add proper HTML 5 semantics

<figure>
        <img class="alignright" src="/wp-content/themes/tna-base-long-form/images/demo/image 7.jpg">
       <figcaption class="wp-caption-text">Caption: IMAGE%203</figcaption>
</figure>

I have found a function that wraps all images and captions in that format.

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $src  = wp_get_attachment_image_src( $id, $size, false );
    $html5 = "<figure>";
    $html5 .= "<img src='$src[0]' alt='$alt' class='img-responsive full-width' />";
    if ($caption) {
        $html5 .= "<figcaption class='wp-caption-text'>$caption</figcaption>";
    }
    $html5 .= "</figure>";
    return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

I have tried to modify this function, by using parameters of 'image_send_to_editor', '$align' or '$size', in order to wrap my above html a HTML div if has a property of 

$align = 'Right' or  $align = 'Left' or $size = 'Medium'

To try and achieve this

<div class="col-md-6">
   <figure>
        <img class="alignright" src="/wp-content/themes/tna-base-long-form/images/demo/image 7.jpg">
       <figcaption class="wp-caption-text">Caption: IMAGE%203</figcaption>
   </figure>
</div>

This is what i have written

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $src  = wp_get_attachment_image_src( $id, $size, false );
    $html = get_image_tag($id, '', $title, $align, $size);
    if ($size) {
        $html5 = "<div class='col-md-6'>";
    }
    $html5 = "<figure>";
    $html5 .= "<img src='$src[0]' alt='$alt' class='img-responsive full-width' />";
    if ($caption) {
        $html5 .= "<figcaption class='wp-caption-text'>$caption</figcaption>";
    }
    $html5 .= "</figure>";
    if ($size) {
        $html5 .= "</div>&nbsp;";
    }
    return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

But does'nt seem to be working.

If anyone can point out where i'm going wrong, or provide any kind of assistance i'd really appreciate it. Thanks