Image Styles - Adding

Image styles allow you automatically crop and scale images in Drupal. You can use Drupal's pre-configured image styles or you can create your own.

Image styles are located under configuration in the media subgroup.

Your media group may look different based on the modules that you have installed.

The first step in creating a new image style is to click the Add Style button.  This is listed on the image style overlay which lists all the image styles that you have.  It will also allow you to edit an old image style.

Image styles do not list in any particular order.

After clicking the add style button, you will need a name for your style.

In this example we are creating an image style with 600 px max width, so we named it something obvious.

Click the create new style button so you will allowed to configure your new style. 
An image style is a series of Effects.  Effects are processes that Drupal will run against your image.  You can have an unlimited number of effects.  

There are six effects available:

  • Crop
  • Desaturate
  • Resize
  • Rotate
  • Scale
  • Scale and crop

Select what you want to do and click add button

Select your effect and click add.

In this example, we want to set a max width, so we want to scale the image. Scaling is reducing the image, but preserving the ratio.

If you leave one scaling variable blank, your ratio will be preserved.

Click the Add effect button, and you will redirected back to the image style overlay page.  From here you can see your new image style with a semi real world example compliments of Drupal.

If you want to learn more about the image style effects, we have a page for that.