Working with Image styles

Image styles let you to set standard graphic templates so images on your site have consistent size, scale, and rotation. For example, if you have a multiuser blog, an image style can ensure that user pictures always appear the same size and scale, regardless of the pictures the bloggers upload.

Using image styles

Image styles are managed by context, changing an instance of the image that is displayed according to the content type, without altering the original. In order to use an image style, you must assign the particular style you want to use for each context.

To configure an image field for styles:

1. Go to Structure > Content types.
2. Select the content type you want to edit, and click manage display.



3. Select the listing for the image field, and click its gear icon.



A drop-down list displays additional format options.

4. In the Image style section, select a style.



5. Click Update.
6. Click Save.

The content type now displays images in the style you selected. Clicking the Teaser link at the top allows you to configure the image style when the field appears in a teaser.

Creating custom image styles

In addition to the default image styles Drupal Gardens provides, you can create custom image styles.

To create a custom image style:

1. Go to Configuration > Image styles.
2. Click Add style.



3. In the Style name field, enter a title to identify the style on your site.



4. Click Create new style.
5. In the Effect section, select the effect you want to use.



6. Click Add. The effect configuration page opens.
7. Enter the configurations you want for this effect.
• Crop: Reduces the size of the image by focusing on a specific part of the picture and excluding everything that falls outside of that area.

  On the effect configuration page, you can set the crop dimensions in pixels and indicate the area of the picture that you want the crop to include.

• Desaturate: Reduces the saturation of the picture, making it grayer and less colorful. The desaturation effect does not have configuration options.

• Resize: Allows you to change the dimensions of your images. Resizing can result in stretching or compressing the picture.

  The effect configuration page includes text fields for width and height. It requires that you provide values (in pixels) for both.

• Rotate: Allows you to rotate your image in either direction.

  The effect configuration page includes two text fields. In the first field, enter the number of degrees to turn the image. Positive numbers turn it clockwise, negative counterclockwise. In the second field, enter the web-style hex color value for the revealed background.

• Scale: Allows you to fix the image size for this style. Unlike resizing, scaling only requires one value – width or height. This prevents the image from being stretched or compressed. The effect scales both values to match the present proportions.

  There is an additional field for upscaling. Use this when the image style is smaller than the scale you have indicated. When you don't allow upscaling, the smaller image uploads normally. When you allow upscaling, the image size is increased to the scale indicated, but this may result in a loss in image quality.

8. Click Add effect.
9. After adding all the effects to your image style, click Update style.

Your site adds the custom image style. You can now use it on your site.