[Irina]

Hi,
I would like to have a thumbnail of the feature image of each post on my home page with a teaser text on the right side of the thumbnail. It should look a bit like this, but the picture can be a bit smaller:
http://barefootinvestor.com/finance-news-money-tips/all-posts/
On my site I’ve got a small rectangular photo on the top of the teaser. It took me a while to work this one out, but I would like a square image left of the teaser.
My site:
http://www.aussiebuschleben.net/
Any help would be much appreciated.
Irina

[Nancy]

Try this in the custom CSS section:

/* Featured images in summary view left inline with text */
.blog .entry-summary .wp-post-image,
.archive .entry-summary .wp-post-image {
display: inline;
float: left;
margin: 0 10px 10px 0;
border: 0;
}

[Sakin]

@Irina: Yes, you can use the above css given my @Nancy. But after you add in that css you need to upload the Featured image of small size. The reference site you have given uses featured image size of 150px height and 150px width. This is the best option.

But if you want to just control the size with the CSS. Then you can add the following css which adds size in the @Nancy css. You can add the following CSS in “Appearance => Theme Options => Custom CSS” box.

.home .entry-summary .wp-post-image,
.archive .entry-summary .wp-post-image {
    display: inline;
    float: left;
    height: auto;
    margin: 0 10px 10px 0;
    width: 30%;
}

[Irina]

Sorry, I have really no idea about CSS. I would be happy with 150x150px, but I can’t use the thumbnail of the feature image. For some reason I can’t even crop the image. WordPress doesn’t let me save the cropped image and it doesn’t let me insert the thumbnail. Very frustrating!

[Sakin]

@Irina: The featured image in the post will take the size of 754px width and 400px height. So, the only option at this stage will be to crop the image in your computer and upload the smaller image of 150px by 150px. So, when the WordPress doesn’t fine the larger featured image, it will simply take the original image that you have uploaded. So, this way you can solve the size issues.

For custom css, you don’t need to know about this much. You can simply add the css in “Appearance => Theme Options => Custom CSS” box from your WordPress Dashboard.

[Irina]

Wow, look, Sakin, it’s almost how I want it! I added Nancy’s and your code. How can I now change the size of the thumbail to a square? Can I change your code or do I need to change the image in Photoshop or so?
http://www.aussiebuschleben.net/

[Sakin]

@Irina: For Square image of 150x150px then you need to use Photoshop and crop the image in exact that size and then upload the image as Featured image of that post. After that you can remove my CSS and just add @Nancy css. You don’t need to add both the css. Those 2 css are for 2 different cases.

[Irina]

I’ve got it now! Thank you so much Nancy and Sakin!

[Sakin]

Nice Irina and yes thanks a lot Nancy 🙂

[Nancy]

Your welcome! Just passing along what you gave me a couple of weeks ago. 🙂

[Author]

Posts