Multiple Images

We'll start with a fairly involved requirement. Our client, Mr. Bob's Gadgets and Gizmos, wants to create a gallery of items for sale. The gallery will have a thumbnail that shows up on product listing pages. He also wants a larger thumbnail to display in a Featured Gadget block. Finally, each product will have the option to display several images on its page.

We review our options and first note that we don't want to use Image nodes for our product pages; each product requires specific information with more complex requirements than just a simple node. Besides, Mr. Bob is already using the Image node type and its Image Gallery module for posting pictures of his pet Pekingese.

We might just use Image Attach (also part of the Image package) for this situation: At the time of this writing, we can't attach multiple images. However, there is some code in the module to create a framework for this, which is in the to-do list. So by the time you read this, that module might just be the perfect fit.

However, even after seeing if Mr. Bob would like to sponsor that feature for the module, he clarifies that he wants the image that shows up in the Featured Gadget block to be a different image than what shows up on the teasers. So our needs are more complex than what that solution would allow anyway.

ImageField: Flexible, Powerful, Useful

So we'll look at CCK and then learn about its related ImageField. CCK will allow us to define new fields to store information and ImageField will attach images to nodes as specific fields.

This seems to be the perfect combination, although we'll also need to make use of the ImageCache and Views modules to polish it off. Additionally, ImageField requires the FileField to be installed and enabled (from http ://drupal. org/ proj ect/filef ield). We'll be making a heavy use of FileField in later chapters, by the way. Finally, we also need to install the Token module from http://drupal,org/project/token.

If you haven't already, enable both the CCK and ImageField modules by browsing to Administer | Site building | Modules (at/admin/build/modules). You'll also need to enable the FileField, Token, and FileField Tokens modules.

We're now going to create a new content type for our products. We'll need to store the following information for each product: Product Name, Description, Teaser Thumbnail, Featured Gadget Image, and Gadget Images.

Browse to Administer | Content management | Content types | Add content type

(at /admin/content/types/add) and enter the name of our new type, Gadget, next to both Name and Type. On this screen, Name refers to what editors will see when entering content of this type and Type is how it will be known internally to Drupal. Thus, though they may often be the same, Type may not contain spaces or other special characters, resulting in type names such as news_article and slideshow image.

The Description will display on the Create content page (at /node/add). After entering a brief description, we'll rename Title to Product Name, and Body to Description. Before submitting this page, make sure the other settings are what we need: whether to automatically promote a node to the front page, enabling/disabling comments, and so on. Leave Attach Images disabled since we'll be setting up our custom image fields rather than using Image Attach.

After clicking Save content type, our new Gadget node type will appear on the Content types administration page. We could actually begin creating new gadgets, although we wouldn't have images yet.

So from the resulting screen at Administer | Content management | Content types (admin/content/types), we'll click on the edit link in the Gadget operations.

There are now new menu items available on the tabs for this page. We need to click on the Add field tab, which will bring us to /admin/content/node-types/gadget/ add field. If we had already defined fields on other types, those existing fields would appear in a drop-down, allowing us to redefine fields for multiple types.

For instance, we could have a Node Reference field that could refer to our gadgets that could be reused for Blog entries, News releases, and Article content types. On the other hand, we might want a particular Image Field that would be required with only one image allowed, and another that is not required but allows for multiple images. In that case, we wouldn't reuse that field.

Our first field will be the Teaser Thumbnail. Firstly, enter teaser_thumbnail for the Field name, which will set the machine-readable name as field teaser thumbnail. This is how the field is known to Drupal and we'll use that when referring to the field in code.

Now, enter Teaser Thumbnail for the human-re ad able Label. Next, select linage for the Field type and click the Continue button:

Create new field

Field name:

field_ |teaser_thumbnaii

The machine-readable name of the field. This name cannot be changed later! The name will be prefixed with 'field_' and can include lowercase unaccented letters, numbers, and underscores. The length of the name, including the prefix, is limited to no more than 32 letters.

