Previous
Next

Previous and next posts on a Webflow CMS template page
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Create previous and next items on a CMS Template page

Use any CMS field to order your Collection List and create custom Previous and Next buttons based on your order.

For example, sorting by "Date".

How to use it

Paste before </body> tag of the page you're working with.

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "fsPreviousNext"
  var fsPreviousNext= new FsLibrary('.post-list-hidden')  // Class of your CMS collection list to search for previous/next

  // run prevNext on our instance
  fsPreviousNext.prevnext({
    nextTarget: ".post-next-target",  // the div that the Next item should go
    previousTarget: ".post-prev-target",  // the div that the Previous item should go
    contentId: ".post-id",  // the unique id that identifies which item in your CMS Collection is the current item
    loadImages: ".post-load-img" // optional: sets background images to display:block; for only the two Prev Next items
  })
})();
</script>

Copy code

Code explanation

fsPreviousNext

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

new FsLibrary

The class of the hidden Collection List that holds our dynamic CMS List.

We will search inside of this list for our previous item and our next item.

nextTarget

Class of a div that we will 'paste' our next item into.

prevTarget

Class of a div that we will 'paste' our previous item into.

contentId

Class of a piece of CMS field text that identifies which post is the current post on the page. We will look for the contentId class on the template page AND look for the contentId class inside the hidden Collection List. We will match the template page value with the correct Collection Item in our List. This establishes a 'base' that we can then use to decide which Collection Items should be set as previous and next.

The CMS field text used as your contentId must be a unique value for that item.

loadImages

Optional. Used to improve page loading if your Collection List has many items.

Explanation:

If your hidden Collection List has many items, and those items have images, browsers may load these images on the page even though the content is hidden. If you have many hidden items with images, we recommend you set those images as background images that are set to display none. Apply a unique class to those hidden background images. That class should be used as the value of loadImages. The Library will set this class to 'display: block' for only the two items selected as previous and next. Instead of potentially loading all 100 background images, the browser will only load 2 - the previous post and the next post.

Makes no sense? Watch the How To video walkthrough!

HTML and class setup

IMPORTANT: This is easy to set up. You must understand how to structure your page for this to work.

Explanation of options, classes, and how it works
new FsLibrary

This is your instance of Library on the page. The instance is on the Collection List of your CMS Collection List. In this example, this is ~.post-list-hidden~.

nextTarget

This is where we 'paste' the child of our CMS Collection Item. In this example, we will 'paste' ~.post-prevnext-item~ to the ~.post-next-target~.

prevTarget

This is where we 'paste' the child of our CMS Collection Item. In this example, we will 'paste' ~.post-prevnext-item~ to the ~.post-prev-target~.

contentId

contentId must be added twice to the page - once on the template post. Once inside the ~post-list-hidden~. The two contentId items will be matched to create a base. From the base, we can identify which item is previous and which item is next. In this example, out contentId is ~.post-load-image~.

loadImages

Optional for setting background images to 'display: block'. This class is placed on a background image and this class should be set to 'display: none' in designer or pPage Settings. In this example, our loadImages class is ~.post-load-image~.

Previous next video Walkthrough