page, which has a special section for the source field, which is called Source
Field Settings.
7.
We will use the options in the SOURCE FIELD SETTINGS page to change the source
field from single value to multiple values. There is an option called Number of
values, which is currently set to 1, now we click on the drop down menu, and select
Unlimited to set the source field to accept multiple value entries:
8.
Leave other options as their default values and click the Save settings button at the
bottom of the page to save the modified settings.
Multiple Value Fields
[
68
]
9.
The settings are saved. It will redirect us back to the Manage fields administration
page. In order to see the changes we made in the Source field settings in
the Cooking Tip content type, we will have to go to the Create Cooking Tip
administration page under Add content.
10.
First, we click the Add content link on the administration menu at the top of
the page:
11.
And then click the Cooking Tip link to create new content using the cooking tip
content type.
12.
We may not notice the change at first glance. However, if we go down to the bottom
of the page, we will see the source field is now changed. If you forgot how that
looked before, here are screenshots to demonstrate the difference between the
single value source field and the multiple value source fields.
Chapter 3
[
69
]
13.
Now we enter "http://uktv.co.uk/food/homepage/sid/5953" into the SOURCE field,
and then click the Add another item button to add one more item to the source
field, and then enter "http://www.davidlebovitz.com/2007/01/chocolate-cake/" to
the field we just added. Since we have selected unlimited in Number of values in
Source field settings, we can keep adding as many items as we need, just by clicking
the Add another item button. Also, it provides the drag-and-drop functionality for
these values to rearrange the order.
14.
Now we can enter the title and the body of the content, for example, we can enter
"Chocolate Cake Recipe Tip" for the Title, and for the Body we can enter:
"Did you know that when a chocolate cake recipe says to 'grease a cake pan and
dust it with flour', you can substitute unsweetened cocoa powder for the flour?
Simply butter the cake pan then spoon in a heaping spoonful of cocoa powder, then
shake the pan to distribute the cocoa over the bottom and sides of the pan."
Multiple Value Fields
[
70
]
So it will look like the following screenshot:
Chapter 3
[
71
]
15.
Click Save to store the values. The final result will be displayed as in the
following screenshot:
As you can see, the Source field will output the URL links that we entered, which can
now output multiple values on the page using the source field.
What just happened?
We have enabled the multiple value option for the Source field in the Cooking Tip
content type.
The Source field was set to only allow a single value to be entered, even though we might
have liked to enter more than one value. There was no possibility to do this except by
entering all the different sources one after the other in just one field but this could confuse
the users.
The good thing about the Field module is that it can accommodate these requirements.
We can easily enable the option in the field administration page without any programming
knowledge. Not only that, the Field module provides an elegant way to add items, we only
need to click the Add another item button, and we can add more items as often as we
want. Once we have saved the values, it will automatically output the entered values
to the webpage.
Multiple Value Fields
[
72
]
Pop quiz – multiple values in fields
1.

Which of the following statements is not true?
a.

A field cannot ha
ve more than five values.
b.

A field can ha
ve unlimited values.
c.

A field can ha
ve more than 99 values.
2.

We ha
ve entered data into a field that allows two values as input. Later on if we
want to change the field to a single value field, does it still output two values
on the page?
a.

Yes
b.

No
Adding Boolean fields
In Drupal 7, the Field module allows us to add a Boolean field type to a content type, which
was not possible in Drupal 6 or earlier versions. Although Drupal 6 or earlier could achieve
the same result by using different methodology, the Field module provides a simple and
elegant way, which makes the process easier and makes more sense to Drupal users.
Time for action – adding a Boolean field
In this section, we will add a Tip owner field using the Boolean field type to the Cooking Tip
content type. Follow these steps:
1.

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

Click the Content types link, and then click the Manage fields link that is on the
Cooking Tip row.
3.

Locate the Add new field table row, and enter "Tip owner" to the Label field, and
then en
ter "tip_owner" into the Field name field, and select Boolean to be the type
of data, and select Single on/off checkbox as the widget. And finally click the Save
button at the bottom of the page to store the entered values.
Chapter 3
[
73
]
4.

It will show a new window, where there is an On value field and an Off value field.
In this case, we enter "My own tip" in the On value field, and enter "It's not my
own tip" in the Off value field. Click the Save field settings button at the bottom
of the page.
5.
We will leave the other values as the default. Go straight down to the bottom of the
page, and click the Save settings button.
6.
Drupal will display a message saying the Tip owner field configuration is saved. But
we will not see any major change on this page. We need to go to the Create content
administration page to see the new option that is available to the Cooking Tip
content type.
7.

Click the Add content link in the administration menu at the top of the page. Then
click the
Cooking tip link to add new Cooking Tip content.
Multiple Value Fields
[
74
]
8.
There is a My own tip checkbox at the bottom of the page, just below the source
field, as shown in the following screenshot:
9.
Users or authors can now check or uncheck this checkbox to indicate the ownership
of a cooking tip. We check the My own tip checkbox, and click Save. The output will
be displayed as in the following screenshot. It will output the On value we entered.
10.
If we uncheck the My own tip checkbox, and click Save, it will output the Off value
we entered on the page.
What just happened?
We have added a Tip owner field using the Boolean field type to the Cooking Tip
content type.
We use this field to indicate whether the person who posts this tip is actually the owner
of the cooking tip. In this way users who create a cooking tip can check or uncheck the
Tip owner field to indicate they are the owner of the cooking tip or not.
Chapter 3
[
75
]
The Boolean field provides two entries that we need to fill in: one is the On value field, the
other is the Off value field. If we are unsure what values we should enter for these fields, we
can consider that the On value field represents the value of true or yes, and the Off value
field represents false or no.
Pop quiz – understanding the Boolean field
1.

Can we enter more than three values in a Boolean field?
a.

Yes
b.

No
2.

Which of the follo
wing statements is true?
a.

If we uncheck a Boolean checkbo
x, it will not display any value on the page.
b.

If we uncheck a Boolean checkbo
x, it will display the Off value on the page.
c.

If we uncheck a Boolean checkbo
x, it will only display the value to the owner
of the content.
Setting default values
The Field module provides an option to set a default value for a field. If we set a default
value to a field, users will not necessarily need to fill in the field, the field will be filled with a
default value. We will set a default value for the Tip owner field that we just created.
Time for action – setting default values
In this section, we will set a default value to the Tip owner field, which will be checked by
default. Follow these steps:
1.
Click the Structure link on the administration menu at the top of the page.
2.
Click the Content type link, and then manage fields on the Cooking Tip row in
the table:
Multiple Value Fields
[
76
]
3.
Locate the Tip owner field row in the table, and then click the edit link:
4.
After clicking the edit link, it will direct us to the Tip owner field administration
page. When we go to the middle of the page, we will find a heading called DEFAULT
VALUE, there is a checkbox with a label called My own tip, which is the On value
we entered.
5.
We check this checkbox to set My own tip as the default value of the
Tip owner field.
6.
Then click the Save settings button at the bottom of the page, which will redirect us
back to the Manage fields administration page.
7.
In order to see the configuration we created, we can add content using the Cooking
Tip content type, so we click the Add content link on the administration menu at the
top of the page, and then click the Cooking Tip link to create new content.
Chapter 3
[
77
]
8.
Locate the Tip owner field, which is positioned just below the source field. See the
following screenshot if you cannot find it:
9.
As you can see, the My own tip checkbox is now automatically checked by default.
If anyone adds new content using the Cooking Tip content type, the Tip owner field
will be set to the On value, which means S is set by default.
What just happened?
We have set My own tip as the default value for the Tip owner field for the Cooking Tip
content type.
The default value option can be very useful for improving the usability of a website. If some
of the values are used frequently by users, we can use those values to pre-fill those fields,
thus making the process of completing the form much easier and more enjoyable.
Normally, we can enter a hint message in the Help text field to let users know what they
need to enter for a field. Another way of using the default value is to set a hint message. For
a compact form design, we can hide field labels, and overlay the field labels over the fields.
Normally, we have to use JavaScript to achieve this result. But there is another way that we
can do that without JavaScript, we can pre-fill the fields using the default value. For example,
we can set a message "Address" to an address text field as the default value. The users will
easily recognize what they need to enter in the field.
Pop quiz – setting default values
1.

