Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website

This tutorial by Emma Lewis explains ways for combining Masonry Layout and in-page category filtering, as well as infinite Scroll for making an easily accessible homepage.

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/net238tutinfinte/01.jpg

The websites which are based on content usually link articles from their homepage. However presence of all the articles on one page can prove to be detrimental for the performance. Here pagination can be introduced for reducing load time, while Ajax can help in avoiding the need for frequent page reloads.

Infinite Scroll jQuery plug-in by Paul Irish helps in further development of this solution by eliminating pagination from user journey, while keeps on adding content, thus increasing the number of pages as it is scrolled by user.

When it comes to displaying content, Masonry Layout is a common and highly popular option. Not only it makes the entire set up visually appealing, but using blocks of various sizes for individual content pieces also helps in highlighting prominent articles.

Filter challenge

What can you do if you want that the content can be filtered by category, without reloading the pages? This challenge was faced while developing a website for a famous energy drink brand.

In page filtering is offered by Isotope, which involves hiding the page elements. However, it is not possible to use it along with Infinite Scroll. The reason is that pagination considers hidden items in accounts, and due to this the experience of the users can get affected.

It is stated on Isotope website that using Infinite Scroll is recommended for sorting or filtering. Although new content can be added but some of it can get hidden. At such times user does not have any control on which content will be displayed and which will be hidden, while more content is added by Infinite Scroll.

This tutorial will guide you for creating a homepage for displaying content which is filterable in Masonry layout, while Infinite Scroll is used for loading older content as the page is scrolled down further.

Basic Set-up

Although WordPress is used here, but jQuery developed by us can be used for the application of minor changes to a CMS. You can start by downloading WordPress, logging into CMS, as well as adding Advanced Custom Fields plug-in. this can be used for adding custom size_on_homepage field to the posts, so that the size of every article can be selected in Masonry layout.

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/net238tutinfinte/02.jpg

Around 150 dummy posts have been exported, which means 30 for all the five categories, besides a primary menu of categories that can be used for the purpose of filtering. These have been saved in tutorial.wordpress.xml. Now import menu and tutorial posts by selecting Tools, Import, WordPress in CMS. You might be required to install WordPress Importer plug-in first. While navigating to Primary menu, which can be found in Appearance, enter the URL of homepage into the All Categories URL field.

To ensure clean URLs are used, choose Post name in permalinks option which can be found in settings. Now a tutorial base theme folder should be added to you file tree to /wp-content/themes/ while activating it in CMS which can be accessed through Appearance. This tutorial will guide you in editing theme files, which are available in text editor.

A simple and basic theme is used for getting the tutorial working as smoothly as possible. The two plug-ins, Infinite Scroll and Isotope, have been stored in /js/libs.

When the homepage is loaded, you can view a header bar having a home button, as well as category filters. Besides there will be a page container where you can see first 10 articles, each floated to the left. The number of articles appearing on every page can also be changed in CMS by going in Settings and then Reading.

Mark Up

As the set-up is completed, now it is time to bring some modification to the homepage markup. Begin with header.php. Standard boilerplate markup is used in navigation bar, while wp_nav_menu has helped in rendering Primary Menu links. Now add class filters to content div through the method mentioned here:

<DIV>

Now edit the index.php. you will be required to add a div for applying Masonry. With the triggering of Infinite Scroll, new articles can be appended to this div. Pagination should also be added, but it can be later hidden through Infinite Scroll. Now you can change the beginning and ending of the loop through the method mentioned here:

<?php if (have_posts()) : ?>

<div class=”masonry”>

<?php while (have_posts()):the_post(); ?>

<?php endwhile; ?>

</div>

<div class=”pagination”><?php next_posts_link(); ?></div>

<?php endif; ?>

Masonry

Now start with JavaScript. You can begin by adding elements which have been created as variables in the tutorial.js’s init function:

Tutorial.masonry = $(‘.masonry’);

Tutorial.filters = $(‘.filters’);

Tutorial.pagination = $(‘.pagination’);

Now you can initiate Masonry and it can be done by writing initMasonary function which calls Isotope on Tutorial.masonry. thus the article’s selector is specified as .article.

Default layout

Masonry layout is used by default by Isotope. However, you are required to specify the property of columnWidth. This will help in setting the grid where the articles are to be positioned. Remember that the position of every article in the container is the multiple of its value.

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/net238tutinfinte/03.jpg

The width of our articles is 190px, 390px and 590px, with a margin of 10px. Therefore the columnWidth is set as 200px. Now the initMasonry should be added to JavaScript file and it will be called from init.

initMasonry: function() {

Tutorial.masonry.isotope({ itemSelector : ‘.article’, masonry: { columnWidth: 200 } });

}

While you reload the homepage, see how the gaps which were present while floating have been filled by Isotope.

Infinite Scroll

Here the Infinite scroll should be initiated with initScroll function, which was called after initMasonry within init. This will allow you to view the entire content without requiring you to reload the page. This function will be called on masonry div, that can expand for containing extra content.

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/net238tutinfinte/04.jpg

