Image styles

Image styles

Image styles are used to display image fields in a particular format. Any entity such as content, media, and taxonomy, may have an image field.

Image styles enable you to:

• Define a set of transformations that can be applied to images automatically.

  These transformations help to ensure that images are displayed optimally across different contexts.

• Resize images to fit specific width and height requirements for consistency in presentation.
• Crop images to maintain specific aspect ratios, which is useful for maintaining visual consistency across different image displays.

• Apply various effects to meet specific design or branding needs.

  For example, desaturation for converting images to grayscale and watermarking for adding watermarks.

Creating an image style

Use the following steps to create an image style:

1. Access your site.

2. In the left sidebar, click Configuration > Media > Image styles.
3. Click Add image style.

4. In the Image style name field, enter a name for the image style.

   Ensure that the name is clear and easy to identify. For example, Hero Banner or Thumbnail.

5. Click Create new style.

6. Add effects to the style.

   For example:

   • Scale: Resize to specific dimensions while maintaining aspect ratio.
   • Crop: Remove portions of the image to achieve specific dimensions.
   • Scale and crop: Resize then crop to exact dimensions.
   • Desaturate: Convert to grayscale.
   • Rotate: Change the orientation of the image.
7. Configure the settings for each effect.
8. Click Save.

Applying an image style to an image field

Use the following steps to apply an image style to an image field through display settings.:

1. Access your site.

2. In the left sidebar, click Structure > Content types or Structure > Media types.
3. Select the type that contains the image field.
4. Click Manage display.
5. Configure the format settings for the image field.
6. Click Save.

Flushing an image style

When you update an image style, you may need to regenerate the derivatives.

Use the following steps to flush an image style:

1. Access your site.
2. In the left sidebar, click Configuration > Media > Image styles.
3. Select the image style that you want to flush.
4. Click Flush.
5. Confirm the action to delete all existing derivatives for that style, which are regenerated as needed.

Applying an image style to an image field

Use the following steps to apply an image style to an image field through display settings.:

1. Access your site.

2. In the left sidebar, click Structure > Content types or Structure > Media types.
3. Select the type that contains the image field.
4. Click Manage display.
5. Configure the format settings for the image field.
6. Click Save.

Flushing an image style

When you update an image style, you may need to regenerate the derivatives.

Use the following steps to flush an image style:

1. Access your site.
2. In the left sidebar, click Configuration > Media > Image styles.
3. Select the image style that you want to flush.
4. Click Flush.
5. Confirm the action to delete all existing derivatives for that style, which are regenerated as needed.