Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Spotlight: Image Styles

Video loading...

Transcript language code: 

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:02
    [Using Drupal - Media Management] [Spotlight: Image Styles] [with Addison Berry]
  • 0:12
    [Addison Berry] When working with images on your site, you want to make sure that your images are the right size.
  • 0:16
    If you upload a really large image, you can potentially break the layout of your site
  • 0:22
    or just simply overwhelm the content with a too-large picture.
  • 0:26
    So we want to make sure that everything's sized correctly.
  • 0:30
    Now the classic old school way of doing this would be to get some kind of photo editing software,
  • 0:34
    resize the images, and then upload them at the correct size.
  • 0:39
    But luckily Drupal core has a tool called Image Styles
  • 0:42
    that's going to help us manage this automatically.
  • 0:46
    So in this lesson, we're going to take a look at image styles.

Spotlight: Image Styles


When you’re uploading photos to a website, it’s important to ensure that they are displayed at the right size. Otherwise, when you upload an exceptionally large image, chances are good that it will break your site’s layout. To prevent this, you’ll want to scale these images so that they’re a consistent size, and create thumbnails for use in listing pages. Image styles are a feature that’s part of Drupal core’s Image module, and it provides these options and many more for displaying images. In this lesson we'll get an overview of the core image styles feature so that we understand how it works, which styles and effects we have to work with, and some tips for troubleshooting when your images don't display properly.