Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
    
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 '11 at 22:53
    
Can I ask why you want this? –  Tom J Nowell Jan 24 '13 at 10:18
add comment

4 Answers

up vote 1 down vote accepted

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;
}
share|improve this answer
    
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? –  vanjadjurdjevic Jun 29 '11 at 21:08
    
Then you use the filter I put above. –  Wyck Jun 30 '11 at 0:21
add comment

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.

share|improve this answer
add comment

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/

share|improve this answer
add comment

i cant tell how to place img inside div automatically, but if you want to attach any specific div class to your image:

<img class="MyImgClass" 

then do what you want to the ".MyImgClass" class in your style.css.

at first, you should insert this code into your functions.php (but if the current theme has another auto-giving class to images, then they will be overgone and only MyImg1 class will be given to your images):

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){ 
$classes = 'MyImgClass'; // separated by spaces, e.g. 'img image-link' 

// check if there are already classes assigned to the anchor 
if ( preg_match('/<img.*? class=".*?">/', $html) ) { 
$html = preg_replace('/(<img.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html); 
} else { 
$html = preg_replace('/(<img.*?)>/', '$1 class="' . $classes . '" >', $html); 
} 
return $html; 
} 
add_filter('image_send_to_editor','give_linked_images_class',10,8);
share|improve this answer
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 '13 at 10:44
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.