Drupal 7 Fields/CCK Beginner’s Guide

Explore Drupal 7 fields/CCK and master their use

Adding image fields to content types

We have learned how to add file fields to content types. In this section, we will learn how to add image fields to content types so that we can attach images to our content.

Time for action – adding an image field to the Recipe content type

In this section, we will add an image field to the Recipe content type. Follow these steps:

1. Click on the Structure link in the administration menu at the top of the page.

   

2. Click on the Content types link to go to the content types administration page.

   
3. Click on the manage fields link on the Recipe row as in the following screenshot, because we would like to add an image field to the recipe content type.

   (Move the mouse over the image to enlarge it.)

   

4. Locate the Add new field section. In the Label field enter “Image”, and in the Field name field enter “image”. In the field type select list, select “image” as the field type; the field widget will be automatically switched to select Image as the field widget. After the values are entered, click on Save.

   (Move the mouse over the image to enlarge it.)

   

What just happened?

We added an image field to the Recipe content type.

The process of adding an image field to the Recipe content type is similar to the process of adding a file field to the Recipe content type, except that we selected image field as the field type and we selected image as the field widget. We will configure the image field in the next section.

Configuring image field settings

We have already added the image field. In this section, we will configure the image field, learn how to configure the image field settings, and understand how they reflect to image outputs by using those settings.

Time for action – configuring an image field for the Recipe content type

In this section, we will configure image field settings in the Recipe content type. Follow these steps:

1. After clicking on the Save button, Drupal will direct us to the next page, which provides the field settings for the image field. The Upload destination option is the same as the file field settings, which provide us an option to decide whether image files should be public or private. In our case, we select Public files. The last option is the Default image field. We will leave this option for now, and click on the Save field settings button to go to the next step.

   (Move the mouse over the image to enlarge it.)

   

2. This page contains all the settings for the image field. The most common field settings are the Label field, the Required field, and the Help text field. We will leave these fields as default.

   (Move the mouse over the image to enlarge it.)

   

3. The Allowed file extension section is similar to the file field we have already learned about. We will use the default value in this field, so we don’t need to enter anything for this field. The File directory section is also the same as the settings in the file field. Enter “image_files” in this field.

   (Move the mouse over the image to enlarge it.)

   

4. Enter “640” x “480” in the Maximum image resolution field and the Minimum image resolution field, and enter “2MB” in the maximum upload size field.

   (Move the mouse over the image to enlarge it.)

   

5. Check the Enable Alt field and the Enable Title field checkboxes.

   (Move the mouse over the image to enlarge it.)

   

6. Select thumbnail in the Preview image style select list, and select Throbber in the Progress indicator section.

   (Move the mouse over the image to enlarge it.)

   

7. The bottom part of this page, the image field settings section, is the same as the previous page we just saved, so we don’t need to re-enter the values. Click on the Save settings button at the bottom of the page to store all the values we entered on this page.

   (Move the mouse over the image to enlarge it.)

   

8. After clicking on the Save settings button, Drupal sends us back to the Manage fields setting administration page. Now the image field is added to the Recipe content type.

   (Move the mouse over the image to enlarge it.)

   

What just happened?

We have added and configured an image field for the Recipe content type.

We left the default values in the Label field, the Required field, and the Help text field. They are the most common settings in fields.

The Allowed file extension section is similar to the file field that we have seen, which provides us with the ability to enter the file extension of the images which are allowed to be uploaded.

The File directory field is the same as the one in the file field, which provides us with the option to save the uploaded files to a different directory to the default location of the file directory.

• The Maximum image resolution field allows us to specify the maximum width and height of image resolution that will be uploaded. If the uploaded image is bigger than the resolution we specified, it will resize images to the size we specified. If we did not specify the size, it will not have any restriction to images.
• The Minimum image resolution field is the opposite of the maximum image resolution. We specify the minimum width and height of image resolution that is allowed to be uploaded, not the maximum width and height of image resolution. If we upload image resolution less than the minimum size we specified, it will throw an error message and reject the image upload.
• The Enable Alt field and the Enable Title field can be enabled to allow site administrators to enter the ALT and Title attributes of the img tag in XHTML, which can improve the accessibility and usability of a website when using images.

The Preview image style select list allows us to select which image style will be used to display while editing content. Currently it provides three image styles, thumbnail, medium, and large. The thumbnail image style will be used by default. We will learn how to create a custom image style in the next section.

Have a go hero – adding an image field to the Cooking Tip content type

It’s time for another challenge. We have created an image field to the Recipe content type. We can use the same method we have learned here to add and configure an image field to the Cooking Tip content type. You can apply the same steps used to create image fields to the Recipe content type and try to understand the differences between the settings on the image field settings administration page.