Our script provides a wrapper to the Isotope library, exposing the most common functions and allowing all configuration to occur in HTML via markup and data-attributes.
Features
Simple masonry layout
Multiple masonry layouts per page
Filtering by click
Many filter groups per collection
Filtering by URL hash
Sorting criteria
Many sorter groups per collection
Reverse sorting
Initializing
The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.
Include the library in your page
Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted afterjquery.js and beforetheme.js.
<!-- Isotope (masonry layouts and filtering) --><scripttype="text/javascript"src="assets/js/isotope.pkgd.min.js"></script>
Alternatively you may wish to load this resource from a CDN to potentially improve page load times.
<!-- Isotope (masonry layouts and filtering) --><scripttype="text/javascript"src="https://unpkg.com/isotope-layout@~3.0.6"></script>
Load the initializer code in index.js
Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
import mrIsotope from'./isotope';
Ensure the following line appears in the export object:
export{
mrIsotope,};
Basic Usage
A basic Isotope layout requires a <div> with data attribute data-isotope-collection.
Each direct child of the <div> should have the data-isotope-item attribute to be included as part of the collection.
The Isotope plugin will handle laying out each item with best fit. Isotope items can have any width.
Any other classes may be added to the Isotope items to style them how you wish.
Isotope collections can be filtered to show and hide grouped items matching a selected criteria. Filter groups contain the clickable elements used to filter the collection. An Isotope collection may have many filter groups linked to
it.
To create a filter group, create an element with attribute data-isotope-filters. This can be placed anywhere on the page, and does not need to be placed adjacent to the Isotope layout.
When using filters, the data-isotope-collection and data-isotope-filters elements must have a matching data-isotope-id attribute. This is what links the two elements, allowing multiple Isotope collections
per page, and multiple filter groups per collection.
Any element inside the data-isotope-filters element with attribute data-filter is considered a clickable filter.
Each data-isotope-item element requires a data-category attribute to specify which filter it belongs to. It will be shown when the corresponding filter is clicked, and hidden when a non-matching filter is clicked.
An item may belong to two categories, as the filter uses a wildcard selector to match filters and categories.
Use data-filter="*" to show all items.
This basic example shows the required heirarchy:
<!-- First group of filters --><divdata-isotope-filtersdata-isotope-id="matching_id_1"><ahref="#"data-filter="*">All</a><ahref="#"data-filter="Blue">All</a><ahref="#"data-filter="Pink">All</a><ahref="#"data-filter="Navy">All</a></div><!-- Isotope collection --><divdata-isotope-collectiondata-isotope-id="matching_id_1"><divdata-isotope-itemdata-category="Blue"><divdata-isotope-itemdata-category="Pink"><divdata-isotope-itemdata-category="Navy"><divdata-isotope-itemdata-category="Navy, Pink"><divdata-isotope-itemdata-category="Pink, Blue"></div><!-- Optional second group of filters linked to the same Isotope collection --><divdata-isotope-filtersdata-isotope-id="matching_id_1"><ahref="#"data-filter="*">All</a><ahref="#"data-filter="Blue">All</a><ahref="#"data-filter="Pink">All</a><ahref="#"data-filter="Navy">All</a><ahref="#"data-filter="Navy">All</a></div>
This is a full HTML example with a single filter group.
Add data-default-filter to the data-isotope-collection<div> with the value matching a category string.
Filtering By URL
Collections may be filtered by the hash in the page URL. For example, if you have an isotope collection on your page and a filter with data-filter="pink", you can automatically filter to pink on page
load using #pink in your URL like so:
This will allow you to link to particular parts of your collection from anywhere in your site.
https://yourdomain.com/collections.html#pink
To disable this feature, add attribute data-ignore-hash="true" to the data-isotope-collection<div>.
Sorting
Isotope collections can be sorted according to set criteria. Sorting is controlled by clickable elements in a sorter group. An Isotope collection may have many sorter groups linked to it.
To create a sorter group, create an element with attribute data-isotope-sorters. This can be placed anywhere on the page, and does not need to be placed adjacent to the Isotope layout.
When using sorters, the data-isotope-collection and data-isotope-sorters elements must have a matching data-isotope-id attribute. This is what links the two elements, allowing multiple Isotope collections
per page, and multiple sorter groups per collection.
Any element inside the data-isotope-sorters element with attribute data-sort and data-sort-selector is considered a clickable sorter.
Class active is applied to sorters when clicked, while being removed from all other sorters in the collection.
This sorts the Isotope items into the original order laid out in HTML.
data-sort="random" data-sort-selector="random"
Randomizes the order of the items with each click.
Custom Sort Methods
Isotope items can be sorted according to text or data held within the markup of each item. Custom sort methods are defined by the clickable elements in the data-isotope-sorters<div>.
Each sort method requires the following two attributes:
A unique id for the sort method, defined by the data-sort attribute. Eg. "sortByName", or "sortByRanking".
A source for the data defined by the data-sort-selector attribute. This selector points to an element or attribute which each Isotope item has in common.
Sorting data can be taken from the following sources
Source
data-sort-selector
Text of child element of Isotope items
A selector which identifies the item. Eg. "span" or ".likes-count"
Text of child element of Isotope items parsed as integer
A selector which identifies the item with the addition of parseInt directive. Eg. "span parseInt" or ".likes-count parseInt"
Text of child element of Isotope items parsed as float
A selector which identifies the item with the addition of parseFloat directive. Eg. "span parseFloat" or ".longitude parseFloat"
Plain attribute on an Isotope item
"[src]", "[href]", "[alt]" etc.
Data attribute on Isotope item
"[data-category]", "[data-likes]", "[data-index]", "[data-ranking]" etc.
Note: If you are familiar with the Isotope plugin, the data-sort value is used internally as each key in Isotope's getSortDataconfiguration option. See documentation for more detail.
Examples
In the following examples, the items will be sorted in ascending order, which is the default. See Sort Ascending / Descending below.
data-sort-selector=".name" // Sort by text of child element with class 'name'.
data-sort-selector=".symbol" // Sort by text of child element with class 'symbol'.
data-sort-selector="[data-category]" // Sort by alphabetic text of the `data-category` attribute.
data-sort-selector=".number parseInt" // Sort by text of child element with class 'number', parsed as an integer.
data-sort-selector=".weight parseFloat" // Sort by text of element with class 'weight', parsed as a float.
By default, custom sort methods will sort in ascending order (from lower to higher, a-z). To reverse the sort direction, add the attribute data-sort-ascending="false" to your custom sort method.
TIP: To create sort options, simply create two sorting methods like so:
<uldata-isotope-sortersdata-isotope-id="projects-1"><lidata-sort="starRatingHighLow"data-sort-selector="[data-star-rating] parseFloat"data-sort-ascending="false"><span>Star Rating (High to Low)</span></li><lidata-sort="starRatingLowHigh"data-sort-selector="[data-star-rating] parseFloat"><span>Star Rating (Low to High)</span></li></ul>
Advanced Sorting
You may wish to sort by two criteria at the same time, such as "Date then Likes" or "Ranking then Price".
For a sorter to use two criteria, it must have the following three attributes:
data-sort - ID for this sorting method.
data-primary-sort - first priority.
data-secondary-sort - second priority.
The value of these attributes must be sorter IDs defined in data-sort on other sorters in the collection.
Example
<uldata-isotope-sortersdata-isotope-id="projects-1"><lidata-sort="starRatingHighLow"data-sort-selector="[data-star-rating] parseFloat"data-sort-ascending="false"><span>Sort By Star Rating (High to Low)</span></li><lidata-sort="priceLowHigh"data-sort-selector="span.price parseFloat"><span>Sort By Price (Low to High)</span></li><lidata-sort="ratingThenPrice"data-primary-sort="starRatingHighLow"data-secondary-sort="priceLowHigh"><span>Sort By Star Rating then Price</span></li></ul>
Full Example
This example shows how to use various filters, various sorters, advanced sorters, reverse "show all"