Smart Paging: How to display a node on multiple pages

By adam
Thu, 2014-12-11 07:18
2 comments
Daily Dose of Drupal Episode #184

Share with Others

The Smart Paging module is one of those "nice to have" modules. This module allows the ability to break content on a particular node into multiple pages. It is important to remember though that this doesn't mean you have to create multiple nodes or Drupal pages. This module works off of the same node. Neat!

The options to customize are fairly vast. You are allowed to break content onto new pages through one of three ways. These methods include using a HTML page break comment, word count and character count. All of these options are 100% customizable and allow you to select the limits you prefer.

Oh yeah, Smart Paging also allows for squeaky clean URLs. After all you have to keep that SEO juice flowing.

Besides just simply having content displayed through multiple pages using a pager there are some unique use cases I can think of for this module.
- Break down chapters of a guide or walk-thru where each chapter could have its own page.
- Display a separate page for your "Top X Drupal modules you can't live without" post. (ie each module could display on its own page).
- To be annoying (Use this module sparingly as in make sure you have a good reason to create multiple pages)

Hey everybody! Welcome to Episode 184 of the Daily Dose of Drupal. I am Adam Learing and today we are going to be covering the Smart Paging Module. I kind of stumble across this one by chance, it peaked my interest but basically what the Smart Paging Module is going to allow us to do is break our content or long form content on the multiple pages, basically improving the user experience when somebody’s reading it.

So I’m going to set this in one long node they’re going to see multiple pages of content. There’s also…it can be used of course if you’re doing the 10 best Drupal modules and you only want to do one post but have them broken across five different pages. This is a god module for that type of used case. So we’re going to get to that just a second buy as you’re typically used to before…before we do that we’re going to do a little publicity, Code Karate of course is where all other module and all the kinds of other crazy stuff that can be found, head on over there, check out all new post, check out our EBook, go ahead and follow us on our social networks.

We do have a new YouTube channel or not new I supposed but just upgraded one, a new Code Karate Twitter account, some other cool stuff going on at Facebook as well. So make sure to head on over to all those, like us, tweet us or whatever you need to do, appreciate anything you can do. Alright so that’s that. So now let’s get to the module and again I’ll show you how to use it and get you a couple of use cases in a second.

So obviously the first thing to let you know is I’m using the 7.20 version here. This is the most updated version available. Inside the module here there’s some other stuff that you all want to check out, some integrations that work with them like WYSIWYG, meditated module and SEO stuff. I’m not going to let you cover and of that. In this video I’m simply going to show you the basics of how it works but know that it does integrate well with smaller module out there. Again there’s good information as far as how it’s working on the backend so if you’re interested on that, go ahead. Theirs is also an installation here, 7 Steps but we’re going to take you through those right now.

So the first thing you’ll do again is download your module and drop it in your module’s directory and then go ahead and enable that. So I did that, so I turned it on and then you want to go over here to configure and then I’ll kind of take you through some of these options here. The first one is you want to…most likely you want this enabled, Clean URL pagination and it also allows you to specify the word that you’re going to inject into the Clean URL and I’ll show you where that shows up eventually.

But basically you could see it from the example, this would be codekarate.com/node/1 if you’re using clean paths that could be codekarat.com/awesomepost and then it would say page/0of 1 and it would go on and basically it would be a Clean URL. But you don’t have to say page, instead you wanted to say article or banana. I mean you could have it say whatever you want. Obviously page is kind of the default, the one I would use and we’re going to continue using that here. Just going down here, some other options here.

Using this Javascript page here, obviously this just basically it just loads your next page, you’re out here having to reload the page so that’s always nice. It makes a little easier for users to get to the next page faster. You can use the Next and Previous buttons to page one page at a time instead of going, jumping having to select page two, page three, page four. So if giving that track will allow that, let’s see here; there’s some default value of stuff as well. The module allows you to basically break content three different ways.

The first one being a manual setting, so you can use these placeholder here, a comment basically a page break. You can customize that if you wanted. I wouldn’t see a point to it. You can also limit on character count so it’s going to count your text and every time it reaches 3072 characters it’s going to make a new page break or you can do it simply by words. So every 512 words it’s going to make a new page. You can customize all of this on the individual content type.

These are the defaults for all smart page and filters but you can customize that on individual basis if you’d like. Also here; you can see here a content suffix title if you want that description to provide actually good explanation of that but this would just say page 2, page 3 and so on so you can change that to something specific to your site if you wanted but page works for me. Okay so now that we have all the default set up, the next thing you need to do is go into your text formats.

So if we come over here in the content authoring you can go to text formats and by default here…basically Drupal is going to have the three. I always choose to use full HTML as my default but if I only have it configure you got to make sure that you enable the smart paging option here and this is pretty important; by default…I’m sure this [inaudible - 0:05:38.8] didn’t want but by default this is what it would look like when you came in here. So what I did is I selected the part Smart Paging checkbox and then I disabled the BR as a line break option and I basically said convert line breaks into HTML for smart paging capabilities.