[Teaser Thumbnail

A human-readable name to be used as the label for this field in the Article content type.

Field type:

| Image

The type of data you would liloe to store in the database with this field.

Youll then see a similar screen, with the exception of a new selection drop-down, Widget type Press Continue again

[Some ne!d types haw multiple widgets., which decide how to determine infoimatiun when creating new c Qntsnt using the field such as with a text Va^ heid or radio buttons. Images have only a Widget type of Image, winch will he a file-upload text field

Create new field

Field name:


The machine-readable name of the field This name cannot be changed.

[Teaser Thumbnail

A human-readable name to be used as the label for this field in the Article content type.

Field type:

| Image

The type of data you would likje to store in the database with this field. This option cannot be changed.

Widget type: 4

| Image tJ

The type of form element you would like to present to the user when creating this field in the Article content type.

Widget Field Settings

The next settings for our widget influence the display and storage of the1 field We determine what kind and size of images to accept, where to store the inland other related options, as we'll see.

The top section of these settings is specific to this content type We may share this field with other content types, and override them as and when needed

First we see the Help texl, which is displayed to editors when uploading images. Next are the Permitted upload Jile extensions The default of jpg png cfif is suitable in most cases. We could easily leave the Maximum and Minimum resolution for Images, as we'll resize them dynamically later In fact, we coul d set both to our desired SGxSO and be done with it in this case. However, we're thinking of t lie future when we may want our teasers to be of a laiger size. So, well set the minimum to 03x80 and leave tlit maximum value alone

Gadget settings

These settings apply only to the Teaser Thumbnail field as it appears in the Gadget content type.

Help text:

This image will be used to represent this gadget In various listings throughout the site. It will be scaled and cropped to 80k80, so choose a suitable image for this.

Instructions to present to the user below this field on the editing form.

Permitted upload file extensions.:

|jpg jpeg png gif

Extensions a user can upload to this field. Seperate extensions with a space and do not include the leading dot.

Maximum resolution for Images: -.

The maximum allowed image size expressed as WIDTHxh EIGHT (e.g. 640x480). Set to 0 for no restriction. If a larger image is uploaded, it will be resized to reflect the given width and height.

Minimum resolution for Images:


The minimum allowed image size expressed as WIDTHxHEIGHT (e.g. 640x480). Set to 0 for no restriction. If an image that is smaller than these dimensions is uploaded it will be rejected.

l> File size restrictions

» Path settings

» Title tent settings o ALT text settings

An important thing to know when working with Image Field is that it does not have different sizes available as Image nodes created with the Image module do. We'll need to use the ImageCache module to give us this kind of control, which we'll cover in the next section.

Opening the File size restrictions section, we see a Maximum upload size per file and per node. This can be invaluable when allowing user submitted images to counteract possible bloat on your file system. However, since these images will only be uploaded by our trusted editors, we'll leave the settings alone for now:

S7 File size restrictions

Limits for the size of files that a user can upload. Note that these settings only apply to newly uploaded files, whereas existing files are not affected

Maximum upload size per file:

Specify the size limit that applies to each file separately. Enter a value like "512" (bytes), "8QK" (kilobytes) or "5QM" (megabytes) in order to restrict the allowed file size. If you leave this this empty the file sizes will be limited only by PHP's maximum post and file upload sizes.

Maximum upload size per node:

Specify the total size limit for all files in field ort a given node. Enter a value like "512" (bytes), "80K" (kilobytes) or "50M" (megabytes) in order to restrict the total size of a node. Leave this empty if there should be no size restriction.

The File path will create a subdirectory of the i --Holder. This can be useful for organizing photos, when examining them with the FTP to give a recognizable path for the photo URL and to reduce filename collisions. Note that when photos of the same filename are uploaded, the conflicting filename will be appended with a unique number, so this is usually not a problem. Additionally, we can use tokens here1, which will dynamically be replaced with a specific value as a file is uploaded. For instance, pffiSfL) would be replaced with the author's unique identifying number.

For this example we will set the File path to images/tea ser_thumbnail/ [user!.;; which will create folders on the fly for newly uploaded images such as images/ teaser_tbumbnail/aaron or .images/teaser thumbnail/bob. This will make it easier to manage our file assets later by automatically sorting images in the file system for the editors who will be uploading them:

— a Path settings File path:


Optional subdirectory within the "fites" directory where files will be stored. Do not include trailing slash.

Token Replacement value



User's name


User's unfiltered name. WARNING - ram user Input.


User's ID


User's email address

[req-d ate]

User's registration date


□ ays since the user registered


User's last login date


□ ays since the user's last login


The current date in the user's timezone


The URL of the user's profile page.


The URL the user's account editing cage.

Global tokens


The name of the currently logged in user.


The user ID of the currently logged in user


The email address of the currently logged in user


The url of the current Drupal website.


The name of the current Drupal website.


The slogan of the current Drupal website


The contact email address for the current Drupal website


The current date on the site's server.

Again, we can use tokens for our Default Title and ALT text fields, which appear on our image tool tips, and for web text readers. We'll leave this aione as we can change that on an individual basis when needed:

v Title text settings r triable custom title text

Enable user input title text for images.

Default Title text:

This value will be used as the image title by default

Token Replacement value

Global tolce

Make Money Writing

Make Money Writing

This Report Will Show You How To Make Money By Providing Writing Services To Other Internet Marketers. Learn how to make money by writing the right way. Grab your copy of this report now and learn. Why writing is a great way to earn money. How to compete with cheap writers, even if you charge a lot more money.

Get My Free Ebook

Post a comment