Drupal 7 Fields/CCK Beginner's Guide

P U B L I S H I N G

Drupal 7 Fields/CCK

Beginner's Guide

Dave Poon

Chapter No. 5

In this package, you will find:

A Biography of the author of the book

A preview chapter from the book, Chapter NO.5 "File and Image Fields" A synopsis of the book’s content

Information on where to buy this book

About the Author

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 sized enterprises. He graduated from Central Queensland University with a degree in Multimedia Studies and a Master's degree in IT. His love affair with Drupal began afterwards, and he now works for a variety of companies using Drupal.

He is the founder and Technical Director of Erlango (http://erlango.com), a web product development startup, located in Sydney and Hong Kong, which uses Drupal as a framework to create web products and customized CMS.

He is also the technical reviewer of Drupal Intranets with Open Atrium by Tracy Smith (Packt Publishing, 2011).

I would like to thank my wife Rita (she should be my wife at the time of the printing of this book) for her endless patience and support. Without her, what I do would be meaningless.

I would also like to thank my father for his continued encouragement. It is my great fortune to have worked with a great team of publishing professionals at Packt Publishing. I extend my sincerest gratitude to Usha Iyer, Neha Mallik, Vanjeet D'souza, Neha Shefty, and Michelle

Drupal 7 Fields/CCK

Beginner's Guide

Drupal is changing the way we create a feature and content-rich website. When I created my first web-based Content Management System (CMS) website in Drupal, I was amazed at the power of the Drupal CMS system. It allows me to rapidly create a high quality web application in a short period of time without sacrificing the application functionality.

Drupal is not only an open source CMS, but is also a web application development framework. The extensible and flexible architecture of Drupal can be used for any size of business including freelancers, agencies, governments, universities, and enterprises. The White House, Digg, Fast Company, Sony Music, McDonald's, and Stanford University are all using Drupal for their sites.

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.

The Field API module is not just the CCK module moved to the Drupal core. It has been completely rewritten and redesigned in Drupal 7. It has been optimized to run faster and work more efficiently. It provides you with more field type options, and it has given you more flexible options to allow you to create custom fields not only for content types, but also for comments, taxonomy, and more, that was not possible to achieve before Drupal 7. After reading this book, you will learn how the new Fields API module works, and understand the concept of fields and how to implement them.

In this book, we will use Drupal 7 fields to build a fictional website from scratch. We will explore the power of fields within Drupal 7, then you can apply these techniques to your own projects.

What This Book Covers

Chapter 1, Nodes and Content Types in Drupal 7 explains the concept of nodes and content types in Drupal. It will explain the default content types that Drupal 7 core comes with. This chapter will also teach you how to create contents and create custom content types in Drupal.

Chapter 2, Fields explains the concept of the new core module in Drupal 7 and demonstrates to how to add fields to content types, rearrange the order of fields,

Chapter 3, Multiple Value Fields focuses on using field modules to creating multiple value fields for the site. We will look in detail at the new field type and other multiple value field type options such as Boolean, List, List (Numeric), and List (Text) field types.

Chapter 4, Taxonomy focuses on using fields in taxonomy; at the beginning of the chapter we will learn what taxonomy is. We will then create custom vocabularies, and add taxonomy terms. We will also look at how to add fields to vocabularies and term references to content types.

Chapter 5, File and Image Fields focuses on using the file and image fields modules. We will look at adding file and image fields to content types, configuring file and image field settings, using and creating image styles, as well as adding those fields to content types.

Chapter 6, Managing Field Display focuses on field display management. We will look at how we control field display on the pages, format field display on teaser and full content pages, customize display settings, format comment fields display, and format vocabulary fields display.

Chapter 7, Field Modules focuses on using field related modules. We will learn where to find the contributed modules and field related modules, we will also learn about downloading modules and installing them. We will also look at some of the most popular field related modules such as the Content Templates module and Field permission modules.

Chapter 8, Field Level Permissions focuses on using the field permission module. We will discuss how to use this powerful module to control the permissions of fields. At the beginning of this chapter, we will start from scratch, by downloading the module, installing the module, and enabling it. Then we will continue with enabling permissions in fields, viewing field-level permissions report and configuring permissions in the PERMISSIONS administration page.

Chapter 9, Theming Fields focuses on themes. We will discuss what theming is. We will look at where to find the template files for fields, creating template files, editing template files, creating CSS files, and theming field display.

Chapter 10, A Database Perspective of Fields explains the difference between CCK fields and the Drupal 7 fields in the database. This chapter also shows you how to find the content types and fields we created in the example project from the database, and shows the interaction between Drupal and the database.

5

File and Image Fields

Images play an important role in any website. Imagine an e-commerce website like Amazon without product images on product pages, a Facebook-like site where users cannot upload and share images with friends. The presence of images and the ease with which they can be handled has become essenti al in most of today's websites.

Drupal 6 and earlier versions required the use of contributed modules to achieve eff ecti ve fi le and image handling. With its well-known fi le and image add-on modules for CCK, Drupal could achieve many fi le and image handling tasks. The good news is that in Drupal 7, to get basic fi le and image handling functi onality, you do not need to go anywhere further than Drupal core. You get image resizing, image styles, and eff ects just by installing Drupal. The improved usability and simplifi ed interface of the new image system will undoubtedly be one of those features that will be used by almost every site built in Drupal 7.

In this chapter, we shall learn about:

 Adding and confi guring fi le fi elds to content types  Using fi le fi elds

 Adding image fi elds to content types  Confi guring image fi eld setti ngs  Creati ng custom image styles

Adding and confi guring fi le fi elds to content types

There are many cases where we need to att ach fi les to website content. For instance, a restaurant owner might like to upload their latest menu in PDF format to their website, or a fi nancial insti tuti on would like to upload a new product catalog so customers can download and print out the catalog if they need it.

The File module is built into the Drupal 7 core, which provides us with the ability to att ach fi les to content easily, to decide the att achment display format, and also to manage fi le locati ons. Furthermore, the File module is integrated with fi elds and provides a fi le fi eld type, so we can easily att ach fi les to content using the already discussed fi eld system making the process of managing fi les much more streamlined.

Time for action – adding and confi guring a fi le fi eld

to the Recipe content type

In this secti on, we will add a fi le fi eld to the Recipe content type, which will allow fi les to be att ached to Recipe content. Follow these steps:

1.

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

2.

The following page will display a list of opti ons. Click the Content types link to go to the Content types administrati on page.

3.

Since we want to add a fi le fi eld to the Recipe content type, we will click the manage

fi elds link on the Recipe row as shown in the following screenshot:

4.

This page will display the existi ng fi elds of the Recipe content type. In the Label fi eld enter "File", and in the Field name fi eld enter "fi le". In the fi eld type select list select

File as the fi eld type, the fi eld widget will be automati cally switched to File as the

5.

A new window will pop up which provides the fi eld setti ngs for the fi le fi eld that we are creati ng. There are two checkboxes, and we will enable both these checkboxes. The last radio butt on opti on will be selected by default. Then click the Save fi eld

setti ngs butt on at the bott om of the page.

6.

We clicked the Save fi eld setti ngs butt on to store the values for the fi le fi eld setti ngs that we selected. Aft er that, it will direct us to the fi le fi eld setti ngs administrati on page, as in the following screenshot:

7.

We can leave the Label fi eld as default as it will be fi lled automati cally with the value we entered previously. We will also leave the Required fi eld as default, because we do not want to force users to att ach fi les to every recipe. In the Help text fi eld, we can enter "Att ach fi les to this recipe".

8.

In the Allowed fi le extensions secti on, we can enter the fi le extensions that are

allowed to be uploaded. In this case, we will enter "txt, pdf, zip". In the File directory secti on, we can enter the name of a subdirectory that will store the uploaded fi les, and in this case, we will enter "recipe_fi les":

9.

In the Maximum upload size secti on, we can enter a value to limit the fi le size

when uploading fi les. We will enter "2MB" in this fi eld. The Enable Descripti on fi eld checkbox allows users to enter a descripti on about the uploaded fi les. In this case, we will enable this opti on, because we would like users to enter a descripti on of the uploaded fi les.

10.

In the Progress indicator secti on, we can select which indicator will be used when uploading fi les. We select Throbber as the progress indicator for this fi eld.

11.

You will noti ce the bott om part of the page is exactly same as in the previous secti on. We can ignore the bott om part and click on the Save setti ngs butt on

12.

Drupal will direct us back to the manage fi elds administrati on page with a message saying we have successfully saved the confi gurati on for the fi le fi eld.

13.

Aft er creati ng the fi le fi eld, the fi le fi eld row will be added to the table. This table will display the details about the fi le fi eld we just created.

What just happened?

We have confi gured and added the fi le fi eld for the Recipe content type.

In this secti on, we created a fi le fi eld for the Recipe content type; we entered all the essenti al values for the fi le fi eld such as the fi eld label and fi eld type. When we clicked on Save for the fi le fi eld, the Field Setti ngs page let us confi gure additi onal setti ngs for the fi le fi eld. The fi rst opti on Enable Display fi eld will provide a checkbox on the content form so we can specify if the fi le name is displayed on the content page. The second opti on Files displayed by default will cause the checkbox to be checked by default. If neither opti on is checked, the fi lename will be displayed on the content page. The last opti on is to choose the upload desti nati on; currently the public fi le opti on is selected by default. If we have confi gured the private fi le system path on the fi le system administrati on page, we will see a private fi le opti on available on this page, the private fi le system confi gurati on will be covered later in this chapter. Moreover, be cauti ous when saving the fi eld setti ngs, because the setti ngs apply to the fi le fi eld everywhere it is used, and they aff ect the way data is stored in the database and cannot be changed once data has been created.

The fi le fi eld contains quite a lot of setti ngs. The Label fi eld, the Required fi eld and the Help text fi eld are the common setti ngs for fi elds. The specifi ed fi le fi eld setti ngs are Allowed fi le extensions, File directory, Maximum upload size, Enable Descripti on fi eld, and Progress indicator.

The Allowed fi le extensions setti ngs will aff ect the type of fi le users can upload. If we only enter a "txt" extension for this fi eld, users can only upload text fi les to content. This is not a setti ng found too oft en because it makes for too many limitati ons for users. So, in this case, we entered the "txt, zip, pdf" fi le extensions to allow users to upload fi les with some of the more common extensions.

In the File directory setti ngs, we can enter the name of the subdirectory that will store the uploaded fi les. This fi eld is opti onal, if we do not enter anything here, all the fi les will be stored in the sites/default/files directory by default.

Setti ng up some constraints for uploading fi les is necessary, because we cannot allow users to upload fi les without limitati on, they might upload a 20 GB video fi le to our server, which absolutely wastes our server resources and is very cost ineff ecti ve. The maximum upload size setti ngs can be used to set up the allowed fi le size, which can eff ecti vely limit the fi le sizes that users can upload.

When uploading fi les to the server, it would be bett er to have a progress indicator to present the status of fi le upload. Luckily, the fi le module already provides us with such a feature. It allows us to choose the type of progress indicator for the fi le fi eld. There are two types of progress indicators that we can choose, Throbber and Bar with progress meter.

The Progress indicator opti on will only be available if the appropriate PHP extensions, either APC or PECL, are enabled on the server. Otherwise the Progress indicator secti on is not visible and neither is the throbber or the bar opti on.

Throbber will be used by default, which does not show the progress of fi le upload, but it

saves more space on the form, and it will not need extra PHP confi gurati on to make it work properly. Bar with progress meter can indicate the progress of fi le upload, but it will take more space on the form, and it is more complicated to set up. This is because we have to install extra PHP packages and extensions (installing APC or PECL), and we have to set up the PHP confi gurati ons (confi guring PHP.ini) properly in order to make the Bar with progress

meter indicator work.

Pop quiz – adding and confi guring fi le fi eld settings

1. How do we enable an opti on so that links to uploaded fi les are displayed automati cally when viewing the content?

a. Enable the Enable Display Field opti on.

b. Disable the Enable Display Field opti on.

2. Which of the following statements is true?

a. There is only one fi eld widget available for the fi le fi eld type.

b. There are more than two fi eld widgets available for the fi le fi eld type. c. There is no fi eld widget support in the fi le fi eld type.

3. Can we limit the type of fi le being uploaded? a. Yes

b. No

4. Which of the following statements is true?

a. We need to install contributed modules that give us the ability to choose diff erent types of progress indicators for fi le fi elds.

b. We can enter a descripti on of the uploaded fi le if we enable the Descripti on fi eld in the fi le fi eld setti ngs.

c. We can rename the uploaded fi les if we confi gure such setti ngs in the fi le fi eld setti ngs.

Have a go hero – adding and confi guring a fi le fi eld

to the Cooking Tip content type

It's ti me for a challenge. We have created a fi le fi eld for the Recipe content type. We can use the same method we have learned here to add and confi gure a fi le fi eld to the Cooking Tip content type. So the Cooking Tip content can provide fi les for people to download. You will need to make confi gurati ons so that users are allowed to upload PDF, TXT, ZIP, and DOC fi les, and limit the upload size to 2 MB.

Using fi le fi elds

We have gone through all the steps for creati ng the fi le fi eld, and now, it's ti me to use what we have created.

Time for action – using the fi le fi eld

In this secti on, we will make use of the fi le fi eld when creati ng new Recipe content. Follow these steps:

2.

This page displays a list of the existi ng content types. Because we would like to add recipe content, we click on the Recipe link to create new content.

3.

On this page we can enter new recipe content. In the Title fi eld, we enter "Shortbread Biscuits". In the Body fi eld, we enter the recipe details as in the following screenshot, or for your convenience you can copy and paste the content from the content.txt fi le if you have downloaded the project fi les.

4.

There are radio butt ons in the Diffi culty secti on. We select Intermediate for this

recipe, and we enter "Biscuits" in the Recipe Category fi eld. If you have followed the book and have fi nished the exercises, these fi elds should already be created. If you have used diff erent type of fi eld widgets for the same fi elds, you can sti ll select or check your opti ons.

5.

We will see there is a new secti on called File. This secti on provides a fi le widget that allows us to browse and upload a fi le to the website. We click the Browse… butt on that will open a fi le browser; we can fi nd a fi le through the fi le browser, and click open to select the fi le. It does not actually upload any fi le unti l we click the

Upload butt on.

6.

Aft er clicking the Upload butt on, it will upload the fi le you selected through the fi le browser, and we will see that the Throbber progress indicator is shown while uploading the fi le. Aft er uploading the fi le, it will change the fi le fi eld interface, and in the Descripti on fi eld, we enter "Shortbread Biscuits Recipe". Click the Save butt on

7.

Drupal directs us to the full content view of the new content, and it displays a message saying Recipe Shortbread Biscuits has been created successfully.

8.

In the full content view, we will see the output of the Title, Body, Diffi culty, Recipe categories, and File fi elds as shown in the following screenshot. Users can now click on the fi le name link to download the fi le to their computer.

What just happened?

We have learned how to use the fi le fi eld when creati ng new content.

We uploaded a fi le using the fi le fi eld when creati ng new recipe content. When the fi le fi eld is created for the Recipe content type, the existi ng recipe content allows you to att ach fi les. If we navigate to one of our existi ng recipe contents, and click the Edit tab, we will see the fi le fi eld is also available on the Edit page of the content. Which means, when we add a new fi eld to a content type, the ability to att ach fi les to the existi ng content is there, so it is not only applied to the new content.

While uploading the fi le, we will see the progress indicator appear next to the Upload butt on. The type of progress indicator is based on what we selected on the fi le fi eld setti ngs administrati on page. Since we selected the throbber as the progress indicator, the throbber was shown while uploading the fi le. Perhaps we might not see the throbber clearly, if the fi le we uploaded was a small fi le. If we upload a bigger fi le, we can clearly see the throbber is running.

Aft er uploading the fi le, Drupal will change the fi le fi eld user interface. It will display the fi le name of the uploaded fi le and show the fi le size of the uploaded fi le.

The Include fi le in display opti on allows us to select whether the fi le will be displayed in the content. If it is checked, the fi le will be displayed when people are viewing the content, otherwise it will be hidden. The Include fi le in display opti on is provided, because we have enabled this opti on in the fi le fi eld setti ngs administrati on page. If you remember, there are two opti ons, one is Enable Display fi eld, the other is Files displayed by default. That's the reason this opti on is provided and the Include fi le in display opti on is there and is enabled by default.

Below the Include fi le in a display opti on, there is the Enable Descripti on fi eld, which is the opti on we confi gured in the fi le fi eld setti ngs administrati on page. We have enabled the descripti on fi eld, so the opti on is shown when creati ng or editi ng content. It is a good idea to enter a descripti on of the uploaded fi le, otherwise it will use the fi le name as the descripti on of the uploaded fi le. Someti mes this does not make much sense to people. If the fi le name of a fi le is 19228_epd.pdf, people will not understand what it is for.

Pop quiz – using the fi le fi eld

1. Which of the following statements is true? a. The Descripti on fi eld is enabled by default

b. The Descripti on fi eld is disabled by default

c. The Descripti on fi eld is provided in fi le fi elds.

2. Can we hide the Include fi le in display opti on? a. Yes

b. No

Have a go hero – adding a fi le fi eld to the Cooking Tip content type

It's ti me for a litt le challenge. We have uploaded a fi le using the fi le fi eld when creati ng new recipe content. We can use the same method we have learned here to create new Cooking Tip content, and att ach fi les to the Cooking Tip content. You can try diff erent setti ngs to see the diff erences between the opti ons when att aching fi les.

Adding image fi elds to content types

We have learned how to add fi le fi elds to content types. In this secti on, we will learn how to add image fi elds to content types so that we can att ach images to our content.

Time for action – adding an image fi eld to the

Recipe content type

In this secti on, we will add an image fi eld to the Recipe content type. Follow these steps:

1.

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

2.

Click on the Content types link to go to the content types administrati on page.

3.

Click the manage fi elds link on the Recipe row as in the following screenshot,

4.

Locate the Add new fi eld secti on. In the Label fi eld enter "Image", and in the Field name fi eld enter "image". In the fi eld type select list, select "image" as the fi eld

type; the fi eld widget will be automati cally switched to select Image as the fi eld widget. Aft er the values are entered, click Save.

What just happened?

We added an image fi eld to the Recipe content type.

The process of adding an image fi eld to the Recipe content type is similar to the process of adding a fi le fi eld to the Recipe content type, except that we selected image fi eld as the fi eld type and we selected image as the fi eld widget. We will confi gure the image fi eld in the next secti on.

Confi guring image fi eld settings

We have already added the image fi eld. In this secti on, we will confi gure the image fi eld, learn how to confi gure the image fi eld setti ngs, and understand how they refl ect to image outputs by using those setti ngs.

Time for action – confi guring an image fi eld

for the Recipe content type

In this secti on, we will confi gure image fi eld setti ngs in the Recipe content type. Follow these steps:

1.

Aft er clicking the Save butt on, Drupal will direct us to the next page, which provides the fi eld setti ngs for the image fi eld. The Upload desti nati on opti on is the same as the fi le fi eld setti ngs, which provide us an opti on to decide whether image fi les should be public or private. In our case, we select Public fi les. The last opti on is the

Default image fi eld. We will leave this opti on for now, and click on the Save fi eld setti ngs butt on to go to the next step.

2.

This page contains all the setti ngs for the image fi eld. The most common fi eld setti ngs are the Label fi eld, the Required fi eld, and the Help text fi eld. We will leave these fi elds as default.

3.

The Allowed fi le extension secti on is similar to the fi le fi eld we have already learned

about. We will use the default value in this fi eld, so we don't need to enter anything for this fi eld. The File directory secti on is also the same as the setti ngs in the fi le fi eld. Enter "image_fi les" in this fi eld.

4.

Enter "640" x "480" in the Maximum image resoluti on fi eld and the Minimum

image resoluti on fi eld, and enter "2MB" in the maximum upload size fi eld.

5.

Check the Enable Alt fi eld and the Enable Title fi eld checkboxes.

6.

Select thumbnail in the Preview image style select list, and select Throbber in the Progress indicator secti on.

7.

The bott om part of this page, the image fi eld setti ngs secti on, is the same as the

8.

Aft er clicking the Save setti ngs butt on, Drupal sends us back to the Manage fi elds setti ng administrati on page. Now the image fi eld is added to the Recipe

What just happened?

We have added and confi gured an image fi eld for the Recipe content type.

We left the default values in the Label fi eld, the Required fi eld, and the Help text fi eld. They are the most common setti ngs in fi elds.

The Allowed fi le extension secti on is similar to the fi le fi eld that we have seen, which provides us with the ability to enter the fi le extension of the images which are allowed to be uploaded. The File directory fi eld is the same as the one in the fi le fi eld, which provides us with the opti on to save the uploaded fi les to a diff erent directory to the default locati on of the fi le directory.

 The Maximum image resoluti on fi eld allows us to specify the maximum width and height of image resoluti on that will be uploaded. If the uploaded image is bigger than the resoluti on we specifi ed, it will resize images to the size we specifi ed. If we did not specify the size, it will not have any restricti on to images.

 The Minimum image resoluti on fi eld is the opposite of the maximum image resoluti on. We specify the minimum width and height of image resoluti on that is allowed to be uploaded, not the maximum width and height of image resoluti on. If we upload image resoluti on less than the minimum size we specifi ed, it will throw an error message and reject the image upload.

 The Enable Alt fi eld and the Enable Title fi eld can be enabled to allow site administrators to enter the ALT and Title att ributes 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 editi ng 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 secti on.

Pop quiz – confi guring image fi eld settings

1. Can we specify image fi elds to only accept a specifi c range of image types to be uploaded?

a. Yes b. No

2. If we upload an image that is bigger than the maximum image resoluti on we specifi ed, what will happen to the image?

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

It's ti me for another challenge. We have created an image fi eld to the Recipe content type. We can use the same method we have learned here to add and confi gure an image fi eld to the Cooking Tip content type. You can apply the same steps used to create image fi elds to the Recipe content type and try to understand the diff erences between the setti ngs on the image fi eld setti ngs administrati on page.

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 secti on.

Time for action – creating a custom image style

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

1.

Click on the Confi gurati on link in the administrati on menu at the top of the page.

3.

The following page lists all the existi ng image styles in Drupal.

4.

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

5.

Enter "recipe_med" in the Style name fi eld, and then click on the Create new style butt on to store the value.

6.

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

7.

At the bott om of the page, we select Scale and crop, and then click on the

8.

In the next screen, we enter "300" in the Width fi eld, and also enter "300" in the

Height fi eld. Aft er entering the values, we click on the Add eff ect butt on.

9.

The custom image eff ect is now created. The page shows a preview of a sample image with the eff ect applied, and the eff ects we used are also listed in the table at the bott om of the page.

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 confi gurati on page, and then click on the Image styles link to go to the image styles administrati on page.

The image styles administrati on page lists all the existi ng 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 creati ng websites.

There is a Add style link on this page, which allows us to create our own image styles if the existi ng image styles cannot fulfi ll what we need. Creati ng a new image style is easy. Click on the Add style link, and then enter the name of an image style. Aft er saving the image style, Drupal will direct us to the next screen, which provides us with the opti on to add eff ects to the image style we created.

Adding eff ects to image styles is also a very straightf orward process. At the bott om of the page there is a dropdown menu; we can add an eff ect by selecti ng an eff ect from this menu, and then clicking on the Add butt on to add the eff ect to the image style. We can also add multi ple eff ects to one image style if we need to.

In our case, the Scale and crop eff ect was added to the recipe_med image style. Aft er clicking on the Add butt on, Drupal will send us to the next screen. This screen will provide the eff ect setti ngs, we have to enter values to these setti ngs in order to make the eff ect work as we expect. In this case, we enter 300 for the height and the width fi elds, so the Scale and

crop eff ect will be based on these values to proporti onally scale and crop images to

300 width by 300 height.

Aft er clicking on the Add eff ect butt on, 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 eff ects we added on the right of the page. So it is really easy for us to appreciate the diff erences between the original image and the image with eff ects applied. It is also easier for us to test the eff ects and sizes. We can click on the Edit link to modify the values and see the change quickly. Furthermore, besides the default eff ects in Drupal—currently it has got six eff ects—we can install contributed modules to add more eff ects to the image system.

One more thing, if we go back to the image fi eld administrati on page, and go down to the

Preview image style secti on, 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 opti ons are provided.

Pop quiz – creating custom image styles

1. Which of the following statements is true?

a. The Image styles link is on the Structure page.

b. The Image styles link is on the Add content page.

c. The Image styles link is on the Confi gurati on page.

2. Can we add multi ple eff ects to one image style? a. Yes

b. No

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

This is a fi nal challenge for this chapter. We have created an image style using the Scale and

crop eff ect. We can use the same method we have learned here to add an image eff ect using

a diff erent eff ect or even add multi ple eff ects to an image style.

Summary

Image content handling is criti cal for any website, and Drupal has provided a new image system to simplify the process of att aching, adding, and modifying images on a Drupal website. We have learned how to add fi le fi elds and image fi elds to content types, and we have learned how to confi gure fi le fi elds and image fi elds. Aft er that, we have learned how to create our custom image styles in Drupal.

Where to buy this book

You can buy Drupal 7 Fields/CCK Beginner's Guide from the Packt Publishing website:

http://www.packtpub.com/drupal-7-fields-cck-beginners-guide/book

Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read our shipping policy.

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers.