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

[Tom]

That’s a lot of work.

1. Set your blog columns to 2: https://docs.generatepress.com/article/using-columns-in-the-blog/
2. Set your featured image above the title, and remove the padding around them: https://docs.generatepress.com/article/adjusting-the-featured-images/
3. Set the excerpt length to 0, and add this CSS:

.archive .entry-summary,
.blog .entry-summary {
    display: none;
}

Once you do the above let me know and we can go onto the next step.

[An Nguyen]

Hi Tom,

All tasks are done, but in blog page, images still have padding around. I don’t know why? All categories pages image display full without padding.

Thanks Tom.

[David]

in Layout > Blog > Featured Images under the archive tab uncheck Display Padding around Image.
You also need to check Display Categories.

[An Nguyen]

Hi David,

I did but in blog page, feature-image still look like having padding around them.

Thanks.

[David]

Can you flush the Autoptimize cache and the disable the plugin while we set this up.
Once thats done double check the blog settings and flush your browser cache.

[An Nguyen]

Hi David,

I did and I also checked the situation. The issue is still there.

All plugins were turned off and deactivated except some essential plugins like GP, codesnippet and simple CSS. You can do double check. Hope you can find something!

[David]

I can still see Autoptimize cached code in the site, can you make sure that it is flushed and the plugin disabled.

[An Nguyen]

Hi David,

Can you check now ? I did deactivate.

Thanks

[David]

Can you remove whatever function you have for creating the zoomed hover effect on the post image.

[An Nguyen]

Hi David,

It’s done. No effects on the post image.

Thanks.

[David]

Now add this CSS:

/* remove image padding */
.generate-columns-container .post-image {
    margin: -20px !important;
    margin-bottom: 20px !important;
}
/* Set height of post image */
.generate-columns-container .post-image img {
    max-height: 200px;
    object-fit: cover;
}

/* Add border over entry-meta */
.generate-columns-container .entry-title+.entry-meta {
    padding: 20px 20px 0 20px;
    margin: 10px -20px 0 -20px;
    border-top: 1px solid #ccc;
    display: block;
}

/* Remvoe Category link icon */
.entry-meta span.cat-links:before {
    display: none;
}
/* Postiion cat links over image */
.generate-columns-container .inside-article {
    position: relative;
}
.generate-columns-container footer.entry-meta {
    position: absolute;
    top: 15px;
    right: 15px;
    margin-top: 0;
}

/* Adjust for mobile padding */
@media (max-width: 768px) {
    .generate-columns-container .post-image {
        margin: -10px !important;
    }
    .generate-columns-container .entry-title+.entry-meta {
        padding: 10px 10px 0 10px;
        margin: 10px -10px 0 -10px;
    }
}

[An Nguyen]

Hi David,

It’s done. Now, post image padding is fixed.
I wonder why they display not the same setting like archived page without using any CSS. Is it a bug or missing an option on setting?

Thanks,
An

[David]

Not sure why its not working from the Customizer – it does normally, unless you have any blog filter options set in a custom function it should work.

[An Nguyen]

Hi David,

I tested on my site in local host. It happens the same issue, if I use a filter for layout to display posts on categories page (archive pages). Could it have a bug from the filter function from GP document?

So what we will do next step?

Thanks,
An

[David]

If you used this filter:

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

And set the Post Padding option via that then this would override the customizer…

I updated the CSS here which includes the reduced image height and the post meta border.

I added comments so you can see where to tweak each element.

All that is left for you to is to adjust the header entry meta you want displayed.

[Author]

Posts