Минулого разу ми пропонували вам дізнатися у блозі нашого розробника, як створити Bootstrap сабтему для Drupal 8. А сьогодні — день подвійної користі! По-перше, є Drupal-модуль, створений розробниками InternetDevels, які працюють над проектом всесвітньої мережі магазинів JYSK. По-друге, одна з авторів модуля написала блог, в якому розповіла про його ціль та принцип роботи. Надаємо їй слово.
В розробці дуже часто нам надходило завдання, коли замовник хотів керувати всім. Ще донедавна ми пояснювали, що не можна керувати розміткою на сайті, і єдине, що ми можемо зробити — це розбити сітку і дати йому можливість підбирати під неї контент. Та зараз ми знайшли часткове вирішення цієї проблеми, відкривши для себе плагін GRIDSTACK.JS.
Gridstack.js — це плагін JQuery для розміщення віджетів. Це drag-and-drop multi-column сітка, яка дозволяє будувати адаптивні макети, в яких ми можемо налаштовувати розміри і позиціонування відносно заданої сітки (гріда).
Ми вирішили використати цей плагін і написали модуль, за допомогою якого ми можемо створювати свою розмітку для нод і виводити це все в одному полі.
Що ж робить Gridstack field модуль?
Він дозволяє створити поле типу Gridstack, в якому можна до однієї сторінки (ноди) додати декілька нод і організувати їх виведення так, як ви самі цього побажаєте.
Робиться все доволі легко. Для початку встановлюємо модуль Gridstack field. Все як завжди — завантажуємо з drupal.org сам модуль.
Разом з модулем встановлюємо модуль Libraries API і завантажуємо бібліотеки Backbone, Underscore ну і, звичайно, не обійдемося без Gridstack plugin.
Все це розміщуємо в папку libraries і можемо спокійно вмикати модуль в адмінці сайту.
Далі все простіше простого: в типі контенту створюємо поле типу Gridstack field.
І налаштовуємо його, обравши типи контенту, які ми хочемо виводити в гріді. Налаштовуємо комірку гріда, де:
- height: максимальне число рядків. За замовчуванням 0, яка означає, що нема максимуму;
- width: кількість стовпців (за замовчуванням: 12);
- cell height: висота одного стовпця (за замовчуванням: 60). Може бути: ціле число (px), рядок (наприклад: '10em', '100px', '10rem'), 0 або NULL, в цьому випадку бібліотека не буде створювати стилі для рядків. Все повинно бути визначено в CSS файлах. "Auto" — висота буде розраховуватися від ширини комірки;
- min width: мінімальна ширина. Якщо ширина вікна менша, сітка буде відображатися в одній колонці (за замовчуванням: 768);
- RTL: якщо true, переключити сітку на RTL. Можливі значення: true, false, 'auto' (за замовчуванням: 'auto');
- vertical margin: відступи по вертикалі;
- animate: ввімкнути анімацію (за замовчуванням: false);
- always show resize handle: якщо true, хендлер ресайзу відображається, навіть якщо користувач не наведе на віджет (за замовчуванням: false);
- auto: якщо false, gridstack не буде ініціалізувати елементи (за замовчуванням: true);
- disable drag: забороняє перетягування віджетів (за замовчуванням: false); disable resize: забороняє ресайз віджетів (за замовчуванням: false);
- float: включає плаваючі віджети (за замовчуванням: false).
Ось і все, далі можете легко користуватись полем. Додавати в грід ноди і розташовувати так, як потрібно саме вам.
Так, ми не створили ідеальний конструктор сайту, та ми намагались наблизитись до цього. Gridstack field модуль прагне зробити розробку сайту трішечки легшою та не забирає в вас можливості стилізувати все під вас самих.
Будуйте з любов’ю!