Native linking to previous and next post or page using CMS

[vincent (Vincent Bidaux)]

Edit: This topic rebounds here (04/2018): Native linking to previous and next post with titles using CMS

[Bolivar19]

This is brilliant, thanks. And without any custom code!

[johan.van.wambeke]

Note:
If you put links to next and previous. Use a relative path like /albums/pallets-and-knives.
Otherwise, once you publish live this will redirect to the web flow domain.

[adifferentur (Alex Garcia)]

Hi @hammerhouse I followed the steps and tried implementing this code as-is but my previous & next buttons don’t appear to show up? I’m using normal buttons with class name “group” as in your screenshots and applied the previous_button/next_button id’s. Let me know if there’s something I’m missing or if this script has changed at all? Thanks!

[samliew (webflowexpert.com)]

No need to setup and fiddle with a collection list with my new method. Just design the links.

Dynamic linking to prev/next CMS items WITHOUT collection list

If you do not need the titles in the links, this is currently the easiest workaround for linking to previous and next CMS items WITHOUT using a hidden collection list, so it importantly does not have the 100-item limitation. Previously we had these workarounds if we wanted to link to the previous/next items: 74567 Adding Pagination (previous page/next page) to the CMS Template page - #3 by Noah-R 19525 Native linking to previous and next post or page using CMS - #19 by hammerhouse 113319 Nati…

[oswaldcreative (Robert)]

Great idea. Way to work the problem with references. This creates some additional ideas for me!

[Andrea_Gibbens]

Hi, I just tried this as well and I had the same experience. It cause my buttons to not show up at all.

[Nosa]

Hi,

Thanks a lot for this. But just to confirm, if you have, say, over 100 items (blog posts), this means you’ll need to manually link each post to the previous & next items? Seems like a lot of work.

[STFS (Stranger Than Fiction Studios)]

This is an epic solution!! Thanks for sharing man!!

[AliceFlores]

Check out microfiber sheets. These microfiber bed sheets are made from a soft, lightweight fabric that is perfect for those who want to get a good night’s sleep.

[JustinTyler]

Is there king size bed sheet set of microfiber also available?

[iggy (Nathan Igdaloff)]

Here’s a non-jQuery (vanilla JS) solution for those looking for it:

<script>
// Enables Prev / Next portfolio post links at bottom of page
let next_href = document.querySelector('#post_list .w--current').parentElement.nextElementSibling.querySelector('a').getAttribute('href');
let previous_href = document.querySelector('#post_list .w--current').parentElement.previousElementSibling.querySelector('a').getAttribute('href');

//if last post in list, get first one
if(next_href == undefined) {
  next_href = document.querySelector('#post_list .w-dyn-item a').getAttribute('href');
}

//if first post in list, get last one
if(previous_href == undefined) {
  previous_href = document.querySelectorAll('#post_list .w-dyn-item:last-child a').getAttribute('href');
}

//apply hrefs to next / previous buttons
document.querySelector('#next_button').setAttribute('href', next_href);
document.querySelector('#previous_button').setAttribute('href', previous_href);
</script>

[davidfromearth (David R)]

I noticed this same bug was happening to me. When I was checking the instructions I thought I did everything just like he said. Then I figured out for one of the IDs I did “#post-list”(this is wrong). When I corrected the ID to “#post_list” my buttons reappeared. Not doing a underscore was the thing that was causing the buttons to disappear. Hopefully this helps.