Угруповання полів матеріалів за допомогою модуля FieldGroup у Drupal 7, Vaden Pro
Field Group- модуль, що входить до складу CCK, за допомогою якого, як відомо з назви, можна поєднувати поля в певні групи. Групи можна створювати не лише на сторінках створення або редагування матеріалу, а й на сторінках його відображення.
Встановлення та налаштування модуля
Для того, щоб скачати модуль ви можете скористатися посиланням, а як його правильно встановити можна дізнатися з відповідної статті у нас на блозі. Далі, якщо не встановлені, варто встановити необхідні для його роботи модулі, а саме: Field, Field SQL storage, Chaos tools.
Після встановлення всіх модулів активуємо field group у розділі /admin/modules.
Додавання полів
Для початку створимо всі потрібні нам поля. Переходимо "Структура" розділ "Тип матеріалів", вибираємо необхідний нам тип матеріалу, як жертву для свого випадку я виберу тип під назвою "Article" і переходимо за посиланням "Управління полями".
Додамо поля: «Колір», «Розмір», «Довжина шнура», «Розміри порту», а також Мета поля для ключових слів і для опису сторінки. Наш модуль на даному етапі не впливає на нашу роботу, тому налаштовуємо поля як завжди.
Угруповання полів на сторінці створення/редагування матеріалу
Тепер коли наші поля готові, створимо для них групи.
Поля "Колір" і "Розмір" помістимо в одну групу і назвемо її "Візуальні характеристики".
Але для початку нам необхідно створити цю групу. Її створення не дуже відрізняється від створення поля, а форма знаходиться відразу під формою додавання існуючого поля.
Заповнюємо поля і вибираємо віджет, що підходить нам, про відмінність їх поговоримо трохи пізніше, інатискаємо кнопку зберегти.
Після чого у нас з'явиться нове поле, у якого, для виділення, назва написана жирним шрифтом.
Також на цій сторінці ми можемо внести зміни в налаштування нашої групи, у графі тип поля, щоб можна швидко змінити віджет відображення, а натиснувши на шестірню поруч із кнопкою видалити, у нас з'являться додаткові налаштування.
Додаткові налаштування
Field group label- поля в якому ми можемо змінити/задати мітку нашої групи
Fieldgroup settings– у списку, що випливає, можна вибрати один з варіантів відображення групи за замовчуванням, при чому кількість і типи відображення змінюються в залежності від вибраного віджету. Про їхні відмінності ми поговоримо разом із віджетами.
Опис– текстова область, де ми можемо написати свій опис групи.
Extra CSS classes– поля в якому ми можемо додати свої класи для зручнішого накладання стилів.
Тепер настав час помістити в нашу групу поля, для початку поставимо групу в необхідне місце, для цього просто перетягнемо його, схопившись курсором миші за значок зліва від мітки.
Потім тим самим способом помістимо поля всередину групи.
І натискаємо зберегти.
Потім за аналогією створюємо групу інших полів. У своєму випадку для полів «Довжина шнура» та «Розміри порту» я створюю групу «Технічні характеристики», а для мета полів групу «Мета».
Загалом у нас вийшло 3 групи полів. Для наочності поставимо спочатку для всіх трьох один віджет Fieldset, а в додаткових налаштуваннях Fieldgroup settings виберемо різні варіанти відображення. Для групи "Візуальні характеристики" виберемо тип "open", для "Технічні характеристики" "collapsible", а для "Мета""collapsed".
Тепер переходимо до розділу додавання типу матеріалу.
Всередині форми створення типу матеріалу ми бачимо групи, які також по-різному відображаються залежно від вибраного нами типу в налаштуваннях Fieldgroup settings.
Угруповання полів на сторінці відображення матеріалу
Тепер розглянемо можливість створення груп для полів не на сторінках створення/редагування, а безпосередньо на сторінці матеріалу. Для цього нам варто перейти в розділ "Структура" "Тип матеріал" наш матеріал, "Управління відображенням".
Створення груп на відображення ні чим не відрізняється від їх додавання в полях, тому створимо ідентичні групи для наших полів. Пропустимо групу для мета опису, оскільки вона не виводиться у відображенні.
Не забуваємо зберегти наші налаштування та створимо відразу тип матеріалу, щоб побачити, що у нас вийшло.
На віджетах, які надає даний модуль для виведення, варто зупинитися докладніше.
Перший віджетFildset– приклад його використання ми розглянули вище під час створення груп. Коротко він об'єднує поля в блоки, які, залежно від налаштування, можуть завжди бути відкриті «open», відкриті, але з можливістю закриття «collapsible», і закриті з можливістю відкриття «collapsed»
HTML-елементи– створює обгортку для групи полів та для кожного поля. У налаштуваннях ми можемо тип обгортки для групи та для лейбла , якою може виступати div, section, aside та інші, атрибут для поля та виставити відображення мітки.
На практиці виглядає так
Він залежить від оформлення його CSS.
Div– створює обгортку для полів із div. У налаштуваннях ми може вибрати тип відображення з"open", "collapsible", "collapsed" відмінності між якими нам відомі за віджетом Fildset, відображення мітки, швидкість спрацьовування ефекту і сам ефект, також крім класів можна додати свої id.
HTML5- обертає групу в структурні секції, з якими можна детальніше познайомитися прочитавши нашу статтю присвячену формуванню структури сторінки на HTML5. У налаштуваннях ми можемо вибрати зі списку, у що хочемо обернути нашу групу.
А при виведенні на сторінку різницю ми побачимо лише глянувши на код елемента.
Vertical tab– створюємо вертикальне меню з переходом між полями. Для того, щоб все коректно відображалося і працювало необхідно створити спільну групу з віджетом Vertical tab group і в нього помістити наші групи з Vertical tab.
Якщо все зробили, як написано вище, то у вас вийти щось схоже на:
Horizontal tab item– працює та налаштовується так само як і «Vertical tab», а відрізняється лише розташуванням кнопок переходу.
Accordion item– також вимагає створення спільної групи з віджетом accordion group. Однак у цьому випадку ми можемо в налаштуваннях групи вибрати ефект «виїжджання» форми.
При виборі та налаштуванні цього віджету в нас вийде:
Звернемо увагу, що всередині загальної групи повинні знаходитися тільки віджети групи, що відносяться до неї. Наприклад, якщо група має віджет accordion group то групи, які ми помістимо всередині, повинні бути тільки Accordion item, інакше наше угруповання буде працювати не коректно, а Drupal почне «лаятися»: