Native linking to previous and next post with titles using CMS

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

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