Is there a way to set the featured picture of the latest post appear much bigger?

[Tomas]

Hello, I learned how to set featured images and they appear correctly.

I’d just like to set the featured image of my newest post appear much 

bigger on top of the title of the post title. The rest can remain as those smaller

thumbnail sized ones. Can this be done on Weaver Xtreme?

[Weaver]

Add this rule to the Main Options -> Fonts & Custom -> Custom CSS Rules section:

.post-order-1 .featured-image {height:30%; width:30%;}

This will change the size, not the location, which can’t be changed for just the first post.

The % is a % width of the content area. Change those to meet your needs. Do note that depending on the default FI size you’ve set (like thumbnail, for example), this rule will change the display size of the FI without changing that actual resolution of the image, so it is possible the larger FI will be a bit fuzzy. (But it really depends on what you’ve set thumbnail size as in the Settings : Media menu, and what your default FI size is.

[scrambler]

@weaver, this brings back an old feature request of mine, being able to set the featured images options also at the page with post level and at the show-posts filter level 🙂

@Tomas For the size, if you need the first featured image to be really bigger, you could set all featured images to medium , large of full so you don’t loose quality on the first one, then we could give you CSS to reduce the size all the other ones.

Provide a link to the page when in place so we can help with the CSS.

If all your featured images will always have the same size, we may also be able to come up with some CSS to move that first one above the title.

[Weaver]

I don’t think this case is exactly allowing per page and per post options, but rather is talking about the most recent post, which will always have the .post-order-1 class.

[scrambler]

Yes, but if we had the feature, he could do that with two show posts shortcodes.

Use one for the first post with featured image above title and a second one for the rest of the post with featured image inside the content 🙂

[Tomas]

Hello, Weaver and Scrambler, i managed to increase the size of the first post’s featured image. 🙂

I set it to 40 % and 40 % and yes, I am talking of the most recent post, not per page and per post options.

How exactly do I retain the quality of the featured image?

[scrambler]

As I said, set the size of the featured image to a large size for all (in main options > Post Specifics > Featured image), then post a link to the page and tell us how small you want all the post except the top one, and we will give you a CSS rule to do that.

The rules to use will probably be

.wvrx-posts .featured-image {max-width:150px;}
.wvrx-posts .post-order-1 .featured-image {max-width:none;}

Placed where you had the previous rule.

Note: You may not need the previous rule any more.

[Author]

Posts