So here is my summary and expansion on the great method of showing next and previous posts from inside single post of a collection that was thought of by @hammerhouse here and then excellently followed up by @Lux here.
This method is completely automated once you set it up, and doesn’t require any updates with the collection growth.
The only downside is using it on collections that are exceeding Webflow limitation on the number of simultaneously shown items.
So here’s the gist of it: we create an invisible collection list with all items from a collection and then take whatever data we need from it with jQuery to assign to our next/previous buttons. Original method took only links from this collection, follow up took also titles, and I will show you how to take anything from it - date created, thumbnails etc.
I will start from the beginning so that there is no need to read previous topics and combine code.
- When inside your post template create a new collection list and assign it to this collection you’re in. Give it an ID of
post_list
- Add a link div inside the collection item. This is important - link div, not simple link. Set this link to Current Post
-
Now inside this link we will insert everything that we will want to show inside our next/previous buttons - post title, date created, thumbnail, summary etc. For example if we need to show post title we insert plain text and assign the “title” field to it, for the thumbnail we insert image and assign our “thumbnail” field to it etc.
-
For each element we will assign ID’s to use them in our code later. For example for the title text we will assign an ID of
post_title, for the image -post_imgetc.
Nice! Now we have all the information our script will need to get data from!
-
Now we create the actual previous/next “buttons” (these of course could be anything visually hence the quotes). Depending on what info form our next/previous project we want to show we will insert all the required elements inside.
-
For each element inside our previous/next button we assign ID’s that we will later use in our code. For example our main buttons themselves will be called
next_buttonandprevious_button, our title headings will have an ID ofnext_titleandprevious_titleetc.
Great! Now we have both points between which we will make the transfer of data!
- In the post template page settings in the
headtag section insert this code
:
<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 #post_title').text();
var previous_title = $('#post_list .w--current').parent().prev().find('a #post_title').text();
var next_snip = $('#post_list .w--current').parent().next().find('a #post_snip').text();
var previous_snip = $('#post_list .w--current').parent().prev().find('a #post_snip').text();
var next_date = $('#post_list .w--current').parent().next().find('a #post_date').text();
var previous_date = $('#post_list .w--current').parent().prev().find('a #post_date').text();
var next_img = $('#post_list .w--current').parent().next().find('a #post_img').attr('src');
var previous_img = $('#post_list .w--current').parent().prev().find('a #post_img').attr('src');
//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
}
//apply data 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_snip').text(next_snip);
$('#previous_snip').text(previous_snip);
$('#next_date').text(next_date);
$('#previous_date').text(previous_date);
$('#next_img').attr('src', next_img);
$('#previous_img').attr('src', previous_img);
});
</script>
Aaand that’s it! You can add any other elements from the cms items you wish using the same technique.
Note that at the beginning and at the end of a collection the next or previous buttons will be hidden. Check the code for the line that you can delete or comment out to make your posts loop.
