Archived topic
How can I set this page to have pictures like the homepage
12 replies · Started by RYAN on December 12, 2022
How can I set this page to have pictures like the homepage
Hi there,
what posts do you want to display on that page ? Is it a Category ?
Sorry Ryan can you re-enter your last reply again
I might have accidentally deleted it while trying to reply to it.
Thank you :)
Even the articles on this page are like the articles on the home page. Each article has a picture in front of it. How can I set it?
Hi Ryan,
I can see you're using a GB Query Loop Block for that page.
You can utilize a GB Grid Block to structure your Query Loop and to add the Image on the left side. Reference: https://docs.generateblocks.com/article/grid-overview/
Moreover, you can use a GB Image Block to retrieve it. Reference: https://docs.generateblocks.com/article/image-overview/#dynamic-data
Set the data source to Current Post, and the data type to Featured Image.
Example structure: https://share.getcloudapp.com/P8uNeLen
Example video: https://share.getcloudapp.com/z8ul8K8W
I set it, but there is a problem that the width and height of the picture are not uniform. I tried to adjust the mode myself, and it doesn't seem to be right. How Do I set this specifically, also like the home page of the same picture width and height size to maintain consistency, eh, below the check the image is what I want the effect
To clarify, have you set the image width and height through the Image Block settings? Reference: https://docs.generateblocks.com/article/image-overview/#settings
If not, can you set it first? You can test the Object-fit as well. Try setting it to Cover for instance.
Let us know how it goes.
Why am I setting up 200x130 and saving the release, and why is it 175.52X130? Then the picture will look completely different from the size of the home page,
I see. You can try adding this CSS through Appearance > Customize > Additional CSS:
@media (min-width: 769px) {
.page-id-141 .content-area .gb-grid-wrapper-45f5838b > .gb-grid-column .gb-grid-wrapper {
flex-wrap: nowrap;
}
.page-id-141 .content-area .gb-grid-wrapper-45f5838b > .gb-grid-column .gb-grid-wrapper > .gb-grid-column:first-of-type {
width: fit-content;
}
.page-id-141 .content-area .gb-grid-wrapper-45f5838b > .gb-grid-column .gb-grid-wrapper > .gb-grid-column:last-of-type {
flex-grow: 1;
width: unset;
}
}
In the next update, ideally, you'll be able to do a setup like this with no or less extra code needed.
Then how can also be like the home page, can each different post also have a gap out, the first picture is the effect I want
Try adding bottom margin to the Post Template Block. Example: https://share.getcloudapp.com/jkuOQzGy
Can I change the color of the white space in the middle? I don't think so. Is there any other way
Hi Ryan,
Select the Grid block, and check if there's any value entered for the vertical gap?
If the vertical gap is not set, can you link us to the front end of the page so we can see the structure?