Images and Image Galleries

When it comes to storing images, Drupal provides many different options. In this book, we will focus on the Image module — available at project/image —but before we get into the details, we will quickly examine some of the other options that exist. Our choice of the Image module has less to do with any real problems with the other options, and more with the relative simplicity of the Image module.

One very popular method of storing images uses the following four modules:

• Imagefield:

• Image API:

• Imagecache:

• Thickbox or Lightbox 2: or

In very brief terms, the Imagefield module creates a CCK field that holds images. Imagecache (using the functionality supported by the ImageAPI) scales the images to create thumbnails. Then, either Thickbox or Lightbox 2 can be used to create pop up windows to display galleries. This method of sharing images also integrates with the Views module.

Using Imagefield, Imagecache, and the Image API provides an incredible amount of flexibility. However, for many needs, this is overkill. The Image module provides a relatively straightforward solution.

Sharing Images with the Image Module

To get started, download the Image module from image. Then, upload and the module as described in Chapter 3.

Once the module is uploaded into your sites/all/modules directory, navigate to Administer | Site building | Modules, or admin build modules. Enable the Image and the Image gallery modules.

Click the Save configuration button to submit the form and save the updates.

Configuring the Image Module

Like the Audio module covered in the first half of this chapter, the Image module, when enabled, creates its own content type. As we configure the module, we will complete the following steps:

1. Adjust the default settings

2. Set image-specific settings

3. Assign a taxonomy for images; this includes setting up galleries.

4. Assign permissions to create and edit images.

5. Adjust the Student blog, the Teacher blog, and the conversations view.

Step 1: Adjusting the Default Settings

As with all content types, the default settings can be edited at Administer | Content management | Content types, or admin/content/types.

Click the edit link for the Image content type. The only settings we need to change are in the Workflow settings section; we want to set Images to be Published, and we want Attachments to be Disabled.

Click the Save content type button to save the changes.

Step 2: Adjusting the Image Module Settings

To adjust the base settings of the Image module, navigate to Administer | Site configuration | Images, or admin/settings/image. As seen in the following screenshot, we have two options: Files and sizes and Image gallery.


Images Image gallery

Image file settings

' Default image path:

Subdirectory in the directory "files" where pictures will be stored. Do not include trailing slash.

Maximum upload size:

Maximum file size for image uploads. When a maximum image dimensions is specified for original images the size is checked after

Image sizes

The Scale image operation resizes images so that they fit with in the given dimensions. If only one dimension is specified the other dimension will be computed based on the image's aspect ratio. The Sca/e and crop image operation resizes images to be exactly the given dimensions. If only one dimension is specified the image will not be cropped, making this is equivalent to Scale image.

Note: 'Original' dimensions will only be used to resize images when they are first uploaded. Existing originals will not be modified.

Label 3 Operation Width Height Link


1 Scale image


1 1

! !

1 Same window |v |

1 Thumb nail

1 Scale image


|l00 1

1100 1

1 Same window |v¡|

1 Preview

1 Scale image


|640 1

|640 1

1 Same window


1 Scale image

1 !

1 !

1 Same window |


1 Scale image


1 1

1 1

1 Same window |vj|


1 Scale image


1 !

1 !

1 Same window

[ Save configuration ] [ Res et to defaults"^

We will start by configuring the Files and sizes options.

Item 1 indicates the path inside the files directory; unless you have a custom storage structure for images, leave this setting untouched.

Item 2 indicates the maximum image size. Leaving this set to a larger value will, over time, use more storage space on your server. However, leaving this at a larger file size will also make the site easier to use, as people won't need to know how to resize images prior to upload. The "best" solution will be a balance between your storage needs and the technical expertise of your users.

Item 3 allows you to scale, or scale and crop images. You can use these defaults, and/or set additional size options.

Click the Save configuration button to save these options and move on to the Image gallery settings.

Image Gallery

The settings on the Image gallery administrative screen allow you to set some basic options for how galleries are displayed.

These settings are largely a matter of personal preference. The first option, Images per page, will need to be balanced against the width of the page to ensure that all images will display cleanly. Generally, most settings between 4 and 6 images will fit with no issues.

After you have adjusted these settings, click the Save configuration button to save the changes.

Step 3: Using the Keyword Taxonomy and Creating Galleries

As we did with our other content types, we use the Keywords taxonomy to organize posts. As initially described in Chapter 3, navigate to Administer | Content management | Taxonomy, or admin/content/taxonomy. Click the edit vocabulary link for the Keywords vocabulary, and add Image into the list of Content types.

Click the Save button to save the change.


To create and manage galleries, navigate to Administer | Content management |

Image galleries, or admin/content/image.

As shown in the preceding screenshot, creating galleries involves giving them a Name, and, optionally, a Description, a Parent, and a Weight.

By creating Parent galleries, you can nest galleries inside one another. For example, you can set up one gallery for 2009, and then individual galleries within 2009 for each month.

The Weight setting is used to order galleries, with lower numbers appearing first. Click the Submit button to create your gallery.

Step 4: Assign Permissions

To assign rights to the Image module and the Image gallery module, navigate to Administer | User management | Permissions, or admin/user/permissions.

Scroll down to the section for the Image module.

anonymous authenticated site Permission student teacher user user admin anonymous authenticated site Permission student teacher user user admin

image module

create images




edit images


edit own images




view original images



image_gallery module

For the image module:

• Assign student role the rights to create images and edit own images.

• Assign the teacher role the rights to create images and edit own images.

• Assign the authenticated user role the rights to view original images.

• Assign the site admin role full rights.

For the image_gallery module:

• Assign both the teacher and the site admin role rights to administer images.

This will give users in both roles the rights to create new galleries, and manage existing galleries. In a site with many teachers, this right should probably not be given to all teachers, but should be limited to users with the technical expertise to manage it efficiently.

Click the Save permissions button to save the changes.

Step 5: Adjusting Views

As was covered earlier in this chapter, we need to adjust the views for the Teacher blog, the Student blog, and the conversations view to ensure that images get included in these different views.

The steps used to add Audio nodes to these views—covered earlier in this chapter — can be replicated to add Image nodes.

Creating Images

Now that the image module has been enabled and configured, we need to upload a photo onto the site.

To add an image, navigate to Create content | Image, or node/add/image.


Create Image

|The first image


Image Galleries:

| Main gallery v 1


Enter keyvrards to describe your post.


|C:\Documerits and Settings\billfitzgeralcP|[ Browse..~]

Click "Browse..." to select an image to upload,

0 Show summary in full view


I ffl Source | & ^ © © ® | ^ r- | (ft | H & \ % & tf> | Q 0) S fe & & ^ | Format ¡Normal B 1 H | xz | |E 5= | iW t^ M m Break Bl_

The first image

Switch to plain text editor

O Web page addresses and e-mail addresses turn into links automatically.

O Allowed HTML tags: <a> <b> <blockquote> <br> <caption> <center> <code> <col> <colgroup> -cdd> <del> <div> <dl> <dt> <em> <font> <hl> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <li> <ol> <p> <span> <strong> <sub> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <u> <ul> <tr > O Lines and paragraphs break automatically.

More information about formatting options □ Rebuild derivative images.

Check this to rebuild the derivative images for this node.

As shown in the preceding screenshot, give the image a Title, add it into an Image Gallery, categorize it using a Keyword, and then Browse and select the image. Add some descriptive text in the Body (which will make the image easier to find via searches) and then click the Save button to upload the image.

0 0

Post a comment