Native linking to previous and next post with titles using CMS

So, after searching around for a solution to the Prev/Next buttons in articles to link to nearby articles/posts, I decided to use someone’s solution and I hope this positively continues the discussion from Native linking to previous and next post or page using CMS:

I’ve modified @hammerhouse’ original prohack to include article/post titles. You can see the additional vars from his code.
Granted, if this were native feature of @webflow then we wouldn’t be doing this, but I figured I’d add on to an already wonderful solution.

  1. Add an Heading (H2, H3, etc.) element inside the anchor, to be used as an element to be targeted by the script.

  2. Add in these two new vars inside the script:
    var next_title = $('#post_list .w--current').parent().next().find('a').text();
    var previous_title = $('#post_list .w--current').parent().prev().find('a').text();

  3. Then, near the end of the code add in two bits to set the text of the links using our new vars:
    $('#next_title').text(next_title);
    $('#previous_title').text(previous_title);

Make sure you add those IDs to Webflow elements that you are using for the text, something like this:
<a href="#" id="previous_button"><h4 id="previous_title">Loading</h4></a>
<a href="#" id="next_button"><h4 id="next_title">Loading</h4></a>

Then you should be all set. Here’s hoping the wishlist makes this easier in the future. :wink:
Also, I have more than 2000 CMS articles on my site, so this works despite that.

21 Likes

Simple and useful, thanks for sharing this, I’ve been asked to come up with this feature yesterday and was wondering if it was possible.

1 Like

@vincent Seems the previous and next buttons disappear on my published site as well as the post_list.

https://preview.webflow.com/preview/tjtj-design?preview=068d5a782ee1fa43ecf44fdef191177a

Any help would be great.

2 Likes

You should visit the original post comment about this technique first and read through it again. It has the full directions for you.
It looks like you’re missing a collection list for this to work. Make sure it has the ID that it requires, too.

Hi there,

Thank you for your response. I’ve checkd through each step individually with all the correct dynamic lists and the buttons still do not appear in the published site - they appear for 1 second then disappear.

I’m unsure where Im going wrong!

1 Like

If they appear for one second and then disappear, it’s likely the Hidden styles in the script and the styles on your site are competing upon load.
In my Design view, I see all of the article titles, but when viewing the site live, they are hidden. Check that.

1 Like

Yes that is correct! The previous guide mentions to add a dynamic list of all the elements in the collection as well as the two ‘next’ and ‘previous’ buttons allow with the appropriate ids.

The custom script supplied actively hides the dynamic list with all the collection items in the published view but seems to hide the buttons as well despite showing both in the design view (which is correct because the custom code wouldn’t be active in the design view).

Something in the custom code is causing the buttons to be display none.

Can anyone please help on this matter as its rather crucial for the flow of my site. Thanks

I have the same issue with the buttons disappearing on the published site, any help?

1 Like

Please try sharing a read only link for your site in order for someone to try and help you out.
I wrote this post to help people out trying to do the task I needed. Really, though, there is more info on the original post than I can provide.

That one is more straightforward. Best of luck.

There is two lines in the custom code that causes the buttons to fade out:

$('#next_button').fadeOut(); //optional - remove if you want to loop to beginning

…and
$(‘#previous_button’).fadeOut(); //optional - remove if you want to loop to end

Write “//” in front of the code to comment it out or remove it and publish again :slight_smile:

4 Likes

Please add votes here to get this native in webflow

https://wishlist.webflow.com/ideas/WEBFLOW-I-1850#votes

4 Likes

I’m reading through the articles and comments again, and, until this becomes a native control, this is by far the best way to approach this, since it’s automatic, and requires no maintenance.
If you’d like a better write up describing this, since the example from the original is no longer published, let me know and I’ll do my best to create one for the forum.

2 Likes

Yes, please. That would be very helpful. Thank you!

Any luck getting this to work?
It’s not too complex, but it is very specific. If one step of the process is left out, it will not work.
I would try reviewing the initial instructions linked to above, then move on to the instructions I’ve added. Some of the steps don’t make sense until you continue further and then you realize why the steps are there. Unless you’re privy to the hidden machinations of :webflow_heart:, it’s confusing, for sure.
Additionally, it’s likely that the new Pagination controls would work for you.

EDIT: Also, i would consider this a ‘hack’ until it’s a function built in to Webflow. A good hack, but any time you add a hack, further down the line things could break as the code of Webflow moves forwards and surpasses the value of the hack, as it were. Use with caution, and don’t forget about it being there.

2 Likes

I did get it to work. It’s awesome. Thanks.

1 Like

This solution is almost working except for one problem I have found. Collection lists have a limit of 100 items. I have over 200 posts so when I get to post 100 the Previous button disappears and all articles that are older than post 100 in my sort order do not have any buttons at all.

Hey @Lux - thanks for this! It’s exactly what I needed…but for some reason, the titles are showing up with the text “next article” and an unknown symbol. Do you know how I can fix it?

Here’s an example:
http://demo.sondermind.com/blog/parenting-with-depression

And here’s the preview link:
https://preview.webflow.com/preview/sondermind?utm_medium=preview_link&utm_source=dashboard&utm_content=sondermind&preview=8f25bb2fded1f58d8537963dd138abaa&mode=preview

Hello, @allykat87. That’s a beautiful site!
In your page structure I clearly see the div that holds the arrow/symbol as well as the div that holds the ‘next article’ text. You can remove these as needed.
When I previewed your example an hour ago on my phone, I did see the symbol. But both desktop as well as phone views seem repaired.
I’m glad to help if something comes up again, Natalie.

Hey Lux!

This is awesome! Nice one!

Is this also possible to do with an image? Getting an image from the next post?
I would reaaaally love that!

Thanks for your time!

1 Like