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. Однако в этом случае мы можем, в настройках группы, выбрать эффект «выезжанием» формы.

При выборе и настройки этого виджета у нас получится: