We help IT Professionals succeed at work.

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

181 Views
Last Modified: 2018-03-13
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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
CERTIFIED EXPERT

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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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

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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
CERTIFIED EXPERT

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
CERTIFIED EXPERT

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
CERTIFIED EXPERT

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!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Why the focus on the WYSIWYG - how does it render on the page?
Owner & Principle Developer/Designer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Alicia St RoseOwner & Principle Developer/Designer
CERTIFIED EXPERT

Author

Commented:
I solved it myself! Yay me.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions