Wrapping text around featured image

Hi janaglass,

This usually has to do with the CSS you’re applying to your images.

By default, most WordPress themes include a few helpful classes for positioning images in posts/pages:

• .alignleft
• .aligncenter
• .alignright

These are the classes added to an image if you add positioning when including the image in the content. So, if you’re telling WordPress to align your image left, it will add the .alignleft class and should float the image left with content wrapping around it. Same is true for .alignright (just on the other side).

If your site is not doing this, make sure you have the above classes defined in your CSS similar to this:

.alignleft {
	display: inline;
	float: left;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

I hope that helps.

It helps a little. I have aligned the thumbnails on my main posts page using the following code:

.entry-content .thumbnail-post{float:left;width:300px !important;margin-right:20px}

But I don’t know how to do it for the posts in page. Do I need to add code to the posts_loop_template.php? or does it need to go to the .css file? Or do I need to create he same styling for the the_post_thumbnail? Please bear with me, I am still learning.

I have now the same problem, have you found the solution?

Hey ivana78 and janaglass,

There is no CSS that comes with this plugin so all things having to do with positioning of images, font type, size, color, etc are all controlled via you own CSS file.

I recommend using Google Dev Tools or Firebug to help you figure out which classes or IDs to use for your styling.

I hope that helps!

Hello, I googled a little bit and found these css code:

img.wp-post-image, img.attachment-full, img.attachment-large, img.attachment-medium, img.attachment-thumbnail {
display: block;
margin: 15px auto;
padding-right: 20px;
width: auto;
float:left;
}

It’s doing the thing, but it’s not the best solution, because, this code is reflecting on all pages with this css thumbnail element.

regards, Ivana

Hi ivana78,

It’s doing the thing, but it’s not the best solution, because, this code is reflecting on all pages with this css thumbnail element.

Aha. I’d recommend seeing if you can make your CSS rule more specific by including a PiP class before it, if appropriate.