Отображение изображений таксономии во views "кирпичиками"

Главные вкладки

Аватар пользователя Tinnka Tinnka 7 марта 2017 в 19:43

Drupal Commerce 7
Есть таксономический справочник с категориями товаров. Для каждой категории с справочнике указаны:

  1. Название
  2. Описание
  3. Изображение
  4. Признак "Отображать на главной"

На главной странице нужно отображать информацию по всем категориям с установленным признаком "Отображать на главной".
Сейчас реализовано с помощью вьюшки с отображением категорий в виде сетки, по 2 блока на строку.

Сложность в том что отображать нужно в нечетных строках по 2 блока на строку, а в четных по одному на всю ширину страницы (см. изображение). Количество отображаемых категорий и их последовательность могут меняться.

Получается что для каждой категории нужно хранить 2 изображения, одно на пол страницы шириной, и втрое на всю ширину. Но как сделать так чтобы строки чередовались и выбирался правильный размер изображения? Всю голову сломала уже как это можно реализовать.

ВложениеРазмер
Иконка изображения Первая страница692 КБ

Комментарии

Аватар пользователя Studio VIZA Studio VIZA 7 марта 2017 в 20:48
1

Регионы создайте, в таком виде как на скрине, потом клонируйте блоки во вьюхе по количеству регионов, задайте критерии фильтрации(в какой именно регион идёт блок) Это самое простое.

Можно ещё панелями, но там "с лёту" обычно не выходит, нужны навыки.

Сорри если неверно понял вопрос.

Аватар пользователя Alex787 Alex787 8 марта 2017 в 2:08

Может строки обычными дивами вывести? А к вложенным div задать половину по умолчанию и float: left, а к каждому третьему тогда применить :nth-child(3n) с шириной 100%
Что то вроде:

#ttt {
        width: 100%;
        margin: 2px;
        padding: 2px;
}
#ttt .block {
        width: 47%;
        float: left;
        padding: 5px;
        border: 1px solid black;
        text-align: center;
        margin: 10px;
}
#ttt .block:nth-child(3n) {
        width: 96%;
}

Ну и добавить "красивостей" и если необходимо - ко всяким таблетам/айпадам адаптацию..