Introduction to Drupal 7 - Image Styles

3,575 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,575
On SlideShare
0
From Embeds
0
Number of Embeds
227
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Drupal 7 - Image Styles

  1. 1. Introduction to Drupal 7 Session 3.1 Image StylesDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1
  2. 2. Agenda• What’s in this Image Styles module?• Where is it used• How is it used• Popular add-on modules for Image StylesDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2
  3. 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 StylesDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3
  4. 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 limitsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4
  5. 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 480x480Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5
  6. 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 dimensionsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6
  7. 7. Adding a new preset• Administration > Configuration > Media > Image Styles > write the name and create• URL: admin/config/media/image-styles/addDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7
  8. 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 onlyDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8
  9. 9. Time for questionsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9
  10. 10. ContactsKalin Chernev – E: kalata@shtrak.eu – T: twitter.com/kalinchernev – B: http://shtrak.eu/kalataDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10

×