Create a One Page Drupal Site with Views Infinite Scroll Module

You most likely already navigated across some sites, blogs or galleries, that present the content in an infinite scroll mode.

Such scrolling can easily be implemented with the Views Infinite Scroll contribution module in Drupal 8. No additional libraries or plugins required.

In this tutorial, we’re going to create a gallery of article teasers of all countries in the Americas. Let’s get started!

 Step #1. Create the content

• Download, install and enable the Views Infinite Scroll module
• Click Content > Add content > Article
• Create the articles’ content. It will be a simple article with a picture of the flag and the related content to each country.
• Click Save and Publish each time you create an article

Step #2. Configure the teaser display

• Click Structure > Content types > Article > Manage Display
• Choose the Teaser option
• Click on the cogwheel next to the Image field and choose Image style: Large (480×480)
• Disable the Links field
• Click Save

Step #3. Set up the View

• Click Structure > Views > Add new view
• Give the view a name according to your type of content
• Choose to show content of type Articles
• Click the Create a page checkbox
• Choose the Display format as a Grid of teasers
• Change the Items to display number to 9
• Uncheck the Use a pager option
• Click the Save and edit button

Step #4. Tweak the Grid

Now it’s time to make some adjustments to the view.

• In the FORMAT area of the views interface click on Settings to change the display of the grid

• Choose 3 for the number of columns
• Click Apply

Step #5. Configure the Sort Criteria

Let’s sort the teasers in alphabetical order.

• In the SORT CRITERIA area click on Content authored on (desc) 

• Click the Remove button

The SORT CRITERIA area is now empty.

• Click the Add button

• Enter the word Title in the Search box
• Mark the Title checkbox in the Content category
• Click the blue Add and configure sort criteria blue button

• Leave the Order criterion as Sort ascending
• Click Apply

Step #6 The infinite scroll feature

It’s time to add the infinite scroll functionality to our view.

• In the PAGER section click on Display a specified number of items 

• Choose the Infinite Scroll
• Click Apply

You’ll see a couple of options to configure the Infinite Scroll functionality.

• To load the content automatically without clicking a button, mark the checkbox Automatically Load Content
• Click Apply

Notice: If you want to load the content automatically, you have to enable the use of AJAX in your view. Let’s do just that.

• Click the ADVANCED section in your views interface on the right, to display the advanced options
• Click the Use AJAX link
• Check the Use AJAX option
• Click Apply

• Save the view
• Click View page in order to see your gallery

When you scroll down now, you will see how the new content loads.

Congratulations! You now know how to easily create an infinite scroll for all kind of views with the Views Infinite Scroll module.

I hope you enjoyed reading this tutorial. Please, share in the comments below your own experience with creating infinite scrolls on your Drupal sites. Or maybe you have any questions on this tutorial?