Categories

(110)
(56)
(94)
(16)

The Gridstack field Drupal module by InternetDevels developers

22.11.2016
The Gridstack field Drupal module by InternetDevels developers
Author:

Last time we offered you to learn how to create a Bootstrap subtheme in Drupal 8 from our developer’s blog post, and today is the day for the double profit. There is a useful Drupal module created by the InternetDevels developers who are working at JYSK global shop chain project. And, to tell you more about it, one of the module’s creators wrote this blog post explaining the module’s aim and work. Let’s now give her the floor.

In Drupal web development, we often received tasks from customers in which they wanted to manage their website layout. Up until recently, we had been telling them we could just break the grid and let them pick the content for it. And now we have found a partial solution to this issue by discovering the GRIDSTACK.JS plug-in.

Gridstack.js is a JQuery plugin for widget placing. This is a drag-and-drop multi-column grid that lets you build adaptive mockups in which you can customize the size and position of a certain grid.

We decided to use this plug-in and create a Drupal module which would help us build a layout for the nodes and display it all in the same field.

What does the Gridstack field module do?

It lets you create a field of Gridstack type, where you can add multiple nodes to the same page and arrange them according to your preferences.

It is very easy to do. First, install the Gridstack field module by downloading the module from drupal.org.

The Gridstack field Drupal module

Together with the module, install the Libraries API module, download the Backbone and Underscore libraries, and, of course, the Gridstack plugin.

The Gridstack field Drupal module

Place it all in the libraries folder and safely enable the module in the administrative interface.

The Gridstack field Drupal module

Then everything is a snap: in the content type, create a field of Gridstack type.
The Gridstack field Drupal module

And customize it by selecting the types of content we want to display in the grid. Customize the grid cell, where:

  • height: maximum rows amount. Default is 0, which means no maximum rows;
  • width: amount of columns (default: 12);
  • cell height: one cell height (default: 60). It can be: an integer (px), a string (for example: '10em', '100px', '10rem'), 0 or NULL, in which case the library will not generate styles for rows. Everything must be defined in CSS files. "Auto" — height will be calculated from cell width;
  • min width: minimum width. If the window width is smaller, the grid will be displayed in one column (default: 768);
  • RTL: if true, turn grid to RTL. Possible values are true, false, 'auto' (default: 'auto');
  • vertical margin: vertical gap size;
  • animate: enable animation (default: false);
  • always show resize handle: if true, the resize handler is displayed even if the user does not mouse over the widget (default: false);
  • auto: if false, gridstack will not initialize existing items (default: true);
  • disable drag: disallows widget dragging (default: false);
  • disable resize: disallows widget resizing (default: false);
  • float: enables floating widgets (default: false).

That's it. You can now easily use the field. Add nodes to the grid and place them as you wish.

The Gridstack field Drupal module

What we have created is not a perfect website building tool, but we tried to get as close to it as possible. The Gridstack field Drupal module aims to make website development a little easier and give you the opportunity to have the design to your liking.

Build with love!

7 votes, Rating: 4.6

Read also

1

Here goes another Drupal 8 post by one of our Drupal developers! Having enjoyed in-depth overviews of...

2

Today’s the day for our Drupal developer’s blog post again, which means a lot of...

3

E-commerce in Drupal 8 is a topic of interest for many developers. If you are among them, you’ve come to the right place — our...

4

A detailed blog post by our Drupal developer about using Drupal Composer...

5

Let’s delve into Drupal module development! Here is a practical guide by...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime