[Resolved] Add categories tags on feature images and blog layout.

[An Nguyen]

Hi All,

1/In blog, archived page, how can I put the categories tag at the bottom-left of feature-image ?

2/In other category page with containing a specific category, how can I display posts in this category as columns which posts display in 3 columns and masonry and Blog-page still keeps the current layout? How can I limit number of posts display on this category?

Thanks for support,

An

[David]

Hi there,

1. Can you provide a link to your Site? Positioning the category tags over the image is quite complex, so i need to see what we are dealing with.

2. You can use the GP Blog Options filter to change settings for a specific category:

https://docs.generatepress.com/article/option_generate_blog_settings/

2.1 This snippet to set the posts per page limit for a specific category:

function category_post_per_page( $query ) {
    if( ! $query->is_main_query() )
        return;

    if ( is_category('category-slug') ){
        //Display 5 posts for category-slug
        $query->set( 'posts_per_page', 5);
    }
}
add_action('pre_get_posts', 'category_post_per_page', 1);

[An Nguyen]

Hi David,

1/ I updated link. Sorry David about that.

2/ a/ I tried to turn off title of a specific category “Business” with its description and also want to turn of “Excerpt word count” as 0. I didn’t see any options for those options. Others options work well.

b/ I tested option for loading posts limitation on “Business” category. I set it as 3 posts and then click on “load more” button, it has an error of posts display. The whole screen was duplicated and display in the container. You can view and tested it. I dont know why.

Thanks David,
An

[David]

1. So the Category links you want these below the Image or sitting over the bottom edge of the image? And is this for both the main blog and the business categories?

2. This filter for changing Excerpt Lengths:
https://docs.generatepress.com/article/excerpt_length/

Removing for page header for the Business category use this CSS:

.category-business .page-header {
    display: none;
}

3. Do you have any other functions that effect the blog? As this shouldn’t be happening.

[An Nguyen]

1/ I want it displays like this. All metadata are put on the bottom left like the link.

2/ It’s perfect like I expected.

3/ You are right! I found that one plugin editor conflicts with layout. After turn it off and remove, all is good.

[David]

1. Is this only on the Blog, the Business Archive or Both?

[An Nguyen]

The format like the link is for all, however the blog page I don’t want columns layout and I want to keep the current layout. Archived pages are 2 column layout.

I want the title of post displaying on 2 place like the link.

[David]

I am not sure thats going to be possible with the different layouts.
You can only position an element relative to its parent container, not a sibling. So on the Blog the layout changes depending on screen size, so the position of the element will move. It would require hooking in a container to fix that.

On the Business Page there is also a post with no image. Its not possible to ‘detect’ if the image is missing. So on that post the Category terms would cover the Title.

[An Nguyen]

Hi David,

I hope you can do it. My aim is that there is a difference between blog page layout and archived pages layout.

We can tried first, If it is too hard for you. I will change the blog layout is the same with archived page layout.

For business, I have just updated feature-image for the post.

Thanks.

[David]

For the archives ( not the blog ) you can do this:

.archive .inside-article {
    position: relative;
}
.archive footer.entry-meta {
    position: absolute;
    top: 0;
    right: 20px;
}

.archive .entry-meta span.cat-links:before {
    content: '';
}

For the Blog – can try this:

1. Create a new Hook Element. Call it Open Content Wrap. And add this:

<!-- Content Wrap --><div class="content-wrap">

Note: the editor will automatically add a closing </div> – you must delete it.

1.1 Select the after_entry_header hook and set the Priority to 5.

1.2 Set the Display Rules to Blog.

2. Create another new Hook Element. Call it Close Content Wrap. Add this:

</div>

2.1 Select the after_content hook. Leave the priority at a default of 10.

2.2 Set the Display rules to Blog.

3. Add this CSS:

.blog .post-image {
    margin-top: 0 !important;
}
.blog .content-wrap {
    position: relative;
}
.blog footer.entry-meta {
    position: absolute;
    top: 0;
    left: 20px;
}

[An Nguyen]

I finished your steps. So, what’s next step, David?

Thanks David.

[David]

Sorry little bit confused, i thought you wanted the tags to be displayed over the images? Which is what that code does.

[An Nguyen]

Hi David,

Can you help me with the CSS code to format my card like this link? Sorry for an unclear question above!

[Tom]

Are you wanting us to help you replicate the entire card, or just the tags/categories placement?

[An Nguyen]

Hi Tom,

Yes, I want to replicate the entire card. How can I do in next step?

Thanks Tom.

[Author]

Posts