Previous and Next items on a template page based on any order rules you want
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.
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.
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.
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.