Drupal 7 Fields/CCK: Using the Image Field Modules

Exclusive offer: get 50% off this eBook here
Drupal 7 Fields/CCK Beginner's Guide

Drupal 7 Fields/CCK Beginner's Guide — Save 50%

Explore Drupal 7 fields/CCK and master their use

$26.99    $13.50
by Dave Poon | July 2011 | Open Source

One of the most important milestones in Drupal was the Content Construction Kit (CCK). Most of this module has been integrated into Drupal 7 core. It is now called Field API. So when you install Drupal 7, it will come with this powerful module in core, and you can start to create custom fields for your site without downloading an extra module.

In the previous article by Dave Poon, author of Drupal 7 Fields/CCK Beginner's Guide, we learned how to add file fields to content types, and how to configure file fields.

In this article, we shall learn about:

  • Adding image fields to content types
  • Configuring image field settings
  • Creating custom image styles

 

Drupal 7 Fields/CCK Beginner's Guide

Drupal 7 Fields/CCK Beginner's Guide

Explore Drupal 7 fields/CCK and master their use

        Read more about this book      

(For more resources on Drupal, see here.)

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.

    Drupal 7 Fields/CCK: Using the Image Field Modules

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

    Drupal 7 Fields/CCK: Using the Image Field Modules

  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.

Drupal 7 Fields/CCK Beginner's Guide Explore Drupal 7 fields/CCK and master their use
Published: July 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Drupal, see here.)

Creating custom image styles

One of the most powerful and useful features in Drupal 7 core is the image styles feature, which allows us to resize and adjust the images on display. We will learn how to create a custom image style in this section.

Time for action – creating a custom image style

In this section, we will create a custom image style that can be used in an image field if we need to. Follow these steps:

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

    Drupal 7 Fields/CCK: Using the Image Field Modules

  2. Locate the Media block, and click on the Image styles link in the block.

    Drupal 7 Fields/CCK: Using the Image Field Modules

  3. The following page lists all the existing image styles in Drupal.

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

  4. Click on the Add style link to add a new style.

    Drupal 7 Fields/CCK: Using the Image Field Modules

  5. Enter "recipe_med" in the Style name field, and then click on the Create new style button to store the value.

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

  6. The following page shows a preview of a sample image, and a preview of a sample image with an image style applied:

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

  7. At the bottom of the page, we select Scale and crop, and then click on the Add button.

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

  8. In the next screen, we enter "300" in the Width field, and also enter "300" in the Height field. After entering the values, we click on the Add effect button.

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

  9. The custom image effect is now created. The page shows a preview of a sample image with the effect applied, and the effects we used are also listed in the table at the bottom of the page.

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

What just happened?

We have created a custom image style using the image system in Drupal 7.

In order to create image styles, we have to go to the configuration page, and then click on the Image styles link to go to the image styles administration page.

The image styles administration page lists all the existing image styles in Drupal. We can check the details of each image style on this page. By default, Drupal generated three image styles for us to play with, which are thumbnail, medium, and large. They are the most common types of image styles used in a website, so it is really good that the Drupal core developers have already thought about what we need when creating websites.

There is a Add style link on this page, which allows us to create our own image styles if the existing image styles cannot fulfill what we need. Creating a new image style is easy. Click on the Add style link, and then enter the name of an image style. After saving the image style, Drupal will direct us to the next screen, which provides us with the option to add effects to the image style we created.

Adding effects to image styles is also a very straightforward process. At the bottom of the page there is a dropdown menu; we can add an effect by selecting an effect from this menu, and then clicking on the Add button to add the effect to the image style. We can also add multiple effects to one image style if we need to.

In our case, the Scale and crop effect was added to the recipe_med image style. After clicking on the Add button, Drupal will send us to the next screen. This screen will provide the effect settings, we have to enter values to these settings in order to make the effect work as we expect. In this case, we enter 300 for the height and the width fields, so the Scale and crop effect will be based on these values to proportionally scale and crop images to 300 width by 300 height.

After clicking on the Add effect button, Drupal will show us a preview of an original sample image on the left of the page, and a preview of a sample image with the effects we added on the right of the page. So it is really easy for us to appreciate the differences between the original image and the image with effects applied. It is also easier for us to test the effects and sizes. We can click on the Edit link to modify the values and see the change quickly. Furthermore, besides the default effects in Drupal—currently it has got six effects—we can install contributed modules to add more effects to the image system.

One more thing, if we go back to the image field administration page, and go down to the Preview image style section, and click on the Preview image style dropdown menu, we will see our custom image style appear on the menu. Once we create our own image styles, we can use them anywhere in Drupal if options are provided.

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

This is a final challenge for this article. We have created an image style using the Scale and crop effect. We can use the same method we have learned here to add an image effect using a different effect or even add multiple effects to an image style.

Summary

In this article we learnt how to add image fields to content types. We also learnt how to configure image fields. After that, we learnt how to create our custom image styles in Drupal.


Further resources on this subject:


Drupal 7 Fields/CCK Beginner's Guide Explore Drupal 7 fields/CCK and master their use
Published: July 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Dave Poon

Dave Poon is a web developer and designer based in Sydney. He started his career as a freelance graphic and web designer in 1998 and works with web development agencies and medium-size enterprises. After graduating from Central Queensland University with a degree in Multimedia Studies and a Master's degree in IT he began his love affair with Drupal, and works for a variety of companies using Drupal.

Currently, he is the director of Erlango (http://erlango.com), a web product development startup, located in Sydney and Hong Kong, which is using Drupal as a framework to create web products and customized CMS.

He was the technical reviewer for Drupal Intranets with Open Atrium, published by Packt Publishing.

Books From Packt


Drupal 7
Drupal 7

Drupal Intranets with Open Atrium
Drupal Intranets with Open Atrium

Drupal 7 First Look
Drupal 7 First Look

Drupal 7 Module Development
Drupal 7 Module Development

Drupal 7 Social Networking: RAW
Drupal 7 Social Networking: RAW

Drupal 7 Themes
Drupal 7 Themes

Drupal Web Services
Drupal Web Services

Drupal 6 Theming Cookbook
Drupal 6 Theming Cookbook


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
X
Y
9
H
s
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software