[[structure-image-style-create]]

=== Setting Up an Image Style

[role="summary"]
How to add an image style to reformat an image.

(((Image style,creating)))
(((Style,image)))
(((Effect,image)))
(((Image,resizing)))

==== Goal

Add an image style and use it to display images on Vendor pages.

==== Prerequisite knowledge

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

==== Site prerequisites

* Vendor and Recipe content types must exist. See <<structure-content-type>>.

* Main image fields must exist for both content types. See <<structure-fields>>.

* Content items must exist for both content types. See
<<structure-content-type>>, <<structure-fields>>, and <<content-create>>.

==== Steps

. In the _Manage_ administrative menu, navigate to _Configuration_ > _Media_ >
_Image styles_ (_admin/config/media/image-styles_).

. Click _Add image style_.

. Enter the name _Extra medium (300x200)_

. Click _Create new style_. The page _Edit style Extra medium
(300x200)_ appears.

. In the _Effect_ table, select _Scale and crop_. Click _Add_.

. Fill in the fields as shown below.
+
[width="100%",frame="topbot",options="header"]
|================================
|Field name | Value
|Width | 300
|Height | 200
|================================

. Click _Add effect_. The image style is saved with the chosen effects.
+
--
// Image style editing page, with effects added.
image:images/structure-image-style-create-add-style.png["Add an image style",width="100%"]
--

. In the _Manage_ administrative menu, navigate to _Structure_ > _Content types_
(_admin/structure/types_).

. Click _Manage display_ in the _Operations_ dropdown for the Vendor content
type. The _Manage display_ page (_admin/structure/types/manage/vendor/display_)
appears.

. Ensure that the secondary tab _Default_ is selected.

. Click the gear wheel for the _Main image_ field, to open the configuration
options.

. Fill in the fields as shown below.
+
[width="100%",frame="topbot",options="header"]
|================================
|Field name | Explanation | Example value
|Image style | Which image style to use | Extra medium (300x200)
|Link image to | Page to visit if image is clicked | Nothing
|================================
+
--
// Main image settings area of Vendor content type.
image:images/structure-image-style-create-manage-display.png["Change field formatter settings of image field"]
--

. Click _Update_.

. Click _Save_. The new image style will be used while displaying Vendor
content.

. Open a Vendor content item and verify that it now shows up with the
scaled-down image. See <<content-edit>> for information on how to locate an
existing content item.

. Repeat steps 8-15 for the Recipe content type.

// ==== Expand your understanding

==== Related concepts

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

==== Videos

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

==== Additional resources

https://www.drupal.org/docs/8/core/modules/image/working-with-images[_Drupal.org_ community documentation page "Working with images in Drupal 7 and 8"]


*Attributions*

Adapted and edited by https://www.drupal.org/u/batigolix[Boris Doesborg], and
https://www.drupal.org/u/jojyja[Jojy Alphonso] at
http://redcrackle.com[Red Crackle] from
https://www.drupal.org/docs/8/core/modules/image/working-with-images["Working with images in
Drupal 7 and 8"],
copyright 2000-2017 by the individual contributors to the
https://www.drupal.org/documentation[Drupal Community Documentation].
