[Resolved] Image Autop filter not working in GP Sections

[Paul]

I’m using the following filter to strip autop from around images:

/* Remove P tags from images */
function filter_ptags_on_images($content){
    return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '\1', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

However, it doesn’t seem to affect images added inside GP sections. Actually, the P tags are being added immediately *after* the image which is affecting the vertical alignment of the text next to it / below it. Any idea on how to filter them out via modification of code above or other?

[Tom]

That’s strange – Section content is pushed through the_content filter.

I wonder if this might work: https://wordpress.stackexchange.com/a/239457

Let me know 🙂

[Paul]

That didn’t work. So then I removed the hyperlink from around the image to see if that would make a difference. Nada. I even minified all the HTML to eliminate all line breaks. Still no go. Then I noticed that if I switch from the text tab to the visual editor tab and then back to text tab, all the minification gone and there’s a blank line immediately above the line with the image in it. Any way to stop that unminification from happening without having to apply the autop filter to the entire site (which would totally screw up hundreds of pre-existing pages and posts)?

[Tom]

I’m not too sure what you mean by minification? The code is changing when you switch between visual and text editors? I’m assuming the same thing doesn’t happen in the regular editor?

[Paul]

By minification, I mean no line breaks.

So instead of:

<div class="one">
<div class="two">
<img class="alignleft" src="...">
<h2>A heading here</h2>
<p>Some text here.</p>
<p>Some more text here.</p>
</div>
</div>

I tried removing all spaces and line breaks in the text tab of the editor like below to see if WP was forcing in an autop for some reason when the code had line breaks:

<div class="one"><div class="two"><img class="alignleft" src="..."><h2>A heading here</h2><p>Some text here.</p><p>Some more text here.</p></div></div>

Even by “minifying” the code like that, <p></p> was being inserted below the img when I went to view the page.

Then, when switching from the text tab to the visual tab and then back to the text tab, all my minification was gone and my code was formatted back again as in the first code snippet above, but this time, there was a blank line/line break immediately after the img that wasn’t there in the first place.

Somehow this line break keeps getting forced in, resulting in to autop’s between the img and the h2.

[Paul]

Another weird thing is that I can’t even target that autop with CSS.

For example, I tried a kludge to hide it with:

.box-inset p:first-child {
    display: none;
}

And it’s not affected.

I don’t understand where this damn set of <p>’s is coming from.

[Paul]

So I found this link: https://wordpress.stackexchange.com/questions/66716/how-to-to-stop-html-editor-from-addig-p-tags-to-shortcodes-images-etc

… and saw the p:empty { display: none }` trick mentioned and that worked.

But it still seems to be a kludgy work-around to a problem I think should solved in a better way. I’ll just go with it for now.

[Tom]

Glad you found a workaround for now.

I’ll play with it to see if there’s a better solution. Gutenberg will likely be a perfect replacement to Sections (we hope!).

[Paul]

OK, thanks. It’ll be interesting to see how Gutenberg plays out. I hope it won’t break GP sections on established sites.

[Tom]

It definitely won’t 🙂

[Author]

Posts