Last time we gave you tips on how to create a Bootstrap subtheme in Drupal 8 from our developer’s blog post, and today we have another one for you. 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.
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 with 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.
Together with the module, install the Libraries API module, download the Backbone and Underscore libraries, and, of course, the Gridstack plugin.
Place it all in the libraries folder and safely enable the module in the administrative interface.
Then everything is a snap: in the content type, create a field of Gridstack type.
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.
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 make sure the web design is to your liking.
Build with love!