If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Drupal 7.x. Working with Images and Image Styles

This tutorial will show you how to create or change image styles in Drupal.

  1. 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:

    screen1

  2. 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.

  3. 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.

  4. You are able to set Height and Width in the effects settings:

    screen2

  5. Once you are done with creating an Image style, you need to assign it to the image.

  6. Image styles can be assigned in “Content Types Display” or “Views Field Display”.

  7. To assign a style from Content Types Display Settings, do the following:

    1. Choose Structure -> Content types (Select content type you are changing) -> Manage display, do the following:

      screen3

    2. Click the gear wheel button to choose an image style; you are also able to link the image to the node.

    3. Choose style from the drop down.

    4. Save the settings.

  8. To assign a style from Views Field Display Setting:

    1. Choose Structure -> Views (Select content type you are changing).

    2. Click on your image field and select an image style as shown below:

      screen4

    3. Save the settings.

  9. 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:

Drupal 7.x. Working with Images and Image Styles