Which of the following statements is true?
a.

Only Boolean fields can se
t the default value.
b.

Only te
xt fields can set the default value.
c.

Almost all field types c
an set the default value.
Multiple Value Fields
[
78
]
Adding list fields
We have learned how the Boolean field type works in Drupal, it can set one of two values,
true/yes/1 or false/no/0. What if we need to create a field to have a selection list? For
example, we would like to create a list of options, with which the users can give a rating to
the post. The list should have Best, Good, Normal, Bad, or Very Bad as options. The users
can select one of these options to vote.
In order to create something like that, the list module provides us a list field type to create a
selection list.
Time for action – adding list fields
In this section, we will create a difficulty level field using the list field type for the Recipe
content type. Follow these steps:
1.
Click the Structure link on the administration menu at the top of the page:
2.
Click the Content type link, and then click manage fields on the Recipe row in
the table.
3.
Locate the Add new field table row, enter "Difficulty" in the Label field, and then
enter "difficulty" in the Field name field. We then select List (text) to be the type
of data, and select Check boxes/radio buttons as the widget. Finally click the Save
button at the bottom of the page to store the value.
Chapter 3
[
79
]
4.
This will direct us to the Field settings administration page. This page allows us to
enter a list of values, which will generate a selection list based on these values.
There is a text area field called Allowed values list at the center of the page, we
enter "Advanced, Intermediate, Normal, Easy, Super Easy" into this field, and make
sure we enter one value per line, otherwise it will not work as expected. If you are
not so sure, please refer to the following screenshot. After entering all the values,
we can click the Save field settings button to store the values on this page.
Multiple Value Fields
[
80
]
5.
This will display a message saying the Difficulty field settings are updated. This page
is similar to the other field settings page where we can set the Label, enter Help
text, and set the Default value of the field, except the bottom part of the page is
a little bit different from the others.
6.
The bottom part of the page is the same as the previous screen, where we can enter
values into the Allow values list text area field. We can also set the number of values
for this field, but for now, we just leave it as the default. Click the Save settings
button to store the values.
Chapter 3
[
81
]
7.
This will redirect us back to the Manage fields administration page as shown in the
following screenshot:
Multiple Value Fields
[
82
]
8.
Next, we can create content by clicking the Add content link on the administration
menu at the top of the page, and then by clicking the Recipe link:
9.
We will find the Difficulty field at the bottom of the page. The values listed here are
the values we entered in the Allowed values list. The order of the values is displayed
according to the order of the values we entered.
10.
Select Intermediate in the Difficulty field. Enter anything in the Title and Body
fields, and click Save. The output of the Difficulty field will look like the following
screenshot. That will only display the selected value, the other values in the
selection list will be hidden.
What just happened?
We have added a Difficulty field using the list field type to the Recipe content type.
The list field type can be used to create quizzes, questionnaires, support forms, and so on.
The selection list is one of the most important elements to online forms and applications.
The Field module provides the facility to easily create a selection list without writing any
code. It makes creating a custom set of lists very simple, but, at the same time, it won't
lose its functionality and power because of the Fields settings administration page which
provides us all the flexibility to create our own list of values for selection lists.
Chapter 3
[
83
]
Furthermore, the Allowed values in the list on the fields settings administration page have to
be entered one value per line. If we enter multiple values on one line, it will treat it like
a single value.
The format of the value is in
key|label
format, the
key
value will be stored in the
database; the
label
value is optional. For example, if we enter
1|Good
,
2|Very

good
,
and
3|Excellent
,
1
,
2
, and
3
are the
keys
, and
Good
,
Very

good
and
Excellent
are
the
labels
. So
1
,
2
, and
3
will be stored in the database, and
Good
,
Very

good
, and
Excellent
will be displayed on the web page, and they won't be stored in the database.
If we don't enter the
label
, and we only enter the
key
, the
key
will be used as the
label
, and the
key
will be stored in the database. For example, in this case,
Advanced
,
Intermediate
,
Normal
,
Easy
, and
Super

Easy
will be used as
key
and
label
,
and these values will be stored in the database.
Pop quiz – adding list fields
1.

Can we enter the key values without entering the label values in the Allowed value
lis
t text area field?
a.

Yes
b.

No
2.

Which of the follo
wing statements is true?
a.

We need c
ontributed modules to create selection lists/list fields.
b.

The list field is part of the Drupal 7 c
ore.
c.

We c
annot have more than two values in the list fields.
Multiple value widgets
We have learned how to add multiple values to fields, and we have also learned how to
create Boolean fields and list fields. There is an interaction between the multiple value
fields and the multiple value widgets. We will learn how that works in the next section:
Time for action – changing the multiple value widget
Multiple Value Fields
[
84
]
In this section, we will change the checkboxes/radio buttons widget to the select list widget.
Follow these steps
1.
Click the Structure link on the administration menu at the top of the page:
2.
Click the Content types link, and then click manage fields on the Recipe row in
the table.
3.
Locate the Difficulty field row in the table, and click the Check boxes/radio buttons
link that is in the widget column:
4.
After clicking the Check boxes/radio buttons link, it will show us the CHANGE
WIDGET administration page. Now we can click on the select list to choose Select
list as the widget we want for the Difficulty field. This is a cool new feature added
in Drupal 7. Earlier, in Drupal 6, if we wanted to edit any field or widget settings we
would have had to configure the entire field settings. Now we can click the Continue
button at the bottom of the page.
Chapter 3
[
85
]
5.
It will redirect us back to the Manage fields administration page. You can see
the widget is changed from Check boxes/ radio buttons to Select list in the
Difficulty row:
6.
Next, we can click the Add content link on the administration menu at the top of the
page, and then click the Recipe link.
7.
Look for the Difficulty field on the page. You will see the field widget is now changed
to select list. We can now click on the select list to select one of the values in the
select list to set the difficulty of the recipe.
Multiple Value Fields
[
86
]
What just happened?
We have demonstrated how to change the Check boxes/radio buttons widget into a Select
list widget. The Field widget type can be changed at any time, which can be done easily
through the Field UI.
Time for action – changing the number of the values
In this section, we will change the number of the values for the Select list widget. Follow
these steps:
1.
Click the Structure link on the administration menu at the top of the page:
2.
Click the Content types link, and then click manage fields on the Recipe row in
the table:
3.
Locate the Difficulty field row in the table, and click the edit link that is in the
widget column.
4.
Locate the DIFFICULTY FIELD SETTINGS option. There is a select list where we set
the number of values we can enter for this field. The current value is 1, now we click
on the select list to select Unlimited as the value for this field. After that, we click
the Save Settings button to store the settings.
Chapter 3
[
87
]
5.
In order to see the update, we can click the Add content link on the administration
menu at the top of the page, and then click the Recipe link.
6.
Locate the Difficulty field on the page; you will see the select list is changed, and we
can select multiple values on the select list.
What just happened?
We have learned how to change the number of values for the select list widget. Single or
multiple values will affect how widgets interact with user inputs. As we can see, once the
Difficulty field was changed to unlimited values, users could select multiple values on the
select list. So, verification is needed to make sure we choose the correct widgets and values;
otherwise, the site will collect wrong information due to the inappropriate field settings.
Time for action – checkboxes/radio buttons widget
with multiple values
In this section, we will change the select list widget back to the check boxes/radio buttons
widget. Follow these steps:
1.
Click the Structure link on the administration menu at the top of the page:
Multiple Value Fields
[
88
]
2.
Click the Content types link, and then click manage fields on the Recipe row in
the table:
3.
Locate the Difficulty field row in the table, and click the Check boxes/radio buttons
link that is in the widget column:
4.
Select Check boxes/radio buttons on the select list, and click on the Continue
button to save the change.
5.
Now, we can click the Add content link on the administration menu at the top of the
page, and then click the Recipe link.
6.
Locate the Difficulty field on the page; the radio buttons are now changed to
checkboxes. We can select multiple values on these checkboxes now.
Chapter 3
[
89
]
What just happened?
We have demonstrated how multiple values affect the output of the checkboxes/radio
buttons widget.
So far we have changed the widgets to different multiple value widgets, and we have
changed the number of values we could enter for each widget.
We have changed the number of allowed values to unlimited and also the type of widget we
used to collect and display the data, keeping only the field type the same.
We thus see the widget is smart enough to change its behavior based on the number of
allowed values. As such, radio buttons change to checkboxes in the case of the Checkboxes/
radio buttons widget, and the single select list element on the form changes to multiple
select in the case of the Select list widget.
It is completely up to us to decide when or what is the best time to use those widgets. We have
all the control to pick the right widgets and values to solve our particular problem.
Pop quiz – understanding multiple value widgets
1.

Widget type can determine the number of values a field can enter.
a.

True
b.

False
2.

The number of values user
s can enter for a field will affect the type of widget that
will be used.
a.

True
b.

False
3.

Curren
tly the widget type is using the Checkboxes/Radio buttons widget, and the
number of values is set to unlimited. If the widget type is changed to select the list
widget, does the number of values still remain unlimited?
a.

True
b.

False
Have a go hero – creating multiple value fields
With what we have learned so far, it is time for a challenge. We can use what we have
learned to create a multiple value field called a Cooking tip rating for the Cooking Tip
content type. Site owners can give a rating to each cooking tip, so they can sort out the
cooking tips into different levels and categories for later use.
Multiple Value Fields
[
90
]
Summary
In this chapter, we learned how to enable multiple values for fields, setting up the number of
values for fields. We learned how to set default values for fields, such that values would be
automatically set for fields when creating new content. After that, we learned how to create
list fields, which gave us the ability to create selection lists easily. Following that, we learned
the relationship between the number of values in a field and the widget types.
In the next chapter, we will talk about what taxonomy is in Drupal, and the changes in
Drupal 7. We will learn how to create custom vocabularies, how to properly configure
vocabularies, add terms to vocabularies, add fields to vocabularies, and finally how to add
term references to content types. We will learn all these topics in the next chapter.
4
Taxonomy
Taxonomy is one of the most powerful features available in Drupal. The portion
responsible for handling taxonomy has been redesigned and significantly
improved in Drupal 7. The workflow necessary for categorizing content has
been simplified and taxonomy is now fully integrated with content types and
fields. In this chapter you will learn how to create taxonomy vocabularies and
terms, how to add fields to vocabularies, and term references to content types.
In this chapter, we shall learn:

‹ What is t
axonomy?

‹ Crea
ting vocabularies

‹ Adding terms t
o vocabularies

‹ Adding term r
eferences to content types

‹ Cat
egorizing content using taxonomy

‹ Adding fields to v
ocabularies
What is taxonomy?
In scientific terms, taxonomy is the practice and science of classification according
to a predetermined system. In Drupal terms, it is a system to categorize content
in a Drupal website.
One great example for where we need categorization is the yummy recipes website we
are building.
Taxonomy
[
92
]
Suppose Drupal doesn't provide the functionality of taxonomy, and the website has grown to
contain more than a thousand recipes, since it is a very popular website and the site owners
and users keep posting their recipes to the website every day. That's all fine and great. But
what if people would like to peruse all the French cuisine recipes on the website? Yes, they
could do this but they would have to keep browsing through each page picking up only the
French cuisine recipe posts. That is a really time consuming task and this process might drive
our users and potential customers away. However, without the ability to categorize content
there would be no better way of doing it.
Sometimes we would like to find all the items of a category. In our case, it is easier for us to
find out more useful information in this fashion. For instance, we would like to find out what
other types of cooking methods are there because we've been having too much grill lately
and would like to learn to prepare food using other methods. If we find a category name
called cooking method, we should be able to find out the other cooking methods under the
cooking method category. For instance:

‹ Cooking method

‰ Grill

‰ Fry

‰ Roas
t

‰ Stir-
fry

‰... (term)
T
axonomy provides all the tools for us to solve the above problems. This makes the website
more user-friendly, because users can find their information easily and quickly. Managing
content and organizing content is also much easier for site administrators. This is a win-win
situation for both ends.
In Drupal, taxonomy is made up of two components, vocabulary and term. The vocabulary
is a list of multiple related terms. The term is used to distinctly describe content. Simply put,
we can think of the vocabulary as a category, the term as a tag. To visualize it better, let's
take a look at the type of cooking method example we talked about before. The following
is a list of cooking methods and a list of cuisine type. Let's use taxonomy in the following
example:

‹ Cooking method (v
ocabulary)

‰ Grill (term)

‰ Fry (t
erm)

‰ Roas
t (term)

‰ Stir-
fry (term)

‰ … (term)
Chapter 4
[
93
]

‹ Cuisine type (vocabulary)

‰ American (t
erm)

‰ Chinese (term)

‰ Indian (term)

‰ Japanese (term)

