Native linking to previous and next post or page using CMS

GarlandBriggs · October 11, 2015, 11:26pm

I’ve set up a collection of blog posts, and made the appropriate pages. Everything works like a charm, but I would like to insert links to the previous and next post.

sabanna · October 12, 2015, 1:58am

Hello @GarlandBriggs,
I am sorry, but in this first release CMS do not have such function, yet.
I have a workaround for linking “in between” but it will be pretty much work when there is many items in the collection (like blog-posts).

Regards,
Anna

Koen · October 12, 2015, 5:34am

When Webflow start to biild this, please also build the option: next/previous page.

GarlandBriggs · October 12, 2015, 6:11am

Ah, I see. But you have a workaround you say – would you like to share it?

sabanna · October 12, 2015, 4:46pm

Sure, I am glad to share
When you are creating item in any collection, it is shows how dynamic link to this item will look like. So I just added fields with links to the previous and next items in this collection, where I manually typing links.

Like I said, it will be pretty much work when there is many items. I used it for linking in between albums

Regards,
Anna

Koen · October 13, 2015, 8:06am

Nice idea Sabanna! i will use this until than!

rowan · January 22, 2016, 9:07pm

Any updates on this? This would be awesome to have, if not possible already? The workaround of @sabanna is nice, but will be a real pain with a lot of articles. I’m currently working on a support kind of site with a lot of courses/trainings, which they want to present in a course-kind of way with Next/Previous training buttons.

raulipadding · January 24, 2016, 7:14pm

Happy to like this too. It could be similar inbuilt feature like the “previous slide” / “next slide” is.

md673 · January 28, 2016, 4:49pm

+1 Would love to have this feature.

Aidz · January 28, 2016, 4:55pm

+1 paging for the CMS would be awesome

buryat · March 17, 2016, 12:53am

Actually there is a slightly simpler way to make next or previous actions then sabanna suggests.
In my case I reused the reference field linking to itself, creating kind of a loop.

First you need to create a reference field in the same collection. Name it Next.
Link the reference to it self.

Save the collection.
Go to the Editor and create a button, name it “Next”. In the Link settings make sure to click on the “A collection detail page” and to pick from the dropdown “references > next”.

Go back to collections and in the items list and pick one item.
In the “Next” field select the item that should appear next as the “Next” button triggered. (Repeat for each item)

Same way can be created previous button.

sabanna · March 17, 2016, 12:57am

Great idea!!! And so simple!

thesergie · March 17, 2016, 5:25am

I was about to suggest the same thing! Thanks!

Chris_Scott · March 21, 2016, 12:34pm

This worked perfectly for me.

I added two toggles to my collection, one “First” and one “Last” that I turn on if the lesson (my site is an online course) is the first or last in the unit.

This allows me to show or hide the Previous and Next buttons when appropriate. Maybe that’ll help someone else, too!

Koen · August 17, 2016, 10:50pm

Guys, i know its holiday time… and your working on great stuff… but please when that is finished do some small projects like this kind of things it would make the community love your more!

kiku · September 6, 2016, 5:02am

Any updates?

outerwhitespace · November 29, 2016, 1:35am

It might be worth noting that I had to refresh after adding the “next” reference field to the collection before I was able to link it from my template. Just throwing that out there in case anyone else runs into this same issue I thought it wasn’t working at first.

jjms01 · December 20, 2016, 11:29am

When will this feature be available? @thesergie

hammerhouse · January 15, 2017, 5:09pm

I solved this issue without manually assigning anything in the CMS. If the post order is changed or if posts are deleted, the buttons update automatically. A working version of this can be found here: http://www.hammerhouse.io/post/jonathanroy

How it works:
-A dynamic list containing your posts is added to the post template page.
-Webflow automatically adds the class ‘w–current’ to the current post.
-jQuery searches the dynamic list for that class and the posts that come before and after it.
-jQuery updates your next / previous button anchor tags.

Step A - Add the the post list:

At the bottom of the post template page, add a Dynamic List containing all posts
Assign the ID ‘post_list’

Step B - Add dynamic links:
3) Add a Text Link element inside the Dynamic Item
4) Set the link to Current Post
5) Set the text to the post’s Name field

Step C - Add ID’s to buttons:
6) Add ID ‘previous_button’ to previous post button
7) Add ID ‘next_button’ to next post button

Step D - Paste the code:
8) In the post template page settings, add the following code inside the head tag section:
-CSS is included to hide the post list on the published page

Code:

<style>#post_list{display: none;}</style>

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
    
    //if last post in list
    if(next_href == undefined) {
      next_href = $('#post_list').children().children().first().find('a').attr('href');
      $('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#post_list').children().children().last().find('a').attr('href');
      $('#previous_button').fadeOut();  //optional - remove if you want to loop to end
    }
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    
  });
</script>

samliew · February 14, 2017, 5:38am