Drupal и Web-программирование: истории из жизни, советы, новости и юмор — Все посты, страница 2

DELETED

3 года назад

Ручная обрезка картинок в Drupal 8⁠⁠

Зачем?

- Вам необходимо загрузить фотографию на сайт;

- Эта фотография должна быть квадратной, либо иметь другие четко заданные соотношения сторон;

- Стиль изображения обрезает фотографии в неподходящих местах.

Ручная обрезка картинок в Drupal 8 Разработка, Программирование, IT, Программист, Images, Drupal, Обучение, Crop, Обрезка, Урок, Backend, Web, Web-программирование, Учеба, Образование, Софт, Free Software, Длиннопост

Масштабирование и обрезка (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.

Показать полностью 5

[моё] Разработка Программирование IT Программист Images Drupal Обучение Crop Обрезка Урок Backend Web Web-программирование Учеба Образование Софт Free Software Длиннопост

1

DELETED

3 года назад

Удобство заполнения материалов в Drupal 8⁠⁠

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

Показать полностью 2

[моё] Разработка Программирование IT Программист Drupal Поле Group Tabs Backend Web-программирование Web Веб-разработка Разработчики Обучение Урок Гайд Удобство Ui Develop Длиннопост

4

DELETED

3 года назад

Настройка мобильного меню в Drupal 8 / Responsive and off-canvas menu⁠⁠

Рассмотрим один из самых простых способов создать мобильное меню в Drupal 8. Для этого используем модуль Responsive and off-canvas menu.

Устанавливаем через Composer:

composer require drupal/responsive_menu ; drush en responsive_menu -y

Скачиваем библиотеку mmenu.

cd ~/site_root/libraries/ ; git clone https://github.com/FrDH/jQuery.mmenu.git && mv jQuery.mmenu mmenu

Правильней было бы ставить библиотеку через композер, но мы сэкономим время и просто клонируем библиотеку в папку libraries.

Переходим на страницу настроек модуля «Responsive Menu»:

/admin/config/user-interface/responsive-menu

В разделе OFF CANVAS указываем машинное имя меню.

Настройка мобильного меню в Drupal 8 / Responsive and off-canvas menu Разработка, Программирование, IT, Программист, Обучение, Урок, Drupal, Backend, Меню, Мобильное, Hamburger, Web, Web-программирование, Frontend, Jquery, Модуль

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

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

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

/admin/structure/block

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

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

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

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

Показать полностью 2

[моё] Разработка Программирование IT Программист Обучение Урок Drupal Backend Меню Мобильное Hamburger Web Web-программирование Frontend Jquery Модуль

3

DELETED

3 года назад

Создание водяного знака / Drupal 8⁠⁠

Устанавливаем модуль Image Effects:

composer require drupal/image_effects ; drush en image_effects -y

Закачиваем водяной знак. Я положу его в папку:

sites/default/files/custom/watermark/test-watermark.png

Так выглядит мой водяной знак

Создание водяного знака / Drupal 8 Разработка, Программирование, IT, Программист, Вотермарки, Обучение, Урок, Drupal, Backend, Web, Web-программирование, Учеба, Длиннопост

Создаем или редактируем стиль изображения. Добавляем новый эффект «Водяной знак».

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

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

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

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

Сохраняем.

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

Результат:

До:

После:

Показать полностью 5

[моё] Разработка Программирование IT Программист Вотермарки Обучение Урок Drupal Backend Web Web-программирование Учеба Длиннопост

0

1

DELETED

3 года назад

Переопределение шаблона twig в Drupal 8⁠⁠

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

В большинстве случаев набор полей будет таким:

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

Показать полностью 1

[моё] Программирование Разработка IT Программист Drupal Backend Template Web Web-программирование Софт HTML Html 5 Develop

1

3

DELETED

3 года назад

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

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

Переходим в «Конфигурация» → «Стили изображения»:

/admin/config/media/image-styles

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

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

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

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

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

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

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

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

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

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

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

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

drush image-flush --all ; drush cr

Показать полностью 4

[моё] Разработка Программирование IT Программист Обучение Images Imagemagick Обрезка Drupal Backend Web Web-программирование Стиль Урок Масштабирование Учеба Длиннопост

1

DELETED

3 года назад

Настройка sitemap.xml / Drupal 8⁠⁠

Устанавливаем и включаем модуль Simple Sitemap:

composer require drupal/simple_sitemap ; drush en simple_sitemap -y

Заходим на страницы редактирования типов материалов / словарей таксономий, страницы которых должны попадать в sitemap.xml

Я захожу на страницу редактирования типа материала «Статья»:

/admin/structure/types/manage/article

В вкладке «Simple XML Sitemap» меняю радиобаттон на «Index entities of this type»

Настройка sitemap.xml / Drupal 8 Программирование, Разработка, IT, Drupal, Backend, Xml, Программист, SEO, Cms, Web, Web-программирование, Обучение, Урок, Гайд

Заходим в настройки модуля «Simple Sitemap» в раздел «Пользовательские ссылки» и добавляем туда URL страниц, которые не были созданы через тип материала или таксономию. Это могут быть страницы представлений или Snippet Manager.