‰ … (term)
Without further e
xplanation, we should have some idea of what's going on just by looking
at the preceding lists. In this example, we created a vocabulary that is the type of Cooking
method, and assigned terms to that vocabulary are Grill, Fry, Roast, and Stir-fry. In the other
example, the Cuisine type is a vocabulary, and American, Chinese, Indian, and Japanese are
the terms assigned to this Cuisine type vocabulary.
The concept of taxonomy, vocabulary, and term might sound complicated, but when we look
at the example, they are very normal to us, because this is the way we find things. One more
real-life example: if we would like to buy a drill in a hardware warehouse, we usually look for
a sign to see the type of product that belongs to that section in the warehouse. If the sign
says tools and hardware in a section, we will go to that section directly to find our tools. In
this case, tools and hardware can be a vocabulary, and sanders, welders, and drills can be
the terms.
Now we should have grasped the basic ideas of what taxonomy is in Drupal. We will create
taxonomy vocabularies and terms in Drupal in the next section, and things will get easier
because our foundation is already built.
Creating vocabularies
The first step when using taxonomy in Drupal is to create vocabularies. We cannot create
terms unless we create vocabularies first.
In the yummy recipes website, the client would like to have the functionality to assign Recipe
and Cooking Tip types to recipes and cooking tips, so users can easily find related recipes
and cooking tips on the website. In other words, we will use Recipe Category vocabulary to
categorize recipes and Cooking Tip Category vocabulary to categorize cooking tips.
Taxonomy
[
94
]
Time for action – creating the Cooking Tip Category vocabulary
In this section, we will create two vocabularies, one is the Cooking Tip Category, and the
other is the Recipe Category. Follow these steps:
1.

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

We will see a list of options, and then we click on the Taxonomy link:
3.

On the Taxonomy administration page, there is an introductory text that explains
what taxonomy and terms are. Also, by default, Tags vocabulary is created by Drupal
as a generic vocabulary to group content into categories. To create a new vocabulary
we need to click on the Add vocabulary link:
Chapter 4
[
95
]
4.

On this page, we can enter the name of the vocabulary and the description of
the vocabulary. In the Name field, we enter "Cooking Tip Category", and in the
Description field, we enter "A vocabulary to categorize cooking tips". After
entering both fields, click the Save button.
5.

It will display a message saying the cooking tip category vocabulary is successfully
cr
eated. On the same page, the taxonomy administration page, we will see the
Cooking Tip Category has now appeared in the table:
What just happened?
We have created the Cooking Tip Category vocabulary using taxonomy in Drupal, and we
will use the same technique we have learnt here to create the Recipe Category vocabulary
for the next section.
Taxonomy
[
96
]
Time for action – creating the Recipe Category vocabulary
This time we will create the Recipe Category vocabulary. Follow these steps:
1.

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

Then we click on the Taxonomy link to go to the taxonomy administration page.
3.

On this page, we click on the Add vocabulary link. In the Name field, we will enter
"Recipe Category". In the Description field, we will enter "A vocabulary to categorize
recipes". Once we have entered values in both fields, click Save to store the values
in Drupal:
Chapter 4
[
97
]
4.

The new vocabulary Recipe Category is created. We will see the recipe category is
no
w in the table:
What just happened?
We have created the Cooking Tip Category vocabulary and the Recipe Category vocabulary
using taxonomy in Drupal.
The first step of using taxonomy is to create vocabularies before we can begin adding terms
to vocabularies. In this section, the vocabularies are created. Although
we may not see any major differences at this stage, this step is critical for the process
of using taxonomy.
Pop quiz – creating vocabularies
1.

Can we add terms before creating vocabularies?
a.

Yes
b.

No
2.

What is the v
ocabulary created by default in Drupal?
a.

Cooking tip ca
tegory
b.

Tags
c.

Type of F
ood
Taxonomy
[
98
]
Adding terms to vocabularies
After creating vocabularies, the next step is to create terms that are related to the
vocabularies. In this case, we can create related terms such as barbecue, cake, and curry to
the Cooking Tip Category. For the Recipe Category, we can sort it by the type of cuisine. We
can assign American, Chinese, Japanese, and Indian to the Recipe Category.
Time for action – adding terms to Cooking Tip Category
In this section, we will create terms to Cooking Tip Category vocabulary. Follow these steps:
1.

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

Then we click on the Taxonomy link to go to the taxonomy administration page:
3.

In order to add terms to the Cooking Tip Category, click on the add terms link as
shown in the following screenshot:
Chapter 4
[
99
]
4.

On this page, in the Name field, we will enter "Barbecue". We can enter "A term
used to categorize content related to cooking tip." in the Description field. We leave
the other field as the default, and click the Save button at the bottom of the page:
Taxonomy
[
100
]
5.

Drupal will redirect us back to the same page with a message saying the term
Barbecue
is created. On this page, we can keep adding terms to the Cooking Tip
Category. This time we enter "Cake" in the Name field, and enter "A term used to
categorize content related to cooking tip" in the Description field. Once we have
entered the values in both fields, click Save.
Chapter 4
[
101
]
6.

In order to see the complete list of terms for the vocabulary, we go back to the
t
axonomy administration page, click the list terms link as shown in the following
screenshot:
7.

This page will show the entire list of terms for the vocabulary, we can also click the
edit link t
o update the term or delete the term:
Taxonomy
[
102
]
What just happened?
We have added terms to the Cooking Tip Category vocabulary.
Once vocabularies are created, the next step is to add associated terms to the vocabularies.
We usually add more than one term to a vocabulary. Drupal provides a user interface that
allow us to quickly add terms to a vocabulary.
After adding a term to a vocabulary, Drupal will redirect us to the same page to add other
terms to the vocabulary, so we will not need to click the Structure | Taxonomy | add terms
link. Drupal makes the site administrator's life easier, because it simplifies the process of
adding terms.
Pop quiz – adding terms to vocabularies
1.

Which of the following statements is true?
a.

After adding a t
erm, Drupal directs us to the homepage.
b.

After adding a t
erm, Drupal directs us to the Taxonomy administration page.
c.

After adding a t
erm, Drupal directs us to the Add terms administration page.
2.

Using Drupal's st
andard interface can we add multiple terms at once?
a.

Yes
b.

No
Have a go hero – adding terms to Recipe Category
It's time for a little challenge. We have created terms to the Cooking Tip Category vocabulary.
We can use the same method we have learned here to add terms to the Recipe Category
vocabulary. We can add terms such as American, Chinese, Indian, Japanese, and Thai to the
Recipe Category vocabulary.
Adding term references to content types
Vocabularies and terms are created. The next step is to assign a vocabulary to a content
type, so the content type can use the vocabulary to categorize content. In Drupal 7, assigning
vocabularies to content types works a little bit different from previous versions of Drupal.
We have to designate a field inside a content type to hold such information as to which
vocabulary we can use to categorize instances of the aforementioned content type. The field
type we need to use for this is called term reference.
Chapter 4
[
103
]
Time for action – adding a term reference field to the
Cooking Tip content type
In this section, we will create a term reference field in the Cooking Tip content type, and we
will use the Cooking Tip Category vocabulary we created for the term reference.
1.

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

It will show a list of options. Click on the Content types link as shown in the
following screenshot:
Taxonomy
[
104
]
3.

The Content type administration page shows all the existing content types in the
table. We click on the manage fields link, because we would like to add a new field
in the Cooking Tip content type:
4.

This page displays the completed list of fields in the Cooking Tip content type. At the
bottom of the page, we locate the section Add new field, and we enter "Cooking Tip
Category" in the Label field, enter "cooking_tip_category" in the Field name field.
In the next column, the field type column, we choose Term reference in the select
list, and for the widget type we choose "Select list". After entering all the values,
we click Save to proceed to the next page.
Chapter 4
[
105
]
5.

On this page, we can choose the vocabulary that provides the source for the list of
terms that will show in the select list. In this case, we choose "Cooking Tip Category"
in the select list, and click Save.
6.

After clicking the Save field settings, the next screen will display a message to say
the Cooking Tip Category field settings have been updated.
Taxonomy
[
106
]
7.

The following page allows us to change the label name, specify whether it is a
r
equired field or not, insert help text, specify a default value, specify how many
values you can choose, and change the vocabulary that provides the source for the
list of terms that will show in the select list. (We have learnt all about these field
level settings in Chapter 2 and Chapter 3.)
8.

We will leave all the other values as the default. Click on the Save settings button at
the bottom of the page to store the entered values.
Chapter 4
[
107
]
9.

Drupal will direct us to the manage fields administration page with a message
saying the Cooking Tip category configuration is saved, as shown in the
following screenshot:
What just happened?
We have created a term reference field in the Cooking Tip content type, and we chose the
vocabulary that provides the source for the list of terms that will show in the select list.
In order to use the taxonomy vocabularies and terms in content types, we have to assign the
vocabulary to the content type. By assigning the vocabulary to the content type, we have
to create a term reference field in the content type, and specify the vocabulary that could
provide the source for the list of terms that will show in the field widget, in this case, the
select list.
Pop quiz – adding term references to content types
1.

Which of the following statements is true?
a.

Select list widg
et has to be used for term reference fields.
b.

Term r
eference fields can be created on the taxonomy administration page.
c.

Term r
eference fields have to be used when using taxonomy to
categorize content.
2.

If we alr
eady created a term reference field, and specified a vocabulary as the
source, can we change the current term reference field to use a different vocabulary
as the source?
a.

Yes
b.

No
Taxonomy
[
108
]
Have a go hero – adding a term reference to the Recipe content type
It is time for a challenge. Use the same method we have learned here in this section to
create a term reference field in the Recipe content type, and choose the Recipe Category
vocabulary to provide the source for the list of terms that will show in the select list.
Categorizing content using taxonomy
It is time to use what we have created to categorize content. The term reference field
we created will provide us with a select list that allows us to select taxonomy terms to
categorize the content.
Time for action – categorizing Cooking Tip Content
using taxonomy
In this section, we will create a new cooking tip and use taxonomy to categorize the content.
1.

Click the Add content link on the administration menu at the top of the page:
2.

Click the Cooking Tip link to add new content using the Cooking Tip content type.
Chapter 4
[
109
]
3.

We can enter "Marb Barbecue Tips" in the Title field. Enter "Whenever barbecuing,
use tongs to turn the meat. A fork should never be used. It will punch holes in the
flesh and allow the natural juices to escape and lose flavor and become chewy." in
the Body field. Then enter "http://www.cookingtipexample.com" in the Source field.
4.

We will see a new select list that has appeared at the bottom of the page, namely
Cooking Tip Ca
tegory. Now we can select a term from the list of terms we created
to categorize this content. In this case, we select Barbecue, and then click on the
Save button at the bottom of the page.
5.

After clicking the Save button, Drupal will direct us to the full content view where
w
e will see the output of the content we just entered.
Taxonomy
[
110
]
6.

We will notice that the Cooking Tip Category label and the Barbecue hyperlink are
shown on the page. So what we have entered and selected will affect how the page
renders the result.
7.

In this case, we click on the Barbecue link that is next to the Cooking Tip
Ca
tegory label:
8.

After clicking the Barbecue link, it will display the Barbecue taxonomy term page.
This pag
e will show all content that used the Barbecue taxonomy term. If we have
more content, and we selected the Barbecue taxonomy term in the Cooking Tip
Category select list, all that content will be displayed on this page.
Chapter 4
[
111
]
What just happened?
We have categorized a Cooking Tip content type using a taxonomy term.
To categorize content using taxonomy in Drupal, we have to specify a term in a vocabulary. In
our case, we have selected Barbecue (a term) from the Cooking Tip Category (a vocabulary)
select list (a field widget).
As you've seen, Drupal will render taxonomy term pages automatically, which will show all of
the content that is categorized under the selected terms. Drupal also automatically creates
an RSS feed for all content categorized under a certain term.
Taxonomy
[
112
]
If we click the RSS feed icon it will render a list of content based on the selected terms, as
in the following screenshot. It depends on your web browser. Some web browsers may not
support rendering RSS feeds, which may require users to install RSS reader software to read
RSS feeds properly.
Pop quiz – categorizing content using taxonomy
1.

Which of the following statements is true?
a.

Drupal will not render t
axonomy term pages automatically.
b.

Drupal will render t
axonomy term pages automatically.
c.

Drupal will render v
ocabulary pages automatically.
2.

Drupal crea
tes an RSS feed automatically for all of the content that is related to the
selected terms. Is it true or false?
a.

True
b.

False
Chapter 4
[
113
]
Have a go hero – categorizing content using the
Recipe Category vocabulary
It is time for a challenge. Use the same method we have learnt here in this section to create
three recipes using the Recipe content type, and specify any of the terms you have created in
the Recipe Category vocabulary. After creating the content, try to click on the terms and RSS
feed icons, and see what Drupal will generate for you.
Adding fields to vocabularies
One of the most powerful and useful features in Drupal 7 is taxonomy, it is now fully
integrated with fields. We can create, update, share, and delete fields in taxonomy. That was
not possible in Drupal 6 or earlier. We could achieve the same result by using contributed
modules or some hacking, though none as elegant as what Drupal 7 provides for us out of
the box, because all these features are built into Drupal 7 core.
Time for action – adding a field to the Cooking Tip
Category vocabulary
We will add an introduction text field to the Cooking Tip Category vocabulary. People will see
the introduction message when they are on Taxonomy term pages. Follow these steps:
1.

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

Then we click on the Taxonomy link to go to the taxonomy administration page.
Taxonomy
[
114
]
3.

On the taxonomy administration page, we click on the edit vocabulary link as shown
in the following screenshot:
4.

There are tabs on the right of the page. We click on the MANAGE FIELDS tab, and
ignore the other tabs for now:
Chapter 4
[
115
]
5.

This page is similar to the Manage fields administration page in the Content types
section. In the Label field, we enter "Introduction", in the Field name field, we enter
"intro", the field type field we select "Long text" as the field, and then we select the
Text area (multiple rows) widget for the last field. After entering all the values, we
can click on the Save button at the bottom of the page.
6.

Click on the Save field settings button on the next screen.
7.

On the following page, we leave the other values as default, and click on the Save
settings button to store the settings.
Taxonomy
[
116
]
8.

We go back to the Barbecue taxonomy term page; we will not see any difference
bec
ause we haven't entered any data to the Introduction field. Now we can click
on the Edit tab on the page to enter values to the Introduction field.
9.

At the bottom of the page, we will see a new text area field in which we can enter
in
troduction text. In this example, we will enter "This page will show all the cooking
tips based on the term you have selected." in the text area field, and then click on
the Save button at the bottom of the page.
10.

Drupal will redirect us to the same page, but we would like to see the output of the
pag
e, so we click on the View tab to render the result of the page.
Chapter 4
[
117
]
11.

Now we will see the introduction text that has appeared on the Barbecue taxonomy
term page.
What just happened?
We have created a long text field for the Cooking Tip Category vocabulary.
Adding fields to vocabularies is now possible in Drupal 7. We can easily add any field to
taxonomy vocabulary terms, making it possible for each taxonomy term to contain its
own information. It may not become instantly apparent but this is a very powerful feature
lacking in previous versions of Drupal. It allows us to enrich taxonomy terms with additional
information such as explanations, descriptions, or logos. A very good example of this is if
we would be categorizing products by brand. Then on each brand vocabulary term we could
store related information such as a link to a company website or indeed a brand logo.
Pop quiz – adding fields to vocabularies
1.

We cannot reuse fields we created in content types for vocabularies.
a.

True
b.

False
2.

We ha
ve entered a value to the introduction field for the Barbecue term; do the
other terms display the same value on the taxonomy page?
a.

Yes
b.

No
Taxonomy
[
118
]
Have a go hero – creating fields for content types and comments
With what we have learned so far, it's time for a challenge. We can use the same methods
we have learned to create more fields in other vocabularies we have created. Try to enter
values to different fields in different terms, and see what results you get
Summary
In this chapter, we have learned what taxonomy is, and we have learned the difference
between taxonomy terms and taxonomy vocabularies in Drupal. After that, we learned how
to create vocabularies and add terms to vocabularies using the Drupal web user interface.
Then, we learned how to add term references to content types, and to categorize content
using the term reference we created. Finally, we examined how to add fields to vocabulary
terms, and explored its potential use.
The next chapter will be a fun chapter because we will learn how to attach files and images
to content using the File and Image fields in Drupal, which makes the current text-only
website more fun and eye-catching.
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 essential in
most of today's websites.
Drupal 6 and earlier versions required the use of contributed modules to achieve
effective file and image handling. With its well-known file and image add-on
modules for CCK, Drupal could achieve many file and image handling tasks.
The good news is that in Drupal 7, to get basic file and image handling
functionality, you do not need to go anywhere further than Drupal core.
You get image resizing, image styles, and effects just by installing Drupal.
The improved usability and simplified 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 con
figuring file fields to content types

‹ Using file fields

‹ Adding image fields t
o content types

‹ Configuring imag
e field settings

‹ Crea
ting custom image styles
File and Image Fields
[
120
]
Adding and configuring file fields to content types
There are many cases where we need to attach files to website content. For instance, a
restaurant owner might like to upload their latest menu in PDF format to their website, or a
financial institution 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 attach files
to content easily, to decide the attachment display format, and also to manage file locations.
Furthermore, the File module is integrated with fields and provides a file field type, so we
can easily attach files to content using the already discussed field system making the process
of managing files much more streamlined.
Time for action – adding and configuring a file field
to the Recipe content type
In this section, we will add a file field to the Recipe content type, which will allow files to be
attached to Recipe content. Follow these steps:
1.

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

The following page will display a list of options. Click the Content types link to go
to the Content types administration page.
Chapter 5
[
121
]
3.

Since we want to add a file field to the Recipe content type, we will click the manage
fields link on the Recipe row as shown in the following screenshot:
4.

This page will display the existing fields of the Recipe content type. In the Label field
en
ter "File", and in the Field name field enter "file". In the field type select list select
File as the field type, the field widget will be automatically switched to File as the
field widget. After the values are entered, click Save.
File and Image Fields
[
122
]
5.

A new window will pop up which provides the field settings for the file field that we
ar
e creating. There are two checkboxes, and we will enable both these checkboxes.
The last radio button option will be selected by default. Then click the Save field
settings button at the bottom of the page.
6.

We clicked the Save field settings button to store the values for the file field settings
that we selected. After that, it will direct us to the file field settings administration
page, as in the following screenshot:
Chapter 5
[
123
]
File and Image Fields
[
124
]
7.

We can leave the Label field as default as it will be filled automatically with the value
w
e entered previously. We will also leave the Required field as default, because we
do not want to force users to attach files to every recipe. In the Help text field, we
can enter "Attach files to this recipe".
8.

In the Allowed file extensions section, we can enter the file extensions that are
allowed to be uploaded. In this case, we will enter "txt, pdf, zip". In the File directory
section, we can enter the name of a subdirectory that will store the uploaded files,
and in this case, we will enter "recipe_files":
9.

In the Maximum upload size section, we can enter a value to limit the file size
when uploading files. We will enter "2MB" in this field. The Enable Description field
checkbox allows users to enter a description about the uploaded files. In this case,
we will enable this option, because we would like users to enter a description of the
uploaded files.
Chapter 5
[
125
]
10.

In the Progress indicator section, we can select which indicator will be used when
uploading files. We select Throbber as the progress indicator for this field.
11.

You will notice the bottom part of the page is exactly same as in the previous
section. W
e can ignore the bottom part and click on the Save settings button
to store all the values we have entered.
File and Image Fields
[
126
]
12.

Drupal will direct us back to the manage fields administration page with a message
sa
ying we have successfully saved the configuration for the file field.
13.

After creating the file field, the file field row will be added to the table. This table
will displa
y the details about the file field we just created.
What just happened?
We have configured and added the file field for the Recipe content type.
In this section, we created a file field for the Recipe content type; we entered all the essential
values for the file field such as the field label and field type. When we clicked on Save for the
file field, the Field Settings page let us configure additional settings for the file field. The first
option Enable Display field will provide a checkbox on the content form so we can specify if
the file name is displayed on the content page. The second option Files displayed by default
will cause the checkbox to be checked by default. If neither option is checked, the filename
will be displayed on the content page. The last option is to choose the upload destination;
currently the public file option is selected by default. If we have configured the private file
system path on the file system administration page, we will see a private file option available
on this page, the private file system configuration will be covered later in this chapter.
Moreover, be cautious when saving the field settings, because the settings apply to the file
field everywhere it is used, and they affect the way data is stored in the database and cannot
be changed once data has been created.
The file field contains quite a lot of settings. The Label field, the Required field and the
Help text field are the common settings for fields. The specified file field settings are
Allowed file extensions, File directory, Maximum upload size, Enable Description field,
and Progress indicator.
Chapter 5
[
127
]
The Allowed file extensions settings will affect the type of file users can upload. If we only
enter a "txt" extension for this field, users can only upload text files to content. This is not a
setting found too often because it makes for too many limitations for users. So, in this case,
we entered the "txt, zip, pdf" file extensions to allow users to upload files with some of the
more common extensions.
In the File directory settings, we can enter the name of the subdirectory that will store the
uploaded files. This field is optional, if we do not enter anything here, all the files will be
stored in the
sites/default/files
directory by default.
Setting up some constraints for uploading files is necessary, because we cannot allow users
to upload files without limitation, they might upload a 20 GB video file to our server, which
absolutely wastes our server resources and is very cost ineffective. The maximum upload size
settings can be used to set up the allowed file size, which can effectively limit the file sizes
that users can upload.
When uploading files to the server, it would be better to have a progress indicator to present
the status of file upload. Luckily, the file module already provides us with such a feature. It
allows us to choose the type of progress indicator for the file field. There are two types of
progress indicators that we can choose, Throbber and Bar with progress meter.
The Progress indicator option will only be available if the appropriate PHP extensions, either
APC or PECL, are enabled on the server. Otherwise the Progress indicator section is not
visible and neither is the throbber or the bar option.
Throbber will be used by default, which does not show the progress of file upload, but it
saves more space on the form, and it will not need extra PHP configuration to make it work
properly. Bar with progress meter can indicate the progress of file 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 configurations (configuring
PHP.ini
) properly in order to make the Bar with progress
meter indicator work.
Pop quiz – adding and configuring file field settings
1.

How do we enable an option so that links to uploaded files are displayed
aut
omatically when viewing the content?
a.

Enable the Enable Display Field op
tion.
b.

Disable the Enable Display Field op
tion.
c.

We c
annot do this in Drupal.
File and Image Fields
[
128
]
2.

Which of the following statements is true?
a.

There is only one field widg
et available for the file field type.
b.

There ar
e more than two field widgets available for the file field type.
c.

There is no field widg
et support in the file field type.
3.

Can we limit the type of file being uploaded?
a.

Yes
b.

No
4.

Which of the follo
wing statements is true?
a.

We need t
o install contributed modules that give us the ability to choose
different types of progress indicators for file fields.
b.

We c
an enter a description of the uploaded file if we enable the Description
field in the file field settings.
c.

We c
an rename the uploaded files if we configure such settings in the file
field settings.
Have a go hero – adding and configuring a file field
to the Cooking Tip content type
It's time for a challenge. We have created a file field for the Recipe content type. We can use
the same method we have learned here to add and configure a file field to the Cooking Tip
content type. So the Cooking Tip content can provide files for people to download. You will
need to make configurations so that users are allowed to upload PDF, TXT, ZIP, and DOC files,
and limit the upload size to 2 MB.
Using file fields
We have gone through all the steps for creating the file field, and now, it's time to use what
we have created.
Time for action – using the file field
In this section, we will make use of the file field when creating new Recipe content. Follow
these steps:
1.

Click on the Add content link in the administration menu at the top of the page.
Chapter 5
[
129
]
2.

This page displays a list of the existing content types. Because we would like to add
r
ecipe content, we click on the Recipe link to create new content.
3.

On this page we can enter new recipe content. In the Title field, we enter
"Shortbread Biscuits". In the Body field, 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
file if you have downloaded the project files.
File and Image Fields
[
130
]
4.

There are radio buttons in the Difficulty section. We select Intermediate for this
recipe, and we enter "Biscuits" in the Recipe Category field. If you have followed
the book and have finished the exercises, these fields should already be created. If
you have used different type of field widgets for the same fields, you can still select
or check your options.
5.

We will see there is a new section called File. This section provides a file widget that
allows us to browse and upload a file to the website. We click the Browse… button
that will open a file browser; we can find a file through the file browser, and
click open to select the file. It does not actually upload any file until we click the
Upload button.
6.

After clicking the Upload button, it will upload the file you selected through the
file browser, and we will see that the Throbber progress indicator is shown while
uploading the file. After uploading the file, it will change the file field interface, and
in the Description field, we enter "Shortbread Biscuits Recipe". Click the Save button
at the bottom of the page to store all the values we entered.
Chapter 5
[
131
]
7.

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

In the full content view, we will see the output of the Title, Body, Difficulty, Recipe
categories, and File fields as shown in the following screenshot. Users can now click
on the file name link to download the file to their computer.
File and Image Fields
[
132
]
What just happened?
We have learned how to use the file field when creating new content.
We uploaded a file using the file field when creating new recipe content. When the file field
is created for the Recipe content type, the existing recipe content allows you to attach files.
If we navigate to one of our existing recipe contents, and click the Edit tab, we will see the
file field is also available on the Edit page of the content. Which means, when we add a new
field to a content type, the ability to attach files to the existing content is there, so it is not
only applied to the new content.
While uploading the file, we will see the progress indicator appear next to the Upload
button. The type of progress indicator is based on what we selected on the file field settings
administration page. Since we selected the throbber as the progress indicator, the throbber
was shown while uploading the file. Perhaps we might not see the throbber clearly, if the
file we uploaded was a small file. If we upload a bigger file, we can clearly see the throbber
is running.
After uploading the file, Drupal will change the file field user interface. It will display the file
name of the uploaded file and show the file size of the uploaded file.
The Include file in display option allows us to select whether the file will be displayed in
the content. If it is checked, the file will be displayed when people are viewing the content,
otherwise it will be hidden. The Include file in display option is provided, because we have
enabled this option in the file field settings administration page. If you remember, there are
two options, one is Enable Display field, the other is Files displayed by default. That's the
reason this option is provided and the Include file in display option is there and is enabled
by default.
Chapter 5
[
133
]
Below the Include file in a display option, there is the Enable Description field, which is
the option we configured in the file field settings administration page. We have enabled the
description field, so the option is shown when creating or editing content. It is a good idea to
enter a description of the uploaded file, otherwise it will use the file name as the description
of the uploaded file. Sometimes this does not make much sense to people. If the file name of
a file is
19228_epd.pdf
, people will not understand what it is for.
Pop quiz – using the file field
1.

Which of the following statements is true?
a.

The Descrip
tion field is enabled by default
b.

The Descrip
tion field is disabled by default
c.

The Descrip
tion field is provided in file fields.
2.

Can we hide the
Include file in display option?
a.

Yes
b.

No
Have a go hero – adding a file field to the Cooking Tip content type
It's time for a little challenge. We have uploaded a file using the file field when creating new
recipe content. We can use the same method we have learned here to create new Cooking
Tip content, and attach files to the Cooking Tip content. You can try different settings to see
the differences between the options when attaching files.
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.
File and Image Fields
[
134
]
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 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.
Chapter 5
[
135
]
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 Save.
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.
File and Image Fields
[
136
]
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 the Save button, Drupal will direct us to the next page, which provides
the field se
ttings 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.
Chapter 5
[
137
]
2.

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

The Allowed file extension section is similar to the file field we have already learned
about. W
e 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.
File and Image Fields
[
138
]
4.

Enter "640" x "480" in the Maximum image resolution field and the Minimum
imag
e resolution field, and enter "2MB" in the maximum upload size field.
5.

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

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

The bottom part of this page, the image field settings section, is the same as the
pr
evious 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.
Chapter 5
[
139
]
8.

After clicking the Save settings button, Drupal sends us back to the Manage
fields se
tting administration page. Now the image field is added to the Recipe
content type.
File and Image Fields
[
140
]
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 Ma
ximum 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 imag
e 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 c
an 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.
Pop quiz – configuring image field settings
1.

Can we specify image fields to only accept a specific range of image types to be
uploaded?
a.

Yes
b.

No
2.

If we upload an imag
e that is bigger than the maximum image resolution we
specified, what will happen to the image?
a.

Nothing.
b.

The upload will be reject
ed.
c.

The image will be r
esized.
Chapter 5
[
141
]
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.
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.
2.

