1

When I add an image to a post I want it to be in a div e.g. , and I want that to be done automatically, so I don't have to do that in HTML editor. I don't want to use js to accomplish this and by the way I want to know how to automatically add custom classes to a image in a post. Cheers!

2
  • Search for image_send_to_editor, that would be a good filter to look at for what you're asking, search and you'll find info(sorry not got enough spare time to prepare an answer for you right now).
    – t31os
    Jun 29, 2011 at 22:53
  • Can I ask why you want this?
    – Tom J Nowell
    Jan 24, 2013 at 10:18

4 Answers 4

2

By default images already have unique class's but this depends on your theme. Use firebug and hover over the images and you should see stuff like class="aligncenter size-full wp-image-1525".

If you want to change the class or id or alter any attributes of the image you can use the get_image_tag filter. For example,

add_filter('get_image_tag_class','my_custom_class');

function my_custom_class($class){
$class='my_custom_name';
return $class;
}
2
  • OK thanks for that but what if I want to wrap every single image with a div e.g. #imagecontainer so I can tweak the design the way I want? Jun 29, 2011 at 21:08
  • Then you use the filter I put above.
    – Wyck
    Jun 30, 2011 at 0:21
3

I have found the following code while making some research. You can easily wrap a Post image in a Div by using the built-in filter of WordPress i.e image_send_to_editor. Here is an example,

if( is_admin() ) {

    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="wp-image-wrap-'. $id .'" class="wp-image-wrap">'. $html .'</div>';
    }

}

Thanks to http://wpalkane.com/hacks/wrap-post-image-inside-div-automatically/

1

You answer was close but not enough because the hook checkpoint for get_image_tag_class() only changes the class attribute. So I was playing around and find out that the right thing for wrapping each image is get_image_tag() so the code goes like this :

function my_image_tag($html, $id , $alt, $title){

$html = "<div class='**wrap-div**'>" . $html . "</div>";
return $html;
}

add_filter('get_image_tag','my_image_tag',10,4);

You answer was partially right so it's the best one ;) Cheers mate and thanks for your help.

0

the answers here can be divided into 2 methods:

1) functions, that work in POST EDITOR (back-end) (see posted answers)
2) functions, that work in POST OUTPUT (front-end)

p.s. another methods to change front-end output:

a)

function my_image_class_filter($classes) {
    return $classes . ' another-image-class';
}
add_filter('get_image_tag_class', 'my_image_class_filter');

b)

function add_post_image_class($content) {
    return preg_replace('/<img(.*?)class="(.*?)"/', '<img $1 class="$2 YOUR_CLASS_NAME"', $content);
}
add_filter( 'the_content', 'add_post_image_class' );
1
  • 1
    This is no chat. Please use proper Upper/lower case letters and care a bit about code formatting. Later readers will come and vote on your answer and they also take readability in account. Thanks.
    – kaiser
    Jan 24, 2013 at 10:44

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.