Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Собирайте комбинации из блоков! Бесконечный режим, более 100 уровней, ежедневные задания и турниры.

Расслабьтесь и отдохните: игра без ограничений по времени.

Проверьте свою смекалку: головоломка для любителей

Блоки Судоку - расслабляющая головоломка

Головоломки, Гиперказуальные, Мобильная

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Flush

4 поста сначала свежее
DELETED
3 года назад

Настройка адаптивных стилей изображений в Drupal 8⁠⁠

В своей предыдущей статье я уже писал, что все картинки должны иметь стиль изображения, но иногда этого может оказаться недостаточно.


Представим, что есть баннер, который занимает всю ширину экрана. Я задаю картинке стиль изображения, где она будет отмасштабирована по ширине до 1920 пикселей. И если для компьютеров и ноутбуков — это подходящий размер, то для мобильных устройств это слишком много.


В HTML есть тег picture, который подставляет нужное изображение в зависимости от ширины экрана.

В Drupal он реализован через модуль ядра — responsive image.


Включаем модуль Responsive image:

drush en responsive_image -y

В папке с вашей темой должен находиться файл с брейкпоинтами.

/themes/custom/themename/themename.breakpoints.yml

Я использую ширины: 480, 768, 980, 1180.

Следовательно, содержимое файла выглядит вот так:


themename.sp:
  label: smalltouch portrait
  mediaQuery: 'all and (min-width: 1px) and (max-width: 479px)'
  weight: 4
  multipliers:
    - 1x
themename.sl:
  label: smalltouch landscape
  mediaQuery: 'all and (min-width: 480px) and (max-width: 767px)'
  weight: 3
  multipliers:
    - 1x
themename.tp:
  label: tablet portrait
  mediaQuery: 'all and (min-width: 768px) and (max-width: 979px)'
  weight: 2
  multipliers:
    - 1x
themename.tl:
  label: tablet landscape
  mediaQuery: 'all and (min-width: 980px) and (max-width: 1179px)'
  weight: 1
  multipliers:
    - 1x
themename.desktop:
  label: desktop
  mediaQuery: 'all and (min-width: 1180px)'
  weight: 0
  multipliers:
    - 2x


Теперь для каждого брейкпоинта нужно создать стиль изображения, ширина которого должна быть равна максимальной ширине брейкпоинта.


Например: Для tablet portrait ширина в стиле изображения должна быть 979px, т.к. max-width для tablet portrait = 979px.

Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

Буквой W я отмечаю, что стиль изображения отмасштабирован только по ширине / Width

Заходим на страницу «Адаптивные стили изображения» и добавляем новый:

/admin/config/media/responsive-image-style
Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

В «Группа точек останова» — выбирайте свою тему.

Для каждого брейкпоинта задаем заранее созданный стиль изображения.

Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

А в «Резервный стиль изображения» задаем для десктопа. Именно поэтому, для брейкпоинта desktop стиль изображения можно не задавать.


Desktop Retina — стиль изображения для мониторов с двойным пикселем, который часто встречается у компьютеров компании Apple.


Как только для каждой ширины все будет задано — жмем кнопку сохранить и адаптивный стиль изображения будет создан.


Переходим в управление отображением сущности, которая выводит изображение:

Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

Для того чтобы эта настройка появилась — нажмите на иконку шестеренки

В настройках выбираем созданный нами адаптивный стиль изображения → Сохраняем.

Если изображения не обновились — воспользуйтесь командой:

drush image-flush --all ; drush cr
Показать полностью 4
[моё] Разработка Программирование IT Программист Обучение Drupal Backend Flush Урок Web Web-программирование Cms Учеба Образование Длиннопост
1
HansNesiFakel
HansNesiFakel
4 года назад

Флеш⁠⁠

Флеш переносит людей со скоростью как минимум 100км/ч и резко останавливается.

Как это переносят обычне люди?

[моё] Flush Математическая физика Текст
32
9
JeGo
JeGo
6 лет назад

Туалетные игрушки⁠⁠

Я не говорю, что детям впаривают всякое говно... А нет, я это и говорю

Туалетные игрушки Flush, Force, Унитаз, Газы, Игрушки, Видео, Длиннопост
Туалетные игрушки Flush, Force, Унитаз, Газы, Игрушки, Видео, Длиннопост

Это новые бакуганы? Или что это такое? Тут же буквально говно и пердящий унитаз.

О_о Думаю это не стоит своих денег.

Туалетные игрушки Flush, Force, Унитаз, Газы, Игрушки, Видео, Длиннопост

Может я чего-то не понимаю?


P. s. Нашёл в московском Ашане.

Показать полностью 3 1
[моё] Flush Force Унитаз Газы Игрушки Видео Длиннопост
7
3
omich28
10 лет назад

То сладкое чувство победы⁠⁠

Покер Flush Победа Эмоции Coub
8
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии