[funergy]

Hello,
I have the home page set to excerpt and featured image. The featured image was taking up too much space, so I switched it to a thumbnail so posts would like more like they do on Simple Catch. However, I can’t figure out how to get the text to wrap so that it is thumbnail on the left and except on the right.
Could you help?

Many thanks!
Mike

[Trishah]

Try adding some css to the thumb img or thumb div like float:left; or display:inline-block; or try using both.

[Sakin]

@funergy: Please add in your site URL and then I can check in.

[funergy]

http://mikefunergy.com/

I should mention I’m a total beginner, I don’t even know how I figured out how to make the images in the excerpt smaller!
Thanks!

[Trishah]

Add this to your custom css or child theme style.css

.attachment-thumbnail.wp-post-image {
    float: left;
    margin: 0 15px 5px 0;
}

[funergy]

Worked, thanks so much!

[Trishah]

Whoo hoo! 😀

[Sakin]

@Trishah: Thanks a lot 🙂

[laurenceuk]

@Trishah,

I have been searching for over a week how to do this and your:

.attachment-thumbnail.wp-post-image {
float: left;
margin: 0 15px 5px 0;
}

Worked instantly and most importantly was easy to follow.

Thank you.

Laurence

[Trishah]

You’re welcome Laurence. 🙂

[Nancy]

Been reading through this post and I feel like I am missing something obvious. I have a post with a small image (100×100) selected as featured image. In except view, I would like the text to wrap. I’ve added the custom CSS above and it doesn’t work for me. What am I missing?

http://www.ipcrew.com/SHSTest/category/news/

[Trishah]

Hi Nancy,

What you were missing is that the images you want to change use a different css identifier. Try this instead:

.attachment-featured-slider.wp-post-image {
float: left;
margin: 0 15px 5px 0;
}

[Sakin]

@Nancy: You can add the following CSS in “Appearance => Theme Options => Custom CSS” box.

.archive .entry-summary .wp-post-image {
    display: inline;
    float: left;
    margin: 0 10px 10px 0;
}

[Nancy]

Thanks Trishah. That produces the desired result.

Sakin – I tried your suggestion as well, but I didn’t have the same effect as Trishah. Are they working off the same image?

I see that the first method is working off the attached thumbnail and the second of the featured post image. How does one attach a thumbnail to a post? Would that be a better method than using a small featured image? I could see in some instances I might want a larger image and in others a thumbnail.

[Trishah]

Hi Nancy,

I’ll let Sakin answer your specific questions because he knows his scripts the best 🙂

What I do to figure out what css to use is with the FireBug addon to FireFox. I put up a page here to help people learn the basics: http://trishah.com/how-to-use-firebug/

With the new version of FireBug, you can choose the element you have questions about on the left panel, then right-click in the right panel and choose “Add rule…” from the menu. Many times this will create the correct style identifier. This is how I got the style above that worked for you.

[Nancy]

Thanks for the tip! Very useful plugin.

[Sakin]

@Trishah: Thanks

@Nancy: I see that the css that I gave you worked on your site. That CSS that Trishah gave you will also work but it will be for all the pages. The only I have you is only for Archive pages.

[Nancy]

Sakin – Than you. I’ve got your CSS to work for the archive pages. How can I get it to work for a Post Page. See – http://www.ipcrew.com/SHSTest/news/

Should I use Trishah’s method?

[Sakin]

@Nancy: Simply replace the previous css with the following CSS.

.blog .entry-summary .wp-post-image,
.archive .entry-summary .wp-post-image {
    display: inline;
    float: left;
    margin: 0 10px 10px 0;
}

Which css to use depends on your requirement. But are fine, just different in conditions.

[Nancy]

Perfect! Thank you! The custom CSS feature in the plugin is AWESOME!

[Author]

Posts