Drupal Shuffle example
Drupal shuffle views style plugin settings
Drupal shuffle field formatter settings
Drupal shuffle demo

Shuffle module provide a Drupal integration with the jquery library Shuffle. This module provide :

  • A views style plugin for displaying rows in a shuffle grid
  • A field formatter for displaying images attached to an entity in a shuffle grid

Installation

  • Download and enable shuffle module
  • Download the library Shuffle and place the following file jquery.shuffle.modernizr.min.js ( available in dist folder) under libraries/shuffle folder
  • Check /admin/reports/status to ensure the Shuffle plugin was properly detected

The complete path of shuffle file attended is :
- libraries/shuffle/jquery.shuffle.modernizr.min.js

This module use libraries API (as dependency) so the attended file can be found too in the paths below
- /libraries
- /profiles/*/libraries
- /site/all/libraries
- /site/*/libraries

Requirements

Shuffle module works with the jquery shuffle library version 3.1.1. Others versions don't have been tested. Feel free to submit an issue on others versions if needed.

Dependencies

Configuration

See screenshots attached.

  • Select the Shuffle formatter in the manage display page of your entity. This formatter is available for field of type images only
  • Select the Shuffle grid views style plugin in your view and configure it as your need

You can configure a shuffle filter

  • in the views's settings form with any entity_reference field available with the entity
  • in the field formatter, by using the title attribute of img

Roadmap

- Adding sorting and searching features to the shuffle grid.
- Adding automated test

Other feature

As the magnific popup module, and other popup like modules, provide too a field formatter, it's not possible to use both at the same time on a field. It's the reason why I added support for a popup library on the field formatter. And the magnific popup permits a nice and simple integration width the shuffle library.

So, this module provides too an integration with the magnific popup library for the field formatter. It permit to display all images inside a shuffle grid and to view a larger version of theses images inside a magnific popup.

The alt attribute of images is use for caption. In order to have these options for using magnific popup, you have to download the files jquery.magnific-popup.min.js and magnific-popup.css in the folder /libraries/magnific-popup.

Files must be found in these paths :

- /libraries/magnific-popup/jquery.magnific-popup.min.js
- /libraries/magnific-popup/magnific-popup.css

This module use libraries API (as dependency) so the attended files can be found too in the paths below
- /libraries
- /profiles/*/libraries
- /site/all/libraries
- /site/*/libraries

Advanced customizations

For more advanced customization, you can override the Twig templates provided by the module, by copying them in your theme.

- field-shuffle.html.twig
- views-view-shuffle.html.twig

Enable Twig debug for seeing all the availables suggestions.

Shuffle is a Drupal 8.x module.

Supporting organizations: 

Project information

Releases