[Support request] Show categories inside featured images

Home Forums Support [Support request] Show categories inside featured images

Home Forums Support Show categories inside featured images

  • This topic has 14 replies, 2 voices, and was last updated 1 year ago by Elvin.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1447903
    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!

    #1447908
    Elvin
    Staff
    Customer Support

    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?"

    #1447929
    Liran

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

    #1447937
    Elvin
    Staff
    Customer Support

    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?"

    #1447949
    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.

    #1447972
    Elvin
    Staff
    Customer Support

    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?"

    #1447997
    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? 🙂

    #1448027
    Elvin
    Staff
    Customer Support

    widt

    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?"

    #1448035
    Liran

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

    #1448044
    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?

    #1448047
    Elvin
    Staff
    Customer Support

    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?"

    #1448051
    Liran

    Will do. Have you seen my previous question?

    #1448267
    Elvin
    Staff
    Customer Support

    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?"

    #1449265
    Liran

    Fixed! Thanks for letting me know.

    #1449318
    Elvin
    Staff
    Customer Support

    Nice one.

    No problem.

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.