1. Install Sooperthemes GridStack module
The only dependency for the Sooperthemes GridStack module is the Views module. Make sure you have both Views and Glazed Gridstack in your website, and enable the Sooperthemes 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
Sooperthemes 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 "Sooperthemes GridStack".
3. Configure your view
- Add an Image field to your view. Set the formatter option to Sooperthemes GridStack Image Formatter. In the Style settings tab make sure that Use field template is off.
- Set both Views Format options to Sooperthemes GridStack. In the rows plugin, you can now select your fields for usage in the GridStack Display:
- Check that the GridStack Layout shows up in the preview area and Save your view
- 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)