Archived topic
Category Archive Layout: Featured image in the same line as post title
8 replies · Started by Serge on December 20, 2022
I am converting from Genesis to GP Pro.There is a customization I liked in Genesis that I am not able to replicate on GP Pro. It allows me to have thumbnails of the featured image of the post displayed at the right of the post's title on the archive page. For an example, see: https://activepause.com/category/core/
I have tried to replicate this with GP Pro. I can get adjust the size of the title in the archive, and I can make the featured image displayed smaller (e.g. 60 px width). And, when I look at the "catagory" page on a desktop browser, the featured image does appear to the left of the text of the post's title. BUT there is a lot of space between entries.
Not only that, but it doesn't work on a phone. When I try the same page on my iphone, the featured image appears on top of the post's title 9even though it is on the left of it when the same category is viewed on desktop). And there is a lot of space between posts, way too much.
Note: If you follow the link Igave you above, you will only see the Genesis formatting, not the GP Pro. I have turned off GP Pro because of the problem I mentioned. I could send you screenshots, but i don't see a way to do it.
Hi there,
I can get adjust the size of the title in the archive, and I can make the featured image displayed smaller (e.g. 60 px width). And, when I look at the “catagory” page on a desktop browser, the featured image does appear to the left of the text of the post’s title. BUT there is a lot of space between entries.
Can you set the page up in GP like you described above, and then let me know, so i can provide the additional steps ?
OK. I changed the theme to GP Pro, so you can see the way that same category page looks. Please note that, on the desktop, the thumbnail is on the same line as the title, whereas on the phone it goes above the title (or below, depending on the setting). In both cases, there is a lot of space between lines. See: https://activepause.com/category/core/
Try adding this CSS:
body:not(.single) #page .post {
margin-bottom: 0;
padding-bottom: 0;
}
body:not(.single) #page .post .entry-header ~ * {
display: none !important;
}
.post-image-aligned-left #page .inside-article .post-image {
margin-top: 0;
margin-block: 0.5em;
margin-right: 2em;
float: left;
text-align: left;
} David, Thanks. It works! Actually, it works too well, in a way. I mean, the lines are too close, especially on the iphone. I assume this is something I can tweak, but I am not sure which one to tweak.
I tried tinkering with the number, but I cannot find a way to have a little more space between the entries. Would you have a suggestion?
This part of the CSS:
body:not(.single) #page .post {
margin-bottom: 0;
padding-bottom: 0;
}you can increase either the margin or padding setting eg.
body:not(.single) #page .post {
margin-bottom: 20px;
padding-bottom: 0;
}Thanks, David.
You're welcome
