9 мая 2018 в 14:28
Итак, сначала создадим новый стиль, например 300x200, так его и назовем, если кто не в курсе, то стили создаются здесь: ваш_сайт/admin/config/media/image-styles, где нужно жмякнуть по кнопке "добавить стиль", дать ему имя и выбрать, как его стоит обработать, я выбрал, масштабирование и обрезка.
Если еще не создан, то создаем новый материал, например, портфолио.
Теперь создадим новое представление, которое назовем "responsive grid". В пункте создать, выбираем блок, соответственно ваш материал, пусть даже статьи, а выведем "не форматированный лист - поля". Сохраняем и переходим к редактированию.
Добавим поле изображение и исключим его из вывода, а стиль выберем ранее нами созданный.
Жмем на заголовок и исключаем его из вывода, а также убираем ссылку на контент. Жмем ниже "перезаписать результат и выбираем верхний чекбокс "Переопределить вывод этого поля пользовательским текстом", куда добавим:
<p>{{title}}</p>
Опускаемся ниже и обрежим это поле до 30,
Чуть ниже, отметим чекбокс "Добавить "…" к концу обрезанного текста".
А также, отметим чекбокс "поле может содержать HTML".
Добавим новое поле, а именно ссылку на контент и исключим ее из вывода.
Добавим еще одно поле, а именно "пользовательский текст".
Теперь, пользуясь подстановочными шаблонами выведем следующие поля:
{{ title }}{{view_node}}
Теперь отредактируем представление добавив классы:
col-sm-4
Далее, идем в расширенные настройки и добавим класс:
container-fluid
Сохраняем.
Теперь откроем css файл нашей темы и допишем:
margin-top: 1em;
}
.view-responsive-grid img{
width: 100%;
border: 3px solid #eee;
padding: 3px;
border-radius: 8px;
}
.view-responsive-grid img:hover{
border-color:#ddd;
}
.view-responsive-grid p{
bottom: 60px;
left: 6px;
color: #fff;
padding: 0.5em;
background: rgba(17,17,17,.5);
display: inline;
position: relative;
}
.view-responsive-grid a {
color: #fff;
text-decoration: none;
user-select: none;
background: #1E90FF;
bottom: 60px;
left: 6px;
color: #fff;
padding: 0.5em;
display: inline;
position: relative;
outline: none;
}
.view-responsive-grid a:hover {
color: #fff;
text-decoration: none;
user-select: none;
background: #64C7E7;
bottom: 60px;
left: 6px;
color: #fff;
padding: 0.5em;
display: inline;
position: relative;
outline: none;
}
| Вложение | Размер |
|---|---|
 screenshot_-_09.05.2018_-_001427.png | 827.06 КБ |
Комментарии
Так в чём мораль?
Лучше этого готового коробочного модуля для Joomla или нет?
Да там вся фишка в том, что оформление можно менять в пару кликов, но, конечно, до известных пределов, дальше того, что написал прогер в компоненте не вылезешь, а вот на друпал можно делать всегда разные сайты. Кстати модули коробочные, какие я хочу видеть уже появляются под друпал и они круче тех что на джумла, своей возможностью кастомизации, например вот:https://www.drupal.org/project/responsive_slideshow еще бы такой для галерей)))
А это не пойдет для галереи https://www.drupal.org/project/views_bootstrap
Если вы о коробочных модулях, то это совсем не то, а так конечно годная вещь
К слову о популяризации друпала- модуль галереи товаров с несколькими скинами был бы в этом плане не лишний, чтобы начинающие смогли накликать себе, извините, лендинг.
Зашла посмотреть, что предлагает один магазин готовых решений, вижу Notice: Undefined index: #name in bone_preprocess_views_view() (line 29 of themes/custom/bone/bone.theme)