Backend + Drupal

Если нужна «Основная навигация» — оставляйте main.

Остальные настройки можно оставить по умолчанию.

Переходим на страницу «Схема блоков»:

/admin/structure/block

Располагаем в нужном регионе гамбургер:

Название блока с гамбургером — Responsive menu mobile icon

Переходим на главную страницу и нажимаем на гамбургер.

На ширине 320px мобильное меню будет выглядеть так

Устанавливаем плагины

В меню: Preferences → Package Control

И выбираем Install Package

Устанавливаем следующие расширения:

- Emmet — позволит не писать код вручную;

- SCSS — если используете этот препроцессор;

- SFTP — для того чтобы иметь возможность подключаться к удаленным серверам.

В принципе все. Оказалось куда короче, чем я ожидал.

Если вы используете Sublime для разработки на друпал или верстки — пишите: какие еще полезные вещи можно внедрить.

Выстраиваем следующие настройки:

Рисунок водяного знака: Путь к файлу водяного знака;

Watermark resize: Я ставлю только ширину, высота высчитывается автоматически;

Положение: По центру по умолчанию.

Сохраняем.

Не забываем присвоить этот стиль изображения нужному изображению. В моем случае — это картинка анонса новости.

Результат:

До:

После:

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

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

paragraph--машинное_имя_параграфа--режим_отображения.html.twig

В моем случае, файл будет называться:

paragraph--title_and_text_and_image--block.html.twig

Теперь можно править разметку.

<div class="titleAndTextAndImage">
  <div class="titleAndTextAndImage__content">
    <div class="titleAndTextAndImage__title">
      {{ content.field_title[0] }}
    </div>
    <div class="titleAndTextAndImage__body">
      {{ content.field_body[0] }}
    </div>
  </div>
  <div class="titleAndTextAndImage__image">
    {{ content.field_image[0] }}
  </div>
</div>

Поле выводим так:

{{ content.машинное_имя_поля }}

А если нам нужно получить только сырое значение:

{{ content.машинное_имя_поля[0] }}

Важно помнить, что если в параграф будет добавлено новое поле, оно не будет отображаться до тех пор, пока вы не запишите его в twig.

Это был простейший пример. Аналогичным образом можно переопределять:

Типы материала:

node--машинное_имя_типа_материала--режим_отображения.html.twig

Таксономию:

taxonomy-term--машинное_имя_словаря_таксономии--режим_отображения.html.twig

Блоки:

block--машинное_имя_блока--режим_отображения.html.twig

Типы медиа:

media--машинное_имя_медиа--режим_отображения.html.twig

Примеры названий файлов twig можно увидеть при включенном twig debug.

Жмем кнопку «Добавить стиль изображения» → Пишем название и меняем машинное имя.

Теперь нужно добавить эффект. Для начала достаточно знать о двух:

- Масштабирование;

- Масштабирование и обрезка.

Масштабирование пропорционально уменьшит размеры вашего изображения:

Если у вас изображение 2000x1000, а масштабирование 500x500, то результатом будет картинка в 500x250.

Масштабирование и обрезка задаст изображению те размеры, которые вы укажите:

Если у вас изображение 2000x1000, а масштабирование и обрезка 500x500, то результатом будет картинка в 500x500.

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

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

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

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

drush image-flush --all ; drush cr