Create a One Page Drupal Site with Views Infinite Scroll Module

| Drupal
Create a One Page Website with Views Infinite Scroll

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

Create 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 (480x480)
  • Disable the Links field
  • Click Save

Manage display

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

Add View

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 

Settings

  • Choose 3 for the number of columns
  • Click Apply

Number of columns

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) 

Sort criteria

  • Click the Remove button

The Remove button

The SORT CRITERIA area is now empty.

  • Click the Add button

Sort criteria is empty now

  • 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

Add and configure sort criteria

  • Leave the Order criterion as Sort ascending
  • Click Apply

Sort criteria

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 

Display a specified number of items

  • Choose the Infinite Scroll
  • Click Apply 

Select Infinite scroll and 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

Mark Automatic load content and 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

Click the Advanced button

Mark Use AJAX checkbox

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

The view Country gallery has been created

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? 


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.