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

Alicia St Rose
Alicia St Rose used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 RoseOwner & Principle Developer/Designer

Author

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Alicia St RoseOwner & Principle Developer/Designer

Author

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 RoseOwner & Principle Developer/Designer

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 RoseOwner & Principle Developer/Designer

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018

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

Author

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!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Why the focus on the WYSIWYG - how does it render on the page?
Owner & Principle Developer/Designer
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.
Alicia St RoseOwner & Principle Developer/Designer

Author

Commented:
I solved it myself! Yay me.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial