1

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:

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?

3
  • search this site for image_send_to_editor filter.
    – Milo
    Apr 6, 2014 at 1:10
  • Just thinking you might want to register new thumbnail sizes (codex.wordpress.org/Function_Reference/add_image_size) then you can style the specific thumbnails?
    – Flick
    Apr 6, 2014 at 1:18
  • I might do that. The plan is to have all the thumbnails in a post styled as circles. When they are clicked they open in a lightbox gallery (already working). However, my client has a few images that need to be inserted into pages that aren't part of the gallery and can't be styled in a circle, this is where I am running into trouble! So I figure if I can wrap all the thumbnails in divs and style them, that leaves the other images unstyled. I'm not the most php saavy, this is my first time really customizing a theme other than the CSS (I am a student).
    – clancimus
    Apr 6, 2014 at 1:28

1 Answer 1

0

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.

4
  • Thank you! This is working great. Sometimes a blank div shows up but the editor stylesheet should help with that, I'll look into it.
    – clancimus
    Apr 6, 2014 at 2:25
  • I am having issues with the editor stylesheet. I am using this code
    – clancimus
    Apr 6, 2014 at 3:17
  • You'll probably have issues using the front end stylesheet in the editor. I would create a separate stylesheet and paste just the content-area specific styles in there.
    – Milo
    Apr 6, 2014 at 3:29
  • I tried it and it doesn't seem to be reading the stylesheet. I've tried echoing the uri just to make sure it's correct and it still isn't picking up any of the styling.
    – clancimus
    Apr 6, 2014 at 3:54

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.