Site logo

Archived topic

How can I set this page to have pictures like the homepage

12 replies · Started by RYAN on December 12, 2022

Viewing posts 1–13 of 13

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

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

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?

This archived topic is closed to new replies.