Category images

Hi @kaitlynko,

Great question!

There’s not an option for this built in, but you can add a bit of CSS to make the title and description show up without requiring any hovering.

If you add this in Appearance > Customize > Additional CSS, it should do the trick:

.section-feed-category .entry-vertical-content {
    display: block;
}

If you need anything else, just let us know!

Thank you so much!

I was also wondering how to make my feature images horizontal instead of vertical? When I click into a post, it shows the full image at the top, but when I look at the images on my home page or categories page, the images are shown vertically, which cuts off part of?the image. And on my home page, some of the images are cut at different lengths, which makes it look very inconsistent. Is there any way to fix this?

One last question – on my home page, some of the images display the title of the post with an overlapping white square, but for others, the white square is cut off, only showing half of it. Do you know why that could be happening?

Thanks again!

• This reply was modified 4 years, 2 months ago by kaitlynko.

True, these are thumbnails, which WordPress crops to fit. You can see an example on the demo of what they are supposed to look like:
https://demo.lyrathemes.com/cressida/

If you do want to dig into changing this up, this is the best way to do it:
https://help.lyrathemes.com/article/334-how-to-change-featured-image-size

The reason some of them are different sizes on your home page is that they were uploaded at resolutions a bit too small for WordPress to crop down to size. If you re-upload them at resolutions of at least 760×1100, they should all show up uniformly on the home page.

Hmm…I’m not sure I quite follow, but I do see that it looks a bit off with the “read more” link gone. You might try adding a little padding to the bottom, but if that doesn’t get the look you’re after, maybe you could describe it for me again and I’ll see what I can do:

.home .entry-archive-content .entry-title {
    padding-bottom: 20px;
}

Thanks!

Tha padding worked really well, thank you! I will look into the image sizes now.

Hi,

I just activated the simple image sizes plugin to change the image sizes, but I don’t know which one to change. How do I use the plugin to make my feature images a different size on the home and category pages?

Thank you!

Glad the padding worked out! ??

The ones you want to change should be the ones that are 760×1100. Also you’ll probably want to be sure to run the Regenerate Thumbnails plugin after you make any changes to image sizes like this, just so it can update your existing ones to match your new settings.

Best of luck!

Thank you so much for your help!

Sure thing, anytime!

Hi,

Thanks again for your help with the image sizes as well as showing the post titles last time!

I have a question about the post titles that are now showing up on the image when I click on a specific category. How can I make it so that only the title shows, and not the description as well? It covers up half of my image, so I would prefer to only have the title shown.

Thank you!

Kaitlyn

Hey Kaitlyn, good question!

It looks like the thumbnail images on the category pages aren’t cropped at the right proportions, which is why the overlay covers too much of them. This is what they should look like:
https://demo.lyrathemes.com/cressida/category/fashion/

It seems that the images were uploaded at a resolution too low for WordPress to crop them correctly…do you happen to have those images at a higher resolution? If you can re-upload them at least 1200px in both height and width, it should cover all scenarios, or if you can ensure that they’re at least 760×1100, it should at least get the thumbnails correct.

If you’d prefer to leave the images as they are and go ahead, let me know and I’ll write up a little CSS for you to remove the excerpts.

Hi,

Thanks for your advice, but I actually kept them at 500 by 333 on purpose because I like how it looks better:) If you could write up the CSS that would be awesome, thank you!

Sounds good! ??

This CSS should do the trick:

.section-feed-category .entry-summary {
    display: none;
}
.section-feed-category .entry-title {
    margin-bottom: 0;
}

Let me know if you need anything else!

Thank you so much!