Prev Next

Example 1: Previous Next on a CMS template page

Previous and Next items on a template page based on any order rules you want

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List that holds our previous and next items

  • Why we have a contentId and what it does

  • Efficient loading of images with loadImages

  • The .prevnext() component to create a CMS powered previous and next buttons.

FREAKING AWESOME BLOG POST

Project 10

10

Blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content.

blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content blog post content.

PREVIOUS POST

NEXT POST

Previous post goes here

This will be removed from the page. It's just here as a sample.

Behind me is an 'empty state' div

There are no previous posts sorry!

Go back to blog

Next post goes here

This will be removed from the page. It's just here as a sample.

Behind me is an 'empty state' div

There are no next posts

Go back to blog

Below this is our hidden Collection List that holds our Collection Items. You see a text-only list on this published page, but the list should be hidden on your implementation.

One of the items will be identified as our 'previous' item.
One of the items will be identified as our 'next' item. 

We will use our 'contentId' to identify which template we are on. Our 'contentId' in the blog post above and the 'contentId' in the hidden list below will be matched.

Based on the 'Order' we set for the list below, Previous and Next will be identified and 'pasted' into the above targets. Sweeeeet!

The images below are hidden on the page via display: none in page settings <head>. The loadImages option will only load the images for the previous and next posts.

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.