0

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 -->
user3550879
  • 3,389
  • 6
  • 33
  • 62
  • This will (at some point in the future) be solvable with CSS4, have a look here: http://stackoverflow.com/a/1014958/4383432 Until then you might be bound to negative margins or something which I can´t just think of. – flomei May 29 '15 at 08:53

3 Answers3

0

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!

Ron Dembo
  • 86
  • 9
  • Unfortunately this does not work in my situation since its Wordpress. All the content is put on the page with the_content and all put in

    tags

     – user3550879 May 29 '15 at 08:56
  • To prevent it from being output, you can use Output Control Functions and `ob_get_contents()` etc. to capture the output and then modify as you please. http://php.net/manual/en/ref.outcontrol.php – Markus AO May 29 '15 at 08:58
  • Yes you are right - but you can wrap inside the template the place which holds the content itself - this will be the easier way from my experience. – Ron Dembo May 29 '15 at 08:59
  • are you referring to doing in the post editor in wordpress admin? – user3550879 May 29 '15 at 09:06
  • This is one option or you can change the template file itself. – Ron Dembo May 29 '15 at 09:16
0

Basically two sane ways to go about this:

  1. Modify the existing CSS and tune it to target both the elements and the classes more precisely. That's the easier way.

  2. 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.

  3. (Use Javascript to modify the DOM after it's loaded. Less elegant approach.)

Markus AO
  • 4,771
  • 2
  • 18
  • 29
  • I'm not super versed in how it is all done, but your second suggestion seems the best choice (I can't target the actually text just the

    tag, so it's already as specified as I can) are there any resources that could explain that more thoroughly?

     – user3550879 May 29 '15 at 08:58
  • More on `preg_replace` or DOM parsers? ... and also, couldn't you just modify your WordPress HTML template files instead of doing this post-process, which is a bit hackish? – Markus AO May 29 '15 at 09:00
  • I am creating a theme, I am bringing in the content/images with just the line It puts all the content and images in each image and paragraph in

    tags. I don't really know how to 'take apart' the content php. I have gotten code using preg_match to pull out the block quote

     – user3550879 May 29 '15 at 09:15
  • Looking at `the_content()`, which is a wrapper for `get_the_content()`, which uses give globals and in itself has nothing about wrapping stuff in tags... Um. WP templating may or may not be a pretty world... Have you simply tried canceling out margins in images with something like `.row img { margin: 0; }` ? I'd look further into what you can do with precise CSS without having to modify the DOM on the fly. – Markus AO May 30 '15 at 11:22
0

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

mrben522
  • 417
  • 6
  • 18