[Resolved] Image Autop filter not working in GP Sections

Home Forums Support [Resolved] Image Autop filter not working in GP Sections

Home Forums Support Image Autop filter not working in GP Sections

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #480654
    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?

    #480913
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #481377
    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)?

    #481860
    Tom
    Lead Developer
    Lead Developer

    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?

    #481968
    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.

    #482737
    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.

    #482747
    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.

    #482748
    Tom
    Lead Developer
    Lead Developer

    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!).

    #482812
    Paul

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

    #482843
    Tom
    Lead Developer
    Lead Developer

    It definitely won’t ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.