Streaming live at 10am (PST)

Linking and DISPLAYING next and previous post content?


#1

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.

Could anybody look at my test link and see where I am going wrong?
http://prev-next.webflow.io/post/7-ways-to-improve-website-usability-and-accessibility

The ‘author’ and ‘subject’ fields all showing on the page but I’m having trouble grabbing them and putting them into the next and previous sections.

Many thanks


#2

Hello @cbg

In that guide there’s a link to another post that includes titles:

Let me know if that helps


#3

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.


#4

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?


#5

Unfortunately I’m no coder either, ha! I should have mentioned, I did try and reverse engineer this to work with the author and subject but it’s not working, here’s my read only link.
https://preview.webflow.com/preview/prev-next?utm_source=prev-next&preview=aa25cdd07ed0aca8cf28f926db7611b4

I don’t quite understand where it’s pulling ‘next_title’ from either, since the post title is actually called ‘name’ in the CMS.


#6

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.


#7

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);

});

Thanks again,


#8

I would need to reference the HTML in the #post_list element to help. So that is where you should start.

Looks like you’re using the same selector for next_title and next_author, thus always getting the post name.

I’m buried with projects right now so I can’t offer more.