Locate the Media block, and click on the Image styles link in the block.
File and Image Fields
[
142
]
3.

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

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

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

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

At the bottom of the page, we select Scale and crop, and then click on the
Add butt
on.
File and Image Fields
[
144
]
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.
9.

The custom image effect is now created. The page shows a preview of a sample
imag
e with the effect applied, and the effects we used are also listed in the table
at the bottom of the page.
Chapter 5
[
145
]
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.
File and Image Fields
[
146
]
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.
Pop quiz – creating custom image styles
1.

Which of the following statements is true?
a.

The Imag
e styles link is on the Structure page.
b.

The Imag
e styles link is on the Add content page.
c.

The Imag
e styles link is on the Configuration page.
2.

Can we add multiple e
ffects to one image style?
a.

Yes
b.

No
Have a go hero – adding an image field to the Cooking Tip content type
This is a final challenge for this chapter. 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
Image content handling is critical for any website, and Drupal has provided a new image
system to simplify the process of attaching, adding, and modifying images on a Drupal
website. We have learned how to add file fields and image fields to content types, and we
have learned how to configure file fields and image fields. After that, we have learned how
to create our custom image styles in Drupal.
The next chapter will be another fun chapter because we will learn how to manage a field
display. We will modify the format of fields, and we will use the image styles we created in
this chapter to format the output of image fields.
6
Managing Field Display
In the previous chapters, we created a variety of fields in Drupal, which
included text fields, multiple value fields, term reference fields, file fields,
and image fields. The settings for those fields were configured to work as we
wanted. However, we have only achieved very limited control on the visual
representation of the fields so far.
More often than not we will need to control the output of the fields on the web
page. As we've seen so far, there is only one option available to us to control
the output of the fields, that is, the order of the fields on the Manage fields
administration page. We can arrange the order in which the fields will be
rendered on the web page.
But there will be times when we need more control over the way fields are
rendered. In this chapter, we will talk about ways that we can arrange and
format field displays. The great thing is that Drupal 7 provides more powerful
options for us to control how fields look, and because the new Field API system
is integrated with comments and taxonomy we can now format the comment
fields display and the vocabulary fields display as well.
In this chapter, we shall learn about:

‹ Field display

‹ Forma
tting field display on Teaser view

‹ Cust
om display settings

‹ Forma
tting image field display on full content

‹ Forma
tting comment field display

‹ Forma
tting vocabulary field display
Managing Field Display
[
148
]
Field display
The purpose of managing the field display is not only to beatify the visual representation of
fields, but also to affect how people read the information on a web page and the usability of
a website. The design of a field display has to seem logical to users and easy to understand.
Consider an online application form where the first name field is positioned in between the
state and country fields. Although the application can gather the information just fine, this
would be very illogical and bothersome to our users. It goes without saying that the first
name should be in the personal details section while the state and country should go in the
personal address section of the form.
Time for action – a first look at the field display settings
In this section, we will learn where to find the field display settings in Drupal. Now, let's take
a look at the field display settings:
1.

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

Click on the Content types link on this page.
Chapter 6
[
149
]
3.

On the right of the table, click on the manage display link to go to the manage
display administration page to adjust the order and positioning of, the field labels.
4.

Click on the manage display link to adjust the field display for the Recipe
c
ontent type.
Managing Field Display
[
150
]
5.

This page lists all of the field display settings that are related to the content type
w
e selected.
6.

If we click on the select list for any of the labels, there are three options that we can
select, Abo
ve, Inline, and <Hidden>.
Chapter 6
[
151
]
7.

If we click on the select list for any of the formats, there are five options that we
c
an select from, namely, Default, Plain text, Trimmed, Summary or trimmed,
and <Hidden>.
8.

However, the options will vary with field types. As in the case of the Difficulty field
the multiple v
alues field, if we click on the select list for Format, will show three
options, Default, Key, and <Hidden>.
Managing Field Display
[
152
]
What just happened?
We have learned where to find the field display settings in Drupal, and we have taken a look
at the options for the field display.
When we click on the select list for labels, there are three options that we can use to control
the display of the field label:

‹ Abov
e: The label will be positioned above the field widget

‹ Inline: The label will be positioned to the le
ft of the field widget

‹ <Hidden>: The label will not be display
ed on the page
When we click on the select list for formats, the options will be shown, but the options will
be different, and depend on the field type we select. For the Body field, we will have four
options that we can choose to control the body field display:

‹ Def
ault: The field content will be displayed as we specified when we created
the field

‹ Plain te
xt: The field content will be displayed as plain text, which ignores HTML tags
if the content contains any

‹ Trimmed: The field c
ontent will be truncated to a specified number of characters

‹ Summary or trimmed
: The summary of the field will be displayed; if there is no
summary entered, the content of the field will be trimmed to a specified number
of characters

‹ <Hidden>: The field con
tent will not be displayed
Pop quiz – a first look at the field display settings
1.

Different field types will provide different options for the format of the display.
a.

True
b.

False
2.

What op
tion can we choose to truncate the Body field content to a specified
number of characters?
a.

Def
ault
b.

Hidden
c.

Trimmed
Chapter 6
[
153
]
Formatting field display in the Teaser view
The teaser view of content is usually the first piece of information people will see on a
homepage or a landing page, so it will be useful if there are options that could control the
display in teaser view. For example, for the yummy recipe website, the client would like to
have the number of characters displayed in teaser view limited to 300 characters, because
they do not like to display too much text for each post on the homepage.
Time for action – formatting the Body field display in teaser view
In this section, we will format the Body field of the Recipe content type in teaser view:
1.

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

Click on the Content types link on the following page:
Managing Field Display
[
154
]
3.

Click on the manage display link to adjust the field display for the Recipe
c
ontent type.
4.

At the top-right of the page, there are two buttons, the first one is Default, the
second one is Teaser, now click on the Teaser button.
5.

This page lists all the available fields for the teaser view of the Recipe content type.
Chapter 6
[
155
]
6.

Now click on the gear icon to update the trim length settings:
7.

After clicking on the gear icon, which will display the Trim length settings. The
default value of Trim length is 600, we change it to 300, and then click the Update
button to confirm the entered value.
8.

Click the Save button at the bottom of the page to store the value into Drupal.
Managing Field Display
[
156
]
9.

If we go back to the homepage, we will see the recipe content in teaser view. It is
no
w truncated to 300 characters.
What just happened?
We have formatted the Body field of the Recipe content type in Teaser view.
Currently there are two view modes, one is the Default view mode, and the other is the
Teaser view mode. When we need to format the field content in Teaser view, we have to
switch to the Teaser view mode on the Manage display administration page to modify
these settings.
Moreover, when entering data or updating the field display settings, we have to remember
to click the Save button at the bottom of the page to permanently store the value into
Drupal. If we just click on the Update button, it will not store the value into Drupal, it will
only confirm the value we entered, therefore, we always need to remember to click on the
Save button after updating any settings.
Furthermore, there are other fields which are positioned in the hidden section at the bottom of
the page, which means those fields will not be shown in Teaser view. In our case only the Body
field is shown in Teaser view. We can easily drag and drop a field to the hidden section to hide