Hi there, I’ve been following @hammerhouse’s guide on getting ‘previous’ and ‘next’ buttons to appear at the end of a post page, it works great! However, I’m looking to expand it to include the post title, author and subject of the post too but I’m struggling to get it to work.
Hi Aaron – Yes, I’ve also seen that post and was able to get the titles working too. Just unable to get anything other than the titles to show like the ‘author’ and ‘subject’ fields in my collection. Any ideas? Thanks.
I’m no coder but I’m pretty sure you can call more attributes from a CMS item in that custom code in the lines:
var next_title = $('#post_list .w--current').parent().next().find('a').text(); var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
to get the author and subject. Can you share your read only link please?
He is giving you an example of JQuery code. If you understand javascript, then you would be set. There is not a native widget for what you seek.
The script is parsing an example element with the ID of post-list. Which could be a list of links generated by you using the Collection_List widget in the designer. Where you could select a collection display the content you want
The script then ls looking at the list and getting the next element anchor text from the current list item (page your on). You could then take the variable “next_title” and use with some additional javascript to create an element that you append, prepend, or inject into another element in the DOM.
This is just a place to start. A pointer if you will.
Learn JS / JQuery or if you don’t have the time, hire a competent JS developer/coder.
Thanks for your help so far. I do understand how this particular code works to pull the titles and hrefs from the existing posts on the page but what I don’t understand is why I can’t just pull the author and subject in the same way? Below is what I’ve tried but it isn’t having an effect.
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').text();
var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
var next_author = $('#post_list .w--current').parent().next().find('a').text();
var prev_author = $('#post_list .w--current').parent().prev().find('a').text();
var next_subject_title = $('#post_list .w--current').parent().next().find('a').text();
var prev_subject_title = $('#post_list .w--current').parent().prev().find('a').text();
//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
}
//if last post in list
if(next_title == undefined) {
next_title = $('#post_list').children().children().first().find('a').text();
//$('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
}
//if first post in list
if(previous_title == undefined) {
previous_title = $('#post_list').children().children().last().find('a').text();
//$('#previous_button').fadeOut(); //optional - remove if you want to loop to end
}
//apply hrefs to next / previous buttons
$('#next_button').attr('href', next_href);
$('#previous_button').attr('href', previous_href);
$('#next_title').text(next_title);
$('#next_author').text(next_author);
$('#previous_title').text(previous_title);