Как вывести данные в шахматном порядке в Drupal?

Question

[maiskiykot]

Клиент просит данные выводить в таком виде:
картинка - текст
текст - картинка
картинка - текст
текст - картинка.

На голом пыхе сделал бы за пять минут. Как такое реализовать в Drupal базовыми модулями? Кто-нибудь решал подобное?

Answer 1

[archelon]

Можно просто стилизовать с помощью css flexbox, используя свойство order.
Через views вывести контент (картинка-текст). По умолчанию добавляются классы чет-нечет (even, odd)
Что-то вроде:

.views-row {
display:flex;
}
.views-row.even .image-field {
order:-1;
}
.views-row.odd .image-field {
order:1;
}

Comments

[maiskiykot]

А дальше как быть с order? Там и так есть построчное затенение. А вот как перевернуть колонки - непонятно.

[archelon]

у нас есть html типа

<div class="views-content">
  <div class="views-row odd">
    <div class="text-field">текст</div>
    <div class="image-field">картинка</div>
  </div>
  <div class="views-row even">
    <div class="text-field">текст</div>
    <div class="image-field">картинка</div>
  </div>
</div>

Если для views-row задать свойство display:flex;, элементы выстроятся друг за другом, подобно ячейкам таблицы. В отличие от табличной верстки, flexbox гораздо гибче и позволяет дополнительные манипуляции (см., например, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ).
Свойство order (целое число отрицательное или положительное) позволяет изменить порядок отображения элементов внутри флекса.
Поэтому, если для блока с картинкой внутри нечетного views-row задать меньшее значение, чем для текстового блока, он отобразится раньше (слева или выше, в зависимости от других свойств).
А дальше: стилизуем, как требуется (ширина, фон и прочее).

[maiskiykot]

А как же быть с версткой самого drupal? Я же через вьюху этот список материалов вывожу. Вьюха формируется либо неформатированным списком, либо таблицей, либо сеткой. Или в этом случае ставить html? Так-то я решил тупо подстановкой float-left/right.

[archelon]

Вывод сеткой во views — это табличная верстка, осталось для совместимости от старых времен. Лучше не использовать. Неформатированный список + можно настроить элементы и классы полей и оберток.

решил тупо подстановкой float-left/right.

так тоже можно.

[maiskiykot]

Понял. Надо будет испытать этот flex как будет время. Спасибо!