This option right here is one of the smart paging modules installed so I just want to make sure that you got these two checked for sure. And then actually again it’s up to you if you prefer. The mart paging appears here and we’ll go ahead and save. The other Caveat just to make sure that in case you choose not to use full and you want to use filtered by chance. You want to make sure again these same ones selected here so we do these two here but another thing you’re going to want to make sure is down here in the Filter settings. You allow to eject a comment as a possible HTML tag.

I believe over here if you look at these directions here you got to verify that comment tag are included and limit allow the HTML tags list. So we just want to include that comment here if we did. Make sure we space it there but that basically allows for comments to be accepted HTML using full HTML of course all HTML tags are allowed. So I don’t actually have to do that on the full side. Okay so now we have filter setup. The next thing you need to do is go to your actual content type that you want to use it on.

So head on over to content types and I just have a basic Drupal installed here so I’m going to go to my basic page manage display. And you see here I have a smart paging option available. I click on this Cog, again here is where I can overwrite some default settings if I want. If I wanted the character it would be less or word might be less. I’m not going to change any of this right now. Oh right here is Show Smart paging settings during content any of this content type or use this below for every content of this.

So I’m going to say I want every piece of the content that’s a page to use this same one. I’m not going to change every individual node. You can if you want and we select in this…that box there but I’m not going to for this example. So just to let you know you can do it on individual nodes as well. So okay, so there we go. So now we have our set there, let’s save that and then all we need to do is create a piece of content so let’s add some content…oops I’m going to jump back, I’m sorry I forgot to mention something here. Right now I have the page break method sit at automatic page break on word limit. So every 512 words I’m going to get a new page so right now it’s way…I’m going to show you two options as well, we’ll start with that one so again we’re going to save that, I’m going to add some content to our basic page so we’re going to do word count break and then you can see there’s some boring [inaudible - 0:08:57.2] here. I will quite a bit…and again its’ going to break 512 words so it gets kind of crazy, let’s show…so we have 1,024…let’s do 512 and get me two paragraphs.

So I should basically see two pages here because after that temporary I should get a page break to the second page. So we’ll test that, so paste that in, just basic text here so right here it should be the end of the first page and then the start of the second page should be here so let’s see if this works. Again we’ll switch ours to full here, save that and there we go. So I was actually off one word so it should be a combination of one of the two so basically I’m kind at be off by one possibly but close. So there’s my second page.

You’ll notice up here here’s my example of what that page came in to play so I could have change that to whatever I wanted to. I could have said banana or whatever but it doesn’t…so that’s the word count break, say I didn’t want to do that anymore because obviously it seems like the count might be off one so say I want to do it by character instead . So if I go back to my content type here and edit this, I can say do it by character limit instead. Character limit is set to 3,072, we’ll just leave that for now. Let’s grab some more content though. It’s going to give five paragraphs for that, just do this. Okay so come back to our basic page on content. So let’s paste that in, so now we have a lot more content right…we’re going to have a lot theory and more pages, save that. Let’s go look at that page. So now you can see I have six pages here.

So I go in next and then again here it allows me to jump to a page if I wanted after using Java Script which we have enabled. So that’s the character limit rate. So now let’s say we said, no we to find here the control, we want to actually be able to control all the content ourselves, again we can change that really quickly, content types, basic page, manages display, edit here. All we need to do is set this to manual placement of placeholder. This is the placeholder we have to use, that comment and again remember we enabled.

Smart paging on the full filter and then also in the filtered HTML type format we allowed for comments to exist, go edit that content again. And now we just input this comment in in whatever we want to get in the pages so I’ve been here three times so when I…say this for page, they should have four different pages. So every page break is a new page so this would be one page, two page, three page and then I don’t have another one so that should be the fourth page, we’ll save that, we’ll get it one more time and there we go. So now we have four pages. So every page break, I was to get this menu page.

So that’s pretty much it guys, I mean it’s really simple module. Of course some examples like I mentioned would be top 10 modules, every module could be its own page. You can use that for if you’re writing a guide and you wanted to just break on every section or every chapter of a guide. Every chapter can be its own page.
A lot of cool used cases for this module, really simple to install and configure as well. So if you have any question about it, make sure you leave them in the comments below, otherwise again head on over to Code Karate, we love the support, anything else…you can get a Cheat Sheets there for free on Drush and Git. Yeah I think that’s it guys so until next week, stay cool, see you.

Comments

Great post! Just some corrections:
1. At track 3:30, the "Use javascript pager as progressive enhancement for Drupal native pager" option at admin/config/content/smart_paging, converts the native drupal paging links into dropdown widget for clean look and easy access to other pages.
2. At track 3:46, the "Pagination with rel="next" and rel="prev" will just add meta link tag at drupal page's <header> example:
<head profile="http://www.w3.org/1999/xhtml/vocab">
<link rel="next" href="http://www.example.com/node/1/page/0/3">
<link rel="prev" href="http://www.example.com/node/1/page/0/1">
</head>
See details of this feature at http://googlewebmastercentral.blogspot.co.uk/2011/09/pagination-with-rel...

Thanks!

Appreciate the corrections. Always good to have someone covering your tracks.

Post new comment