Targeting or removing text and images in Wordpress posts - php

Question

I have a Wordpress site which displays the post's content using
<?php the_content(); ?>
there are images and text in the content which all get outputted in < p > tags
I want to style the margins/padding of the images and text differently. I can target the images but when I apply styles to the text, they affect the images as well.
The only options I can think of are using - margins (but that will cause problems later) and putting all text in block quotes but that will remove that functionality for future use.
can i 'pull out' the images and/or text out of the_content and display them another way?
HTML - currently
<div class="row">
<?php the_content(); ?>
</div><!-- /row -->

Answer 1

You can do it in several ways:
My prefered one is the follow:
Let's say that you have a div with a css class (i.e.: content wrapper)
So it will look like this:
<div class="contentWrapper">
My amazing conent <img src="amazing.jpg"/> <p>testing paragraph</p>
</div>
So in this example you can use simple css selectors to make any change that you want for the elements under contentWrapper i.e.:
.contentWrapper img, .contentWrapper p{
margin-right: 5px;
}
Another - but much dirtier way is using regex to replace some tags.
It's not a good practice at all, so I don't thing there is a point of an example.
Good luck!

Answer 2

Basically two sane ways to go about this:
Modify the existing CSS and tune it to target both the elements and the classes more precisely. That's the easier way.
Capture the output of the_content(); into a variable and then use preg_replace() etc. to modify the content. Or use a proper DOM parser in PHP to do the same. More work here.
(Use Javascript to modify the DOM after it's loaded. Less elegant approach.)

Answer 3

Use preg_replace to pull the images, remove the <p> tags and replace them with something else.
function filter_content_images($content) {
return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<div class="content-image">\1</div>', $content);
}
add_filter('the_content', 'filter_content_images');
This will remove them and replace with which you can then mini