Design and Prototyping for Drupal

Step 3: Create an Image Style

Image styles are the way Drupal 7 handles resizing and displaying images. You can have as many image styles as you like, and the system will automatically handle cropping, resizing and maintaining the files for you. For our events, we had an event image size of 620px wide by 280px tall. To create an image style, select Configuration→Image Styles from the Admin screen. Click the Add style link to add a new image style. I’m going to call the new style grid-8 (as I’m using a 12-column grid, and 620px is 8 columns wide; more on grid systems in Chapter 6), and set up the style to Scale and Crop to 620px by 280px. See Figure 12-12 for an example.

Figure 12-11. Well now, that’s an awfully big image

Figure 12-12. Configuration settings for our Events banner. Calling it something generic, like the column width, allows us to use it universally wherever we need an image that size. Thus, if we create a new content type and want to style it the same way, we’ll be covered.

From there, we go back into the Manage Display screen for our Event content type, and click on the gear button to the right of the Image field. Select our new image style from the Image Style drop-down menu and hit Update (see Figure 12-13).

Figure 12-13. Selecting our new image style

Now, if we refresh ...