Native linking to previous and next post with titles using CMS

That’ll likely work, as well, sir. Give it a try! Cheers!

1 Like

@Lux @RileyJones

Riley? Maybe you know this one?

Luke, sir. I would love if you could help with this. Would make my day!

I gave it a try, but i guess i have no idea how this really works.

This is what i tried:

<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').text();
		var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
    var next_image = $('#post_list .w--current').parent().next().find('a').image();
    var previous_image = $('#post_list .w--current').parent().next().find('a').image();
  
   //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
    	$('#blog_return').attr( "style", "display: flex !important;" );
      }
 
    
    //apply hrefs 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_image').image(next_image);
    $('#previous_image').image(next_image);
    
  });
</script>

This is my preview link:
https://preview.webflow.com/preview/hvasshannibal?utm_medium=preview_link&utm_source=designer&utm_content=hvasshannibal&preview=467d626cc454d96f97e4affd0dd02fd9&pageId=5dce74236467910ff29e73c5&itemId=5de62a43264fd1fde4aad7a8&mode=preview

1 Like

Thanks.

Very basic idea (and usefull for blog or portfolio) - Webflow should add this feature to the core (Users ask for this since 2015 (5 years ago)).

Micro-features sometimes make the difference more than “mega mega features”.

3 Likes

Hi @allykat87 and Lux, thank you for posting this great solution, but i didn’t get it to work properly :S. @allykat87 can you put it as clonable project just the pagination sultion so that we are able to clone it?

@Siton_Systems I Agree, this is something that had to be done long time ago, from the time that they create CMS solution for Webflow.

Thank you guys for your great support!

1 Like

Glad to see that people are talking about this website feature. It is helpful but not very required in my view.

It has been awhile since I posted this variation of the original solution. Remember that I couldn’t get it to work for a while, as I tried to implement their solution. But once I got it, I realized how it works.

I’m thinking that before you give up, try to run through the original solution until it clicks.
Best of luck and keep at it!

Hello people,

I am very enthusiastic about Webflow but I also miss the navigation between CMS items. I have read the previous posts and used part of the solutions as described. Thanks @hammerhouse and @lux.

When using filters i ran into some issues. The items did show an empty spot on the item page when using filters to show/not show items. Together with my son Jorik who is a very enthusiastic javascript programmer in the making, we have looked at how we can make a solution for this issue. We have changed the content of the script. The id names have remained the same but the script works differently.
The idea is to get all the dynamic items and filter out the ones that have w-condition-invisible
Then it determines if the post is the last or first item, to show the last visible item when pushing the previous button in the first item and to show the first visible item when pushing the next button in the last post.

I did showcase it in a simple cloneable project:

https://webflow.com/website/CMS-post-navigation-with-filter

Kind regards,

Arthur van Veen

7 Likes

Simple, working solution – thanks Arthur.

1 Like

Does anyone have a video tutorial of this from start to finish? I’m having trouble following both hammerhouse’s instructions and these because i can’t see every step. Can anyone help?

A common functionality request on projects I create is to also add images to the PREV and NEXT link blocks.
How?
You’d just need to add two more elements to this formula, just like I did for the LINK, and TITLE elements.

  1. Add in an image for each link
  2. Add in an ID to each image for reference
  3. Add in instructions for it to retrieve the image src
  4. Test
  5. Style your images
  6. Publish

…and 7: sell more mugs :wink:

image

these directions are out of date, the webflow UI is not the same, also, instructions that others believe are common sense and not worth explaining actually contain important details that get left out… id love to work through the samples, but as certain key details go undocumented, its difficult to feel confident in my success… anyone want to help me understand? thanks a ton… :slight_smile:

1 Like

I’m no Javascript master, so taking these steps was a leap for me at the time.
It’s wonderful contributions like @ArthurvVeen’s cloneable project above that help out noobs like me.

These directions are certainly old. Two and a half years is ages on the web. :wink:
As the product continues to mature and gain new features, these will become outdated, surely.
There is a wishlist item for this. Perhaps it will get some traction and become a feature.

It has helped for others up until now, but that’s just how things shake out, right?

If one is at a stage when solving this feature in their project is not attainable and they’re not able to grasp the instructions (I can relate) it may be best to move on without. I suppose one could come back to this task when either of these things is no longer true.

Let us know if you still have trouble or found a new solution, @kevin_keiper. :+1:

thanks this helped me a lot @Lux - weird this is still not native in webflow especially for those of us have to clone WP projects inside webflow with the direction “make it exactly the same”

1 Like

This may help you out guys :slight_smile: Webflow Previous Next - F'in sweet CMS Library

1 Like

Thank you all for the great input. Still can’t believe this isn’t a native feature after all these years.

Best Solution! Thanks @ArthurvVeen

Thanks Arthur,

However in the last page, when clicking the previous button, it goes back to the first page.
Do you know how to block the buttons for the last& firstpage?

Fabulous ! Thank you Arthur ! :smile:

Thank you, @ArthurvVeen. Your solution is fantastic and easy to implement. Great job!