Streaming live at 10am (PST)

Native linking to previous and next post with titles using CMS


#1

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.


Native linking to previous and next post or page using CMS
#2

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.


#3

@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.


#4

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.


#5

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!


#6

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.


#7

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.


#8

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


#9

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


#10

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.


#11

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: