Avatar of Alicia St Rose
Alicia St Rose
Flag for United States of America asked on

I'm using a filter to remove p tags from around images in the Content in WordPress, but it's not working

I'm using a plugin called Advanced Custom fields and I'm not able to remove the p tags even though I've found this filter everywhere, including the ACF forum.

//filter the <p> tags from the images and iFrame
function filter_ptags_on_images($content) {
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
}
add_filter('acf_the_content', 'filter_ptags_on_images');
add_filter('the_content', 'filter_ptags_on_images');

Open in new window


Any one have a situation like this? Not sure why it isn't working even though I've used it before!
WordPress* Advanced Custom Fields

Avatar of undefined
Last Comment
Alicia St Rose

8/22/2022 - Mon
Julian Hansen

Can you post the HTML for your image tags - it is possible that the tags rendered are not matching the regex you are using.
Alicia St Rose

ASKER
This is what is generated in the HTML

<img class="alignnone size-medium wp-image-6076" src="http://sunpacific.dev/wp-content/uploads/2017/03/sunpower-logo-300x63.jpg" alt="" width="300" height="63" srcset="http://sunpacific.dev/wp-content/uploads/2017/03/sunpower-logo-300x63.jpg 300w, http://sunpacific.dev/wp-content/uploads/2017/03/sunpower-logo.jpg 400w" sizes="(max-width: 300px) 100vw, 300px">

Open in new window


This is what I've got in the file:

<img  class="home-sunpower-image"src="<?php the_field('sunpower_image'); ?>">

Open in new window

Julian Hansen

I don't understand - which is the one that the regex acts on -

Regex expects this
<p><a ...><img ....></a></p>

Open in new window

I am not seeing that in your post above
Please show the exact text with <a> and <p> that is in your page that you need changed.
Your help has saved me hundreds of hours of internet surfing.
fblack61
Alicia St Rose

ASKER
Ah, I see! Regular Expressions completely confound me. But, your reply has shed some light on how to read them. I swear they just look like gobbledy gook to me!

So, I'm trying to target an image that isn't a link as well as images that are linked. This explains why it works sometimes! How, would I edit that code? Something like the following?

//filter the <p> tags from the images and iFrame
function filter_ptags_on_images($content) {
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
return preg_replace('/<p>\s*(<img .* \/>)\s*<\/p>/iU', '\1\2\3', $content);
return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
}
add_filter('acf_the_content', 'filter_ptags_on_images');
add_filter('the_content', 'filter_ptags_on_images');

Open in new window

Julian Hansen

The first regexp looks right but I suspect that what is happening is some of your <img> tags are not closed properly i.e

<img src="someimage.jpg">

Open in new window

as opposed to
<img src="someimage.jpg"/>

Open in new window


Check your source to see if the ones that don't work look like the first. IF so and you can change them - first prize - otherwise we can change the regex to conditionally look for the closing slash like so

$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .*\s*\/?>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);

Open in new window

Alicia St Rose

ASKER
OMG! I've been grabbing wrong image code. Such a doofus move. I thought the logo was being added as a custom field and forgot it was not, it's in the ACF wysiwyg.

So, here is the actual code:

<img class="alignnone size-medium wp-image-6076" src="http://sunpacific.dev/wp-content/uploads/2017/03/sunpower-logo-300x63.jpg" alt="" width="300" height="63" />

Open in new window


It's had the ending slash all along and still not working...
I think it might have something to do with Advanced Custom Fields, because I notice it's working in the native WordPress TinyMCE.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

That will be filtered by the code you have - consider this example
<?php
$content = <<< HTML
<p><img class="alignnone size-medium wp-image-6076" src="http://sunpacific.dev/wp-content/uploads/2017/03/sunpower-logo-300x63.jpg" alt="" width="300" height="63" /></p>
HTML;
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .*\s*\/?>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
echo "<pre>" . htmlentities($content) . "</pre>";

Open in new window

Output is
<img class="alignnone size-medium wp-image-6076" src="http://sunpacific.dev/wp-content/uploads/2017/03/sunpower-logo-300x63.jpg" alt="" width="300" height="63" />

Open in new window

No <p> tags.


As to the ACF issue - you can put debug output in your filter to see if it is firing for that logo and if not then we can look at how to hook that content
Alicia St Rose

ASKER
I tried the code just supplied and I'm getting this error:

Parse error: syntax error, unexpected '<' in /Users/alicia/Sites/sunpacific.dev/wp-content/plugins/sun-pacific-custom-functions/sun-pacific-custom-functions.php on line 15

Open in new window


I have no idea how to put debug output into the filter.
Julian Hansen

The error does not help much unless I can see how you implemented the code - you should have just replaced line 3 of your code (original post) with line 5 of mine.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Alicia St Rose

ASKER
Okay I see. However, this works in the native WordPress TinyMCE, but not in the Advanced Custom Fields wysiwyg, which is where this image resides.
It's so weird. Because I'm sure I had it working before!
Julian Hansen

Why the focus on the WYSIWYG - how does it render on the page?
ASKER CERTIFIED SOLUTION
Alicia St Rose

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Alicia St Rose

ASKER
I solved it myself! Yay me.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.