WordPress – Remove Paragraph tag around Images w/o Captions, Replace with Divs

[G M]

Hello! When you upload images to a post in WordPress it automatically places images with captions inside <div> tags and those without captions in <p>. This is causing me some headache when it comes to preparing for two images floating next to each other. I’d like to switch the functionality to place images without captions in div tags as well, equivalent to what happens when there is a caption. I thought i had found the solution in the media.php file. I found the function img_caption_shortcode($attr, $content = null) { and changed this section:

if ( 1 > (int) $width || empty($caption) )
  return $content;

if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
    . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

to this:

if ( 1 > (int) $width || empty($caption) )
  return '<div ' . $id . 'class="wp-nocaption ' . esc_attr($align) . '" style="width: ' . ($width) . 'px">'
    . do_shortcode( $content ) . '</div>';

if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . ($width) . 'px">'
    . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

where I thought, if the caption was empty the content would be returned in a similar div to the captioned image (only with a class wp-nocaption). However this isn’t working, my no-caption images are still wrapped in a <p> tag. Does anyone know how I would get this work? I found this helpful article, but, of course, I want to do something a bit more complex. And of course I’m stumped. :-) Any help would be appreciated, thank you!

[G M]

Been playing around for a couple days and I think perhaps a php preg_replace might do the trick?

I don’t quite understand the process yet, but so far I have found this code and tried to modify it:

function filter_ptags_on_images($content) { 
  return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', 
  '/<div class="wp-nocaption">\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/div>/iU', 
  $content); 
  }

add_filter('the_content', 'filter_ptags_on_images');

But in place of an image it returns this:

/
<div class="wp-nocaption">
 \s*(
 <a .*="">
      )?\s*(
    <img \="" .*=""></img>
      )\s*(<\/a>)?\s*<\/div>/iU
    </a>

Can anyone tell me what I’m doing wrong? Thanks!

[Alen]

http://wordpress.stackexchange.com/questions/7090/stop-wordpress-wrapping-images-in-a-p-tag

[G M]

Hi Alen! Thanks for repsonding!

That article is actually where I got my original preg_replace function that I tried to tweak.

They suggest using this: '\1\2\3' as the replacement code.
I think that is called a ‘backreference’ in php but I’ve been reading all day and I still can’t quite wrap my head around the language.

I tried to shortcut it by just rewriting the original replace pattern to use divs instead of p tags, but its clearly not that simple.

I was hoping someone with preg_replace familiarity could suggest an edit or better explain what is going on than the articles I’m currently reading :-)

[clemencizm]

To remove and replace the paragraph tag by div for all images uploaded in wordpress

function substitute_p_bydiv_around_images($content){
return preg_replace(‘/

\\s*?(<img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s’, ‘

\1

‘, $content);
}
add_filter(‘the_content’, ‘substitute_p_bydiv_around_images’);

[Author]

Posts