This tutorial will show you how to create or change image styles in Drupal.
Open the admin section and go to Configuration->Media->Image Styles. Here you can see a list of default image styles and styles which we have created for the theme:
Click on “Add Style” to create an image style or click on “Edit” to edit the existing style. Add an effect from the available drop down and click on Add button. You can add the effect as per your requirement.
You can add effects: crop, scale, resize, rotate, desaturate, and rotate (other contributed modules provide additional effects).
Crop: Cropping will remove portions of image to have the specified dimensions.
Desaturate: Desaturation will convert the image into a grayscale image.
Resize: Resizing will make the images have exact dimensions. This may cause stretching or shrinking images disproportionately.
Rotate: Rotating an image may cause the dimensions of an image to increase to fit the diagonal.
Scale: Scaling will maintain the aspect-ratio of the original image. If only a single dimension is specified, the other dimension will be calculated.
Scale and Crop: Scale and crop will maintain the aspect-ratio of the original image, then crop the larger dimension. This is most useful for creating perfectly square thumbnails without stretching the image.
You are able to set Height and Width in the effects settings:
Once you are done with creating an Image style, you need to assign it to the image.
Image styles can be assigned in “Content Types Display” or “Views Field Display”.
To assign a style from Content Types Display Settings, do the following:
To assign a style from Views Field Display Setting:
Check the content that contains the image style in question to see your new styles in action.
Feel free to check the detailed video tutorial below: