Design and Prototyping for Drupal

Step 3: Update the Field Settings

The first thing that I want to do is make sure that the images are displaying at the correct size. For that, I’ll go back into the settings for our Image field and set the preferred image style to “grid-3_long,” which scales and crops all images to 205px by 180px (Figure 13-8). While I’m at it, I’m going to go into Style Settings for the field and uncheck the box that adds the default classes to the field’s markup. This’ll help us get rid of some overhead we don’t need.

Note

Views’ Style Settings are a relatively new, and incredibly useful, addition to Views. Although it’s not without its bugs (for example, the Views template still wraps every field in its own <div> tag), it allows you to control the markup your View creates with much more granularity than previous versions of Views. In Drupal 6, this level of control over markup can also be achieved using the Semantic Views module.

Now that we’ve done that, we also want to make sure each row of our View floats next to one another like our design comp. Since we’re using a version of the 960 Grid System in our theme (for more info on grid systems, check out Chapter 6, Working with Layout Grids), all we have to do is add a class to our Format settings for each row of the View. We’re going to give each row a class of grid-3, which makes each row 3 columns wide, and alpha, which removes the left margin and helps things float more easily in the container (Figure 13-9).

Figure 13-8. Customizing our Image ...