Automatically wrap post image in div

In regards to image attachments inserted into a post, I would like to wrap the img tag inside a div tag for specific design purpose.

Is there a way to do this automatically after attaching the image file, like through hooks/filters maybe?

Thanks in advanced!!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It’s the image_send_to_editor filter:

if(is_admin()){

  add_filter('image_send_to_editor', 'wrap_my_div', 10, 8);

  function wrap_my_div($html, $id, $caption, $title, $align, $url, $size, $alt){
    return '<div class="mydiv" id="mydiv-'.$id.'">'.$html.'</div>';
  }
}

For existing images/posts you can try the regex in the function below

Method 2

Not looked into hooks and filters, but it is easily achievable by css alone.

Using the 2010 theme and class=”entry-content” as the css selector

In your stylesheet use:

.entry-content img {  
/* do all your funky css attributes for the image in here */  
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0