[[structure-image-style-create]]

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

[role="summary"]
Как добавить стиль изображения, чтобы переформатировать изображение.

(((Стиль изображения,создание)))
(((Стиль,изображение)))
(((Эффект,изображение)))
(((Изображение,изменение размера)))

==== Цель

Добавить стиль изображения и использовать его для отображения изображений на страницах Производителя.

==== Необходимые знания

* <<structure-fields>>
* <<structure-content-display>>
* <<structure-image-styles>>

==== Требования к сайту

* Типы контента Производитель и Рецепт должны существовать. Смотрите <<structure-content-type>>.

* Основные поля изображения должны существовать для обоих типов контента. Смотрите <<structure-fields>>.

* Элементы контента должны существовать для обоих типов контента. Смотрите
<<structure-content-type>>, <<structure-fields>>, и <<content-create>>.

==== Шаги

. В _Управление_ административного меню, прейдите в _Конфигурация_ > _Media_ >
_Стили изображения_ (_admin/config/media/image-styles_).

. Нажмите _Добавить стиль изображения_.

. Ведите название _Средний (300x200)_

. Нажмите _Создать новый стиль_. Появится страница _Редактировать стиль
Средний (300x200)_.

. В таблице _Эффект_, выберите _Масштабирование и обрезка_. Нажмите _Добавить_.

. Заполните поля, как показано ниже.
+
[width="100%",frame="topbot",options="header"]
|================================
|Имя поля | Значение
|Ширина | 300
|Высота | 200
|================================

. Нажмите _Добавить эффект_. Стиль изображения сохранится с выбранными эффектами.
+
--
// Image style editing page, with effects added.
image:images/structure-image-style-create-add-style.png["Добавить стиль изображения",width="100%"]
--

. В _Управлени_ административного меню, перейдите в _Структура_ > _Типы материалов_
(_admin/structure/types_).

. Нажмите _Управление отображением_ в раскрывающемся списке _Operations_ для типа материала
Производитель. Появится страница _Управление отображением_ (_admin/structure/types/manage/vendor/display_).

. Убедитесь, что выбрана вкладка _Default_.

. Нажмите на шестеренку для поля _Главное изображение_, чтобы открыть опции
конфигурации.

. Заполните поля, как показано ниже.
+
[width="100%",frame="topbot",options="header"]
|================================
|Имя поля | Описание | Пример значения
|Стиль изображения | Какой стиль изображения использовать | Extra medium (300x200)
|Изображение как ссылка на | На какую страницу перейдет пользователь при нажатии на изображение | Ничего
|================================
+
--
// Main image settings area of Vendor content type.
image:images/structure-image-style-create-manage-display.png["Изменить настройки форматера поля изображения"]
--

. Нажмите _Обновить_.

. Нажмите _Сохранить_. Новый стиль изображения будет использоваться при отображении содержимого
Производитель.

. Откройте материал Производитель и убедитесь, что он теперь отображается с помощью
уменьшенного изображения. Смотрите <<content-edit>> для получения информации о том, как найти
существующий материал.

. Повторите шаги 8-15 для материала Рецепт.

// ==== Expand your understanding

==== Схожие понятия

* <<structure-fields>>
* <<structure-image-styles>>
* <<structure-image-responsive>>

==== Видео

// Video from Drupalize.Me.
video::https://www.youtube-nocookie.com/embed/DKIo7j19ulY[title="Setting up an Image Style"]

==== Дополнительные ресурсы

https://www.drupal.org/docs/8/core/modules/image/working-with-images[_Drupal.org_ страница документации сообщества "Working with images in Drupal 7 and 8"]


*Авторы*

Адаптировано и добавлено https://www.drupal.org/u/batigolix[Boris Doesborg], и
https://www.drupal.org/u/jojyja[Jojy Alphonso] в
http://redcrackle.com[Red Crackle] от
https://www.drupal.org/docs/8/core/modules/image/working-with-images["Working with images in
Drupal 7 and 8"],
авторское прво 2000-2017 отдельными вкладчиками в
https://www.drupal.org/documentation[Drupal Community Documentation].

Переведено https://www.drupal.org/u/MishaIsmajlov[Михаил Исмайлов].
