Show categories inside featured images

[Liran]

Hey,

How can I get the categories to show inside the featured images? Here’s a good example.

Your theme rock, by the way!

[Elvin]

Hi Liran,

You can check this topic on how to do that.
https://generatepress.com/forums/topic/blog-archive-horizontal-layout/#post-1428465

Let us know if it works for you.

A wise man once said:
"Have you cleared your cache?"

[Liran]

Thanks Elvin. But there’s something off with the CSS (at least in the archive pages).

[Elvin]

Can you specify what in particular is off?

Perhaps, is it about the category not displaying on archive pages?

If so, I’ve noticed that you have this CSS somewhere in your site.

.category .post-image-wrap .entry-meta {
    display: none;
}

This prevents the category from displaying on archive pages. You have to remove this for the category to display on archive pages.

A wise man once said:
"Have you cleared your cache?"

[Liran]

Do you mean the website I mentioned in my original post? This is not my website, just an example.

I added a link to one of my categories. Have a look.

[Elvin]

Do you mean the website I mentioned in my original post? This is not my website, just an example.

Oh alright. Thanks for adding your site URL.

You can try including this CSS code instead.

.post-image{
   position: relative;
}
.post-image > a > img.wp-post-image {
   width: 100%;
}
.post-image > span.cat_links { 
   position: absolute; 
   margin:0; 
   top:auto; 
   bottom: 7.5%; 
   left: 5%;
}
.post-image > span.cat_links > span > ul{
   list-style:none;
   margin:0;
   padding:5px;
}

.post-image{position: relative;} was missing from the previous topic. My bad.

Let me know if this works for you.

A wise man once said:
"Have you cleared your cache?"

[Liran]

It works, but it kinda messes up some of images. I think it has something to do with this:

.post-image > a > img.wp-post-image {
   width: 100%;
}

Also, how do I make the category names pretty? 🙂

[Elvin]

I’ve checked the css codes added and found this broken css property. It was added with mobile view in mind.

We can replace that line of code with this code so it only applies on mobile.

@media (max-width:768px){
.post-image > a > img.wp-post-image {
   width: 100%;
}
}

Also, how do I make the category names pretty?

The beauty of this PHP filter is that it was made with the option to assign different colors for each category. You can do that by adding CSS codes.

Let’s say your site has 3 categories which are “food”, “behavior” and “training”. Say, we want “food” to be red, “behavior” to be black & “training” to be blue..

We can do something like this:

span.cat_links > span.food > ul{
list-style:none;
background-color: red;
}

span.cat_links > span.behavior > ul{
list-style:none;
background-color: black;
}

span.cat_links > span.training > ul{
list-style:none;
background-color: blue;
}

You can add more styles for each of your categories.

The format is basically:

span.cat_links > span.[your-category-slug-here] > ul{
background-color: [text background color value here];
}

As for the category name texts color, you can use this CSS code.

span.cat_links a{ color: #ffffff; }

#ffffff is white, replace it with any color value.

If you need to change the :hover color value, simply add this CSS.

span.cat_links a:hover { color: blue; }

Just replace “blue” with any color you prefer.

A wise man once said:
"Have you cleared your cache?"

[Liran]

Got it! Any idea of how to make this work with WPSP as well?

[Liran]

It works, but it kinda messes up some of images.

I think I know the reason. Strangely, some of the thumbnails are larger than 250×150.

Why is that?

[Elvin]

Nice one.

Any idea of how to make this work with WPSP as well?

It may be best to open a new topic for that. (either WPSP forums or here)

WPSP’s DOM structure is significantly different than GP theme’s default as it uses its own unique CSS selectors and filters.

I’m 100% sure its doable with WPSP too.

A wise man once said:
"Have you cleared your cache?"

[Liran]

Will do. Have you seen my previous question?

[Elvin]

Will do. Have you seen my previous question?

Sorry about that. I saw it late.

I think I know the reason. Strangely, some of the thumbnails are larger than 250×150.

Why is that?

Oh yeah I noticed that too.

This happens when you’ve already uploaded an image on the media library prior to setting 250×150 to one of on your media sizes on WP Admin Panel > Settings > Media.

The older images don’t have a registered image size for 250×150 because they were uploaded before the most recent 250×150 setting. WordPress doesn’t automatically generate images for newly registered image sizes retroactively.

For that, you’ll need a plugin like Regenerate Thumbnail plugin.

A wise man once said:
"Have you cleared your cache?"

[Liran]

Fixed! Thanks for letting me know.

[Elvin]

Nice one.

No problem.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts