Change size of post featured image on homepage

Hi,
I am using the featured blog post section on the homepage. I have two questions:

1) Is there a way to limit the featured posts to those in a certain category?

2) How can I change the relative size of the featured image? It's very large and takes up about half the column so that the post snippet excerpt texts gets very squished.

Thanks!
Andy

mpdiversity.org

 

Hi, Andy..

Greetings from InkThemes!

Solutions are accordingly..

1) Is there a way to limit the featured posts to those in a certain category?

You can easily limit the post from your dashboard..

Please follow the screenshot given below.



2) How can I change the relative size of the featured image?

Please paste the code given below in Custom CSS field (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.flexslider li.blog_item .flex_thumbnail img {
    width: 236px;
    height: 269px;
}

Note: Change the numeric value as per your requirement..

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi Priya, thanks for the reply!

The solutions you provided don't quite get at my issues.

1) I can see the field to limit the number of posts displayed on the homepage. I'm looking to limit the category. For instance, I have a "News" category that would make sense to display prominently on the homepage. But perhaps I have other post categories ("Cat Pics" etc.) that aren't front-page worthy and should be hidden from that area. Is there a field or customization that can limit the post query to a single category (or list of categories)?

2) I tried the CSS fix you provided to adjust the featured image size. However, providing pixel values for the IMG will only work if the images all have the same proportions (otherwise, it will distort some of them); plus, these sizes aren't responsive to different viewports. I'm not quite good enough with responsive CSS to get exactly what I need here, but adapting your suggestion, I found CSS that works pretty well to reduce the relative size of the image:

Code:

.flexslider li.blog_item .flex_thumbnail {
  width: 150px;
}
.flexslider li.blog_item .flex_thumbnail img {
  max-width:100%;
  height: auto;
}

It's not perfect, because it would be better to have the image sized to a certain number of responsive columns relative to the text, but it helps at least in my case to give the text more room.