[Resolved] I need your support on pagination format

[An Nguyen]

I want the post navigation to be like the following: you can view the pagination format here I want to format like this link.

Previous Post: Next Post:
< Post title Post title >
Thumbnail image Thumbnail image

I followed these links 1 2 and tried to do with the format above but it doesn’t work. I need your help.

Thanks,
An

[Tom]

Hi there

Creating cards like that would be a significant amount of work, which is out of the scope of this forum, unfortunately.

The next/previous buttons along with a featured image is something we can likely help with in here if you’re interested.

Let me know 🙂

[An Nguyen]

Hi Tom,

Can you help me like you said?

Thanks Tom,

[Tom]

Can you start with this and then let me know?: https://generatepress.com/forums/topic/next-previous-in-one-row/page/2/#post-292283

Then we can design it a bit 🙂

[An Nguyen]

Hi Tom,

It’s done. So, Could you help me design in next step? Can we separate title & thumbnail in 2 lines? Titles could be above thumbs or thumbs above title? Or your new idea that you could do. Now, it looks not good when the length of title too long.

Thanks Tom.

[Tom]

Give this a shot:

.nav-previous > span,
.nav-next > span {
    display: flex;
    align-items: center;
}

.post-navigation img {
    display: block;
    margin-bottom: 5px;
}

.nav-next img {
    margin-left: auto;
}

.nav-next > span > * {
    margin-left: auto;
}

[An Nguyen]

Thanks Tom.

It worked perfectly.

[Tom]

You’re welcome 🙂

[Daniel]

Hi Tom,

I want to execute a similar thing on my website. In the reply above you refer to the following post of yours:

You would add this function: https://gist.github.com/generatepress/dc79fa83d8706f19365aa07ddd141cd3

Then this CSS:

.post-navigation img {
width: 50px;
display: inline-block;
vertical-align: middle;
margin: 0 5px;
}

It’s my first time adding a function, so I just want to confirm, that this is the correct way of going about it: https://docs.generatepress.com/article/adding-php/

Thanks for your help!

[David]

Hi there,

for the GIST function yes the adding PHP article is correct.

[Author]

Posts