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!
LVL 9
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can you post the HTML for your image tags - it is possible that the tags rendered are not matching the regex you are using.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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

0
Julian HansenCommented:
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.
0
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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

0
Julian HansenCommented:
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

0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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.
0
Julian HansenCommented:
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
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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.
0
Julian HansenCommented:
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.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
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!
0
Julian HansenCommented:
Why the focus on the WYSIWYG - how does it render on the page?
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Well, at the end of the day, this worked for me:

<?php the_field('sunpower_text', false, false); ?>

Open in new window

The field is a wysiwyg. I added the "false, false" part and it worked.

Answer found in the thread below:

https://support.advancedcustomfields.com/forums/topic/removing-paragraph-tags-from-wysiwyg-fields/

Here's the page:

http://sandbox.intrepidrealist.com/sun-pacific-solar-electric/

It's the SunPower section.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
I solved it myself! Yay me.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.