Streaming live at 10am (PST)

Native linking to previous and next post using CMS (expanded)

So here is my summary and expansion on the great method of showing next and previous posts from inside single post of a collection that was thought of by @hammerhouse here and then excellently followed up by @Lux here.

This method is completely automated once you set it up, and doesn’t require any updates with the collection growth.

The only downside is using it on collections that are exceeding Webflow limitation on the number of simultaneously shown items.

So here’s the gist of it: we create an invisible collection list with all items from a collection and then take whatever data we need from it with jQuery to assign to our next/previous buttons. Original method took only links from this collection, follow up took also titles, and I will show you how to take anything from it - date created, thumbnails etc.

I will start from the beginning so that there is no need to read previous topics and combine code.

  1. When inside your post template create a new collection list and assign it to this collection you’re in. Give it an ID of post_list

  1. Add a link div inside the collection item. This is important - link div, not simple link. Set this link to Current Post

Image 2020-03-23 at 6.09.51 PM

  1. Now inside this link we will insert everything that we will want to show inside our next/previous buttons - post title, date created, thumbnail, summary etc. For example if we need to show post title we insert plain text and assign the “title” field to it, for the thumbnail we insert image and assign our “thumbnail” field to it etc.

  2. For each element we will assign ID’s to use them in our code later. For example for the title text we will assign an ID of post_title, for the image - post_img etc.

Nice! Now we have all the information our script will need to get data from!

  1. Now we create the actual previous/next “buttons” (these of course could be anything visually hence the quotes). Depending on what info form our next/previous project we want to show we will insert all the required elements inside.

  2. For each element inside our previous/next button we assign ID’s that we will later use in our code. For example our main buttons themselves will be called next_button and previous_button, our title headings will have an ID of next_title and previous_title etc.

Great! Now we have both points between which we will make the transfer of data!

  1. In the post template page settings in the head tag section insert this code

:

<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');
    
    var next_title = $('#post_list .w--current').parent().next().find('a #post_title').text();
	var previous_title = $('#post_list .w--current').parent().prev().find('a #post_title').text();

    var next_snip = $('#post_list .w--current').parent().next().find('a #post_snip').text();
	var previous_snip = $('#post_list .w--current').parent().prev().find('a #post_snip').text();

  	var next_date = $('#post_list .w--current').parent().next().find('a #post_date').text();
	var previous_date = $('#post_list .w--current').parent().prev().find('a #post_date').text();
    
    var next_img = $('#post_list .w--current').parent().next().find('a #post_img').attr('src');
    var previous_img = $('#post_list .w--current').parent().prev().find('a #post_img').attr('src');
    
    //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 data to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    
    $('#next_title').text(next_title);
	$('#previous_title').text(previous_title);

    $('#next_snip').text(next_snip);
	$('#previous_snip').text(previous_snip);

    $('#next_date').text(next_date);
	$('#previous_date').text(previous_date);
    
    $('#next_img').attr('src', next_img);
    $('#previous_img').attr('src', previous_img);
    
  });

</script>

Aaand that’s it! You can add any other elements from the cms items you wish using the same technique.

Note that at the beginning and at the end of a collection the next or previous buttons will be hidden. Check the code for the line that you can delete or comment out to make your posts loop.

The example is here.
The look into the setup is here.

11 Likes

Very good @dram!

Always good to see what the community comes up with.

2 Likes

Unfortunate this isn’t built in. I love Webflow but there’s functionality that a robust CMS (like ProcessWire, Craft., tc.) provide via simple inline tags.

1 Like

Oh, totally! But at least the system is super flexible and allows you to make it better with simple code like the one above :slight_smile:

3 Likes

hey @dram I tried this (I’ve been messing with this on and off for a couple of weeks, from earlier posts) but it seems to be not working - even on your demo.
In the preview we get this:

There’s no “real” data there… Any ideas what the issue is?

Actually, a bit more digging… In my version the link works… so your code is good - but it’s not showing the content of the link, in my case just the headings.

For what it’s worth here’s my read only link
https://preview.webflow.com/preview/jessicas-fabulous-project-570f5e?utm_medium=preview_link&utm_source=designer&utm_content=jessicas-fabulous-project-570f5e&preview=b16a4c3780f1ad56fb149556d01d0b21&pageId=5edfb2299d4d57681fa48c8b&itemId=5edfb235a5e96662188f3258&mode=preview

It works only in published links not in preview.

Thanks Alex… I don’t know what I did wrong, but a quick rebuild sorted it out!

1 Like

Thank you so much for this!!! I really appreciate the breakdown. Unfortunately, my client will definitely have more than 100 posts within a year, so these workaround methods will not work for very long for us. It’s unfortunate that 5 years after the CMS release, this is still not a native functionality. I’ve seen many wishlist suggestions and forum requests for it, so I’m starting to lose hope that it will be available as a native functionality any time soon :frowning:

That being said, thank you all so much for doing what you can to help us out. The Webflow community is just amazing.

1 Like

Ah, yes, too bad. But let’s be honest having first 100 posts to have this functionality would cover 99% of use cases :smiley:

2 Likes

I was just wandering, (maybe its unnecessary or doesn’t work cause you already tried it) but if you want to display the next post and previous posts on the page couldn’t you just achieve that with built in filters? so you would set the collection to order by post date and then you filter one day in the past and one day in the future, while limiting the display to only one post… something along those lines… and so long as they are sorted chronologically only the next/last posts will show up…

Also @genejeter re:exceeding more than 100 posts - (not sure maybe this suggestion is redundant but in any event here it goes and its not complex) - you just sort your posts some way and add two collections to the page where first shows 1-100 posts and second 101-200 and so on…

Sorry, not following. That would result in the very same two posts being shown on all next-previous links as filtering by day in the past or future would be related to the present day not the day when the post you are in was posted.

That wouldn’t work as my script uses only one collection list to get data from. It cannot know when to start looking into the second one with 101-200 items. Better scripting skills are required to set it to figure out when next item in the list is missing an start looking into the next list. Probably doable but not by me, haha.

Regarding the collection- if You sort it in any way - let’s say by creation date then the collection will know what’s 1-100 and 101-200.

As for filters by date - I have to test it but I believe that you can sort it/filter it to show only one result that was one day before the today’s post or one day after the existing post

This script will not work with two separate collections. If you could modify it to look into the number of collection after the next item falls out of range for 1-100, 101-202 etc, please let me know.

This still wouldn’t work unless every post is posted each day though, right?

So, for the filtering by past/future - you are correct, it would not work - I made a test site and the two issue i found is that while I can display a previous and future post it does it only relative to todays date and once i click on the post to go to the next one, it does not reapply the filter again…

That being said, in connection to overcoming 100item per collection issue - if having multiple collection doesn’t work as is you can do the following - you add multiple collection to the page as I mentioned before, then you sort each one 1-100, 101-200, 201-300 etc… and then with custom code you append it all into the first collection…

$(document).ready(function() {
  const addtionalGalleryContainer = $(".additional_gallery_container");
  const mainGalleryContainer = $(".main_gallery_container");

  for (let i = 0; i < addtionalGalleryContainer.length; i++) {
let elementContent = $(addtionalGalleryContainer)
  .eq(i)
  .html();
$(mainGalleryContainer).append(elementContent);
$(addtionalGalleryContainer)
  .eq(i)
  .empty();
  }

so this way the “mainGalleryContainer” has all the items of the collection. I have it working with two separate image collection on a page I was working on…

This is awesome, worked perfectly. Thank you!

1 Like

Hi,

I’ve set up the prev/next button and wanted it to loop, but the loop doesn’t work.
I only use the href to get the next/prev url.
When going to the next project from the last project it should loop to the first project again.

Any thoughts on this?

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');

//apply data to next / previous buttons
$('#next_button').attr('href', next_href);
$('#previous_button').attr('href', previous_href);

});

Sharelink: https://preview.webflow.com/preview/jsl-test?utm_medium=preview_link&utm_source=dashboard&utm_content=jsl-test&preview=41c9828a161c5932b448dffe5a302671&mode=preview

Confirmed, loop doesn’t work. At this time I cannot say why - looks like original solutions that I based this one upon stopped looping at some point in the past, maybe due to some changes in cms lists functionality?

I learn new things from your post…