Wrapping images in tags based on size

1 Views

I am making a site for a client where all the thumbnails on a page need to be styled differently than regular sized images. Right now I have a snippet of code I found that allows me to wrap every image inserted into a post in a div, but I would like to only wrap the thumbnails.

Code:

Read More
function filter_images($content){
    return preg_replace('/<img (.*) />s*/iU', '<div class="post-thumb"><img 1 /></div>', $content);
}
add_filter('the_content', 'filter_images');

Is there a way I can do this?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can wrap specific sizes in arbitrary html when they’re inserted into post content via the image_send_to_editor filter.

    Here we check if $size is thumbnail and wrap it in a div, otherwise we just return the unaltered $html:

    function wpd_wrap_thumbnails( $html, $id, $caption, $title, $align, $url, $size, $alt ){
    if( 'thumbnail' == $size ){
        return '<div class="circle">' . $html . '</div>';
    }
    return $html;
}
add_filter( 'image_send_to_editor', 'wpd_wrap_thumbnails', 10, 8 );

    You can also add an editor stylesheet with your CSS, so the client sees them styled properly within the editor.