Archived topic

I need your support on pagination format

9 replies · Started by An Nguyen on September 9, 2019

Viewing posts 1–10 of 10

September 9, 2019 at 5:50 pm #1005303

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

September 10, 2019 at 9:38 am #1005976

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 :)

September 10, 2019 at 1:27 pm #1006126

Hi Tom,

Can you help me like you said?

Thanks Tom,

September 10, 2019 at 4:42 pm #1006261

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 :)

September 11, 2019 at 6:36 pm #1007249

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.

September 12, 2019 at 9:49 am #1007928

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;
}

September 12, 2019 at 9:59 am #1007939

Thanks Tom.

It worked perfectly.

September 12, 2019 at 5:15 pm #1008237

You're welcome :)

October 1, 2019 at 8:59 am #1023509

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!

October 1, 2019 at 9:01 am #1023515

Hi there,

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

This archived topic is closed to new replies.

Start building better websites today.