[Resolved] Configuring blog archive page

[Dan]

Hi, I’ve recently moved to Generate Press – which is a massive improvement, thank you! I have some issues/comments:

1. my blog/case study featured images vary in size and ratio and I wondered if there was a way to force them into a set ratio (rather then me having to update all the featured images)

2. I’m also struggling to get the featured image on the archive page to left align (they centre align regardless of what option I choose in the alignment section).

For both instances detailed above I am using Layout > Blog in ‘Customise’ to do the configuring.

3. Why do only 5 posts appear per page if pagination is selected? Can I manually change the number? 5 posts does not look good visually with 2 or 3 columns so it appears to be a strange default option. I noticed that even in infinite scroll only 5 appear initially before it seeds the next group.

4. Finally (sorry), is there a way to make each blog post on the archive page to appear more like individual ‘cards’. Something like https://www.acmcert.com/blog/. This would alleviate my need for point 2. In this example the whole card is clickable and that would also be preferable.

Thanks in advance

[David]

Hi there,

1. You can use this CSS for the featured images on posts:

.single .featured-image img {
    min-width: 100%;
}

Note – it may lead to ‘blurry’ images if the full size image is a lot smaller then the space they occupy.

2. In the Blog settings you can set the Featured Image size – this needs to be smaller say 200px wide for the left align to work.

3. Its a WordPress setting you can change in Dashboard > Settings > Reading

4. To do this requires a little CSS which i can provide but first off:

a. Do not do point 2 above 🙂

b. Uncheck: Make First Post featured:
https://docs.generatepress.com/article/blog-overview/

c. Set the archives Featured Image Location: Above Title and uncheck Display padding around images:
https://docs.generatepress.com/article/adjusting-the-featured-images/

d. let me know and ill provide the CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

Thanks for the prompt reply David!

For point 1 I realised I need to remove the featured image set height to make this work

For point 4 I’ve followed your instructions and looking forward to receiving the css.

Really appreciate this. I’m going to be using GP Pro on another site, as I’m really impressed with the feature set and support.

[David]

Try this CSS:

.generate-columns-container .inside-article {
    padding: 30px !important; 
    box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
}
.generate-columns-container .post-image {
    margin: -30px -30px 30px -30px !important;
}

/* Fix height of image and crop to cover container */
.generate-columns-container .post-image img {
    height: 300px;
    object-fit: cover;
}

Last CSS rule is for the image sizing and filling the space.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

Lovely. Thank you David.

One last little request…can I anchor the read more button to the button of the card do the layout looks more consistent? audiotrails.co.uk/category/case-study

[David]

Try this adding CSS:

.generate-columns-container .inside-article, .entry-summary {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.read-more-container {
    margin-top: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

You are a gentleman and a scholar.

[David]

Thank you 🙂 Happy to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts