9 мая 2018 в 11:57
Здравствуйте! Подскажите пожалуйста есть ли модули какие или как реализовать карточки для каталога?
Сейчас обновляю сайт, и делал их вручную css верстка, но хочеться автоматически чтобы было, а если делать блоки отдельные их будет через чур много. лучше бы через модуль в материалах чтоб создавал адаптивные
версия drupal 8*
пример прикрепляю
| Вложение | Размер |
|---|---|
 snimok_ekrana_2018-05-09_v_11.56.10.png | 638.65 КБ |
Комментарии
Можно с помощью views
Итак, сначала создадим новый стиль, например 400x300, так его и назовем, если кто не в курсе, то стили создаются здесь: ваш_сайт/admin/config/media/image-styles, где нужно жмякнуть по кнопке "добавить стиль", дать ему имя и выбрать, как его стоит обработать, я выбрал, масштабирование и обрезка.
Представление
Теперь создадим новое представление, которое назовем "галерея". В пункте создать, выбираем блок, соответственно ваш материал, пусть даже статьи, а выведем "не форматированный лист - поля". Сохраняем и переходим к редактированию.
Изображение
Добавим поле изображение и исключим его из вывода, а стиль выберем ранее нами созданный.
Заголовок
Жмем на заголовок и исключаем его из вывода, а также убираем ссылку на контент. Жмем ниже "перезаписать результат и выбираем верхний чекбокс "Переопределить вывод этого поля пользовательским текстом", куда добавим:
<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;
}
Необходимые поля добавляйте по желанию
Это из моего блога и написано для создания галереи, но разницы нет никакой
Что-то ты нигде не упомянул, что нужно ещё бутстрап подключать
Да, кстати, забыл, но автор пишет, что у него адаптивный сайт, а они как правило на бутстрап
Добавлю, если у вас все хорошо с css, то вы можете на друпале разукрасить все не только view'сы, как view-ваш-материл, но и поля так же field_user_image и будет классом на который нужно навешать стили
" а они как правило на бутстрап" шо????
да я так считаю
а еще я считаю, что большинство друпал(8) сайтов используют именно этот фреймворк
В рунете или в мире?
Я ж могу и проверить
конечно в мире, я вообще считаю, что слово рунет, как то противоречит самой идеи интернета
и было бы здорово отвечать вот на это