Short overview of the Image styles module in Drupal 7. Managing image styles.

1. Introduction to Drupal 7
Session 3.1
Image Styles
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1

2. Agenda
• What’s in this Image Styles module?
• Where is it used
• How is it used
• Popular add-on modules for Image Styles
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2

3. Image Styles Module
• Defining predefined sizes of images
• Unlimited number of predefined sets of sizes
• The predefined sizes options are used in many
other areas – content types, views, etc.
• Good to have for performance in overall
compared to manually added images
• Many automations are completed by Image
Styles
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3

4. User of Image Styles
• In content types when the image field is used
• In Views in a field with image type is output
• Many other places  (almost everywhere an
image field is used or taken out)
• The goal of using predefined image styles is to
make sure the output of administrator content
upload is kept within given limits
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4

5. Managing Image Styles
• Administration > Configuration > Media >
Image styles
• URL: admin/config/media/image-styles
• There are 3 image styles by default:
– Thumbnail – Scale 100 X 100 (upscaling possible)
– Medium - Scale 220x220 (upscaling possible)
– Large - Scale 480x480
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5

6. Image style options/effects
• Crop: cuts the image in a given size
• Desaturate – removes colors
• Resize – changes image size to new set sizes
• Rotate – turns the image in degrees
• Scale – resizes, but keeps proportions
• Scale and crop – resizes and cuts in a given
dimensions
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6

7. Adding a new preset
• Administration > Configuration > Media >
Image Styles > write the name and create
• URL: admin/config/media/image-styles/add
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7

8. Adding an effect to the image style
• We want to make so
that any uploaded
image has maximum
300 pixels width. If the
image is larger, it is
only resized, not
cutting
• => we need Scale effect
(no cropping)
• => we need to fill in the
width value only
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8

9. Time for questions
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9

10. Contacts
Kalin Chernev
– E: kalata@shtrak.eu
– T: twitter.com/kalinchernev
– B: http://shtrak.eu/kalata
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10