initScroll:function(){

Tutorial.masonry.infinitescroll({

navSelector : ‘.pagination’, // selector for the pagination container

nextSelector : ‘.pagination a’, // selector for the NEXT link (to page 2)

itemSelector : ‘div.article’, // selector for all items you’ll retrieve

loading: {

speed:’fast’,

finishedMsg: ‘<span class=”bearwithus”>Sorry…</span><span class=”loading”>No more articles</

span>’,

msgText:'<span class=”bearwithus”>Bear with us…</span><span class=”loading”>Loading new

content</span>’,

img: ‘/wp-content/themes/tutorial-theme/img/ajax-loader.gif’

}

},

// append the new items to isotope on the infinitescroll callback function.

function( newElements ) {

Tutorial.masonry.isotope( ‘appended’, $( newElements ), Tutorial. finishedAppending);

});

}

The properties of selector should be straightforward. A loading message has been added here, that displays when you bring in new articles, besides displaying a finished message when all the articles get loaded.

For adding new articles to the range of elements present in Masonry layout the append function of Isotope is used by callback function. In turn it has callback function, which is entered into after the articles have been appended. In the end it is crucial to ensure that the pages have enough elements for the users to scroll. In simple words, height of masonry div should be taller than window’s height. Add function:

checkContentFillsPage: function(){

if($(‘.masonry’).height() < $(window).height()){

Tutorial.masonry.infinitescroll(‘scroll’);

}

}

This function should be called while loading the page in init, besides the new items are appended to masonry div. This is the place to use append callback function.

finishedAppending: function(){

Tutorial.checkContentFillsPage();

}

Reload the homepage, and see if new content has been added by Infinite Scroll. You can also click on header link to check the way page reloads for showing filtered content.

Filtering

Now the next step is focused on making the header links act as in page filters. First of all a line of code should be added to init function for binding click events on filter for a filter function:

Tutorial.filters.find(‘a’).bind(‘click’, Tutorial.filter);

The default action needs to be intercepted when you click a filter. This should be ensured that the process of new content loading is not going on or appending articles are not being added to masonry div. for doing this you require Boolean variable Tutorial.isScrolling, which should be defined as false in init function.

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/net238tutinfinte/05.jpg

If you set this variable to true when it will disable any further filtering, till all the articles that have been filtered are appended. So set it on false in finishedAppending function. You will also need to add a property called errorCallback to the option of Infinite Scroll in initScroll. The isScrolling setting should be false, as it will allow you to refilter in case there is some error in Infinite Scroll.

Now filter

You can filter, in case the filter is not active already. The active class needs to be transferred to correct filter. Now the page URL can be updated through history.pushState function without requiring you to reload the page. This allows the user to easily navigate through the bookmark and filtered content. It also enables you as site owner to guide users towards specific categories that you wish. A line should also be added to init for checking if the user has reached on a filtered page, while accordingly adding the active class. This task can be simplified by using the menu classes in WordPress.

$(‘.filters li.current-menu-item’).addClass(‘active’);

Filtering can be done through Ajax while using $.get. You can do it by removing all the articles present in Isotope array, resetting Infinite Scroll and repopulating Isotope articles array with the filtered articles.

filter:function(e){

e.preventDefault();

var $this = $(this);

if(Tutorial.isScrolling || $this.hasClass(‘btn’)){

return;

}

else if ( !$this.parent(‘li’).hasClass(‘active’) ) {

Tutorial.filters.find(‘.active’).removeClass(‘active’);

$this.parent(‘li’).addClass(‘active’);

if($this.hasClass(‘brand’)){

$(‘ul.nav li.all’).addClass(‘active’);

}

var $url = $this.attr(‘href’);

if(history.pushState ){

history.pushState(”, document.title,$url);

}

$.get($url, function(data){

$data = $(“<div>” + data + “</div>”);

$data = $data.find(“.masonry”);

var $new = $data.find(‘div.article’);

Tutorial.masonry.isotope( ‘remove’, $(‘.article’ ));

Tutorial.resetScroll($url);

Tutorial.masonry.isotope(‘insert’,$new);

window.scrollTo(0,0);

Tutorial.finishedAppending();

});

}

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/net238tutinfinte/06.jpg

The scroll function is required to be updated with Infinite Scroll page URL to correct page category and resetting internal states of Infinite Scroll. As the user will scroll to the page’s end, the loading message will be replaced with finished message by Infinite Scroll plug-in. therefore resetting the loading message is also important. The Masonry container will be then bound to the Infinite Scroll.

resetScroll:function(newPath){

Tutorial.masonry.infinitescroll(‘update’, {

path : [(newPath) + ‘page/’,”], // new path for the paged navigation

state: {

isDuringAjax: false,

isInvalidPage: false,

isDestroyed: false,

isDone: false, // For when it goes all the way through the archive.

isPaused: false,

currPage: 1

},

loading: {

msg: $(‘<div id=”infscr-loading”><img alt=”Loading…” src=”/ wp-content/themes/

*YOUR_THEME_NAME*/img/ajax-loader. gif” /><div><span>Bear with us…</

span><span class=”loading”>Loading new content</span></div></div>’)

}

});

Tutorial.masonry.infinitescroll(‘bind’);

}

Now you can access the entire content of the page, which is displayed in a clear interface.


Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website
There are no comments.

Leave a Reply