1. Install DXPR GridStack module

The only dependency for the DXPR GridStack module is the Views module. Make sure you have  both Views and DXPR Gridstack in your website, and enable the DXPR GridStack Module. If you are installing a module for the first time, checkout the Drupal.org docs page on module installation.

In this tutorial we are not using the GridStack Examples module so you can leave this disabled.

2. Create a new View

DXPR GridStack provides a formatter plugin to the Views module, this means you can use it for any content that is supported in Views. The only requirement is that your content must provide an image field. For this tutorial I used the aGov 3.0 Drupal distribution, but the steps will be pretty much the same for any Drupal 7 website.

Create a view with a Block display and set the Display Format to "DXPR GridStack".

3. Configure your view

  1. Add an Image field to your view. Set the formatter option to DXPR GridStack Image Formatter. In the Style settings tab make sure that Use field template is off.
  2. Set both Views Format options to DXPR GridStack. In the rows plugin, you can now select your fields for usage in the GridStack Display:
  3. Check that the GridStack Layout shows up in the preview area and Save your view
  4. Optional: Check out the GridStack Format settings and customize your GridStack view. I chose the "5 Items" layout preset. If you want you can create a unique layout by dragging the boxes in the settings form.

At the bottom of this page I added a GIF video that shows these Views settings.

4. Place your Block

If you created a block view you can now place it in your layout. The plugin should work in any theme, this is what the result looks like in the aGov Drupal site I used:


Here is a GIF video that shows how to set the views settings in this tutorial:

(Click to enlarge)