Находясь в папке libraries, клонируем библиотеки:

git clone https://github.com/dinbror/blazy.git ;
git clone https://github.com/kenwheeler/slick.git

Заходим на страницу настроек модуля Slick и делаем дубликат шаблона.

/admin/config/media/slick

Меняем название и машинное имя и сразу же сохраняем. Для простого слайдера стандартных настроек достаточно.

Создаем новое представление и меняем формат с Неформатированный список в Slick Carousel.

Нажимаем галку Vanilla Slick, меняем Optionset main на созданный ранее Slider и сохраняем.

В настройках представления указываем что выводить, сколько и как:

Я вывожу статьи, две штуки в режиме отображения анонс.

Сохраняем представление.

Результат в теме Bartik

Вот и все. Если вам нужна карусель из нескольких столбцов или даже рядов, то вы можете самостоятельно в настройках Optionset поменять их количество.

Теперь необходимо:

- В настройках формата указать расширение файла — советую использовать CSV;

- Добавить поля — одно поле соответствует одному столбцу. Где метка поля — заголовок столбца;

- Настроить критерии фильтрации/сортировки — тип материала, словарь таксономии и так далее;

- Указать путь — URL по которому будет скачиваться файл;

- Доступ — поменять «Право доступа» на «Роль → Администратор» чтобы только вы могли выгружать данные;

- Поменять количество элементов для отображения на «Отображать все элементы»;

- Поменять машинное имя блока представления.

Для экспорта поля с изображением используйте средство форматирования «URL к изображению». После, скачайте изображения вручную через FTP.

Мой пример: Экспорт статей блога.

Вот и все. Остается только перейти по указанному вами пути и скачать файл.

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

mysite.com/export_articles

Масштабирование и обрезка (300x300)

Установка Image Widget Crop

Ставим модуль через композер:

composer require drupal/image_widget_crop

Включаем через drush:

drush en image_widget_crop -y

Настройка Crop

Заходим на страницу списка типов обрезки:

/admin/config/media/crop

И добавляем новый тип:

Страница добавления нового crop type

- Aspect Ratio — в каких пропорциях пользователь будет обрезать изображение.

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

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

Настройка стиля изображения

Добавляем в стиль изображения наш Crop type:

Manual crop должен быть первым. И только потом масштабирование и обрезка.

Настройка управления отображения формы

Заходим в настройки управления отображения формы сущности, которая выводит изображение. У меня это тип материала «Статья».

Для того чтобы появились эти настройки — поменяйте виджет с «Изображение» на «ImageWidget crop»

И в настройках поля выбираем Crop Type.

Не забудьте указать этот стиль изображения в управлении отображением.

Тестирование

Заходим в редактирование ноды/блока/термина таксономии:

Дальше все просто.

И указываем область обрезки изображения самостоятельно.

Результат

Если изображение плохого качества — проверьте «Жесткий лимит» в настройках Crop Type.

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

В меню: Preferences → Package Control

И выбираем Install Package

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

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

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

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

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

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

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

Отрываем файл .module и воспользуемся следующим шаблоном:

<?php
use Drupal\Core\Routing\RouteMatchInterface;
/**
* Implements hook_help().
*/
function tester_helper_help($route_name, RouteMatchInterface $route_match) {
 switch ($route_name) {
  case 'help.page.tester_helper':
   $output = '';
   $output .= '<h3>' . t('About') . '</h3>';
   $output .= '<p>' . t('The module is example:') . '</p';
   $output .= '<ul>';
   $output .= '<li>' . t('To show simple hook template') . '</li>';
   $output .= '<li>' . t('To show how the page looks like') . '</li>';
   $output .= '<li>' . t('To show it is very easy to create help page for module') . '</li>';
   $output .= '</ul>';
   return $output;
  default:
  } 
}

tester_helper меняем на машинное имя своего модуля.

В переменную $output записываем содержимое страницы help.

Вот так эта страница выглядит у меня: