Skip to content Skip to navigation

Getting Started on Sites: Image Styles

Welcome back! This is the seventh blog post in a series on how to create a Drupal 7 personal website using Stanford Sites. Last time we learned how to insert a Google map into your webpage. In this post, we'll walk through creating Image Styles.

By default, your Drupal site gives you the option to change the look of an uploaded image to thumbnail, medium, or large. These size presets are called image styles. You can create your own image styles to have custom-sized options for your images that you can use anywhere on your site. In this blog post I will use the Article content type as an example.  You may also use image styles on other content types and views that already exist or one that you've created for your site.

Creating an image style

  1. Log in to your Drupal site as an administrator.
  2. Navigate to Configuration > Media > Image styles.
  3. Click the + Add style link.
  4. Give the image a Style name then click the Create new style button.

    Style name

  5. On this screen you can compare the original image to the new image size you just created.  At first they are identical. You will need to add an effect.

    Effect

  6. I'm going to choose to Scale my image and set my width to 100 pixels. This will resize the image based on the width I have specified (100px). If you leave the height blank, it will be calculated automatically to preserve the aspect ratio of the image. Click the Allow Upscaling checkbox if you want smaller images to expand to meet the 100 pixel width setting.  I usually do not use upscaling because images tend to get blurry, pixelated, and just don't look as good. When done, click the Add effect button.

    Add effect

  7. The preview now reflects the new image effect.

    Preview

Also, you may want to explore the scale and crop effect – we use this regularly in many of our image styles, as it allows you to have a custom width and height (like a square for example) and a scaled image. This is helpful for creating thumbnails of particular dimensions to have a uniform effect in a list or grid view.

Next we'll look at how to update, delete, and use our image styles.

Updating an image style

  1. Navigate to Configuration > Media > Image styles.
  2. Under the Operations column, click edit for the image style you want to update.
  3. There are several options you can do: change the Image style name; edit or delete the existing effect; or Select a new effect.
  4. After making changes, click the Update style button.

Deleting an image style

  1. Navigate to Configuration > Media > Image styles.
  2. Under the Operations column, click delete for the image style you want to remove.

Using an image style in Content types

  1. Navigate to Structure > Content types > Article > Manage display.
  2. Click on the gear next to the image field where you want to change the image style.

    Gear button

  3. Under the Format settings, click the image style arrow and select a new image style (e.g., small-flexheight).
  4. Click the Save button.

Using an Image style in Views

  1. Add your image field to the view.
  2. Configure the field settings by clicking on the image style arrow and selecting the image style (e.g., small-flexheight).
  3. Click the Save button.