Drupal + Обучение

Пример #1 — Подключаем шрифт PT Sans через Google Fonts

- Заходим на сайт fonts.google.com и находим шрифт PT Sans;

- Нажимаем кнопку Select this font;

- Нажимаем на Family Selected;

- Во вкладке Customized выбираем начертания и Cyrillic;

- Копируем строку с подключением шрифта во вкладках EMBED → @IMPORT.

Вставляем строку с подключением в начало CSS файла:

@IMPORT url('https://fonts.googleapis.com/css?family=PT%20Sans%3A400i%2C7...);

Копируем свойство font-family:

Пример #2 — Подключаем шрифты PT Sans и PT Serif в Drupal 8 через файл темы .libraries.yml

Аналогично примеру #1 получаем URL подключения шрифтов из строки @import:

fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...

В файле темы .libraries.yml подключаем шрифты по образцу:

fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...,

Сохраняем и сбрасываем кэш.

Пример #3 — Подключаем шрифт PT Sans локально

- Заходим на сайт Google Webfonts Helper;

- В поиске находим шрифт PT Sans;

- Выбираем начертания и Cyrillic;

- Пролистываем вниз и пишем где будут находится шрифты относительно .css файла;

- Копируем CSS код и вставляем его в .css файл;

- Скачиваем архив с шрифтами, разархивируем его и размещаем шрифты в нужном месте.

Вот так выглядит скопированный CSS:

/* pt-sans-regular - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Italic'), local('PTSans-Italic'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold'), local('PTSans-Bold'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

А так список файлов с шрифтами:

Команда ls в терминале

Если все сделано правильно, то шрифты будут подключены локально.

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

Представим, что есть баннер, который занимает всю ширину экрана. Я задаю картинке стиль изображения, где она будет отмасштабирована по ширине до 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.

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

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

/admin/config/media/responsive-image-style

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

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

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

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

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

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

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

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

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

drush image-flush --all ; drush cr

Когда в типе материала очень много полей, редактору сложно ориентироваться:

Что нужно сделать?

- Скрыть ненужные поля:

- Сгруппировать нужные поля;

- Настроить режим отображения поля параграфа: свернут/несвернут, добавляются через кнопки или селект.

Убрать лишнее

Все то, что не понадобится в процессе заполнения страницы следует убрать: Language, Автор, Помещено на главную страницу, Закреплять вверху списков.

Группировка полей

- Устанавливаем и включаем модуль Field Group;

- Переходим в «Управление отображением формы»;

- Жмем кнопку «Добавить группу».

- Выбираем и добавляем «Tabs» — это будет контейнер для всех вкладок;

- Аналогично добавляем несколько «Tab» — это уже сами вкладки.

Что куда помещать — решайте сами. Лично я либо пытаюсь примерно скопировать ту структуру, которую видят все пользователи, либо просто объединить схожие элементы.

Результат