At the beginning of this chapter, we will have a look at a preview of our final project, it will give you a better idea of what we need to do, and what will be achieved when we reach the end of this book. We will also explain the concept of nodes and content types in terms of Drupal. After that we will get our hands dirty with a hands-on tutorial on creating content and content types using the default content types in Drupal. We will go even further to create our own custom content types and add more content by using these custom content types to create a website. Sounds cool! Let's get started!
We shall discuss the following topics in this chapter:
The book example project
A preview of the final project
What is a content type?
Default content types in Drupal 7 core
Creating content using article content types
Creating custom content types
Adding content using custom content types
We will guide you through the complete project by following a set of steps or tasks, and thus you will learn:
How to create custom web content by creating your own content types and fields
How to create fields for displaying multiple values
How to create taxonomy vocabularies and terms for categorizing web content
How to use the file field to provide file uploading functionality to the website
How to use the image field to provide image uploading, extension validation, and image processing functionality to the website
How to format images using image styles
How to control the display of fields in teasers and full content view modes
How to set field level permissions for specific fields that only authenticated users can access
Finally, how to theme fields using templates and CSS
You also have a choice of downloading the final project file from www.packtpub.com or www.drupal7fieldsbook.com to follow along with the book. Alternatively, you can compare your project with the final project if you have any problem while following the book.
This is the homepage of the cooking website; it shows a list of the latest content uploaded to the site. This website is composed of a mixture of content types like Article, Recipe, and Cooking Tip. Each content type contains various field types and configurations. We will show you how to create these content types in this chapter, and then we will create custom fields in Chapter 2.
The preceding screenshot shows the Article content type which is one of the default content types that comes with Drupal. This means that it has some fields already created for us such as Title, Body, image, and Tag fields, by default. The screenshot shows the Article content type in teaser view mode such as you would get in a listing format. Furthermore, as you can see, the body text is positioned on the right side of the image. The default layout is body text below the image, but we will use CSS to manipulate the teaser view mode layout to a different position. We will guide you on how to do this by theming fields in Chapter 9.
The site administrators or authors (users with permissions to create article content) will use this content type to create cooking articles for the website.
The preceding screenshot depicts the Cooking Tip content type that is one of the custom content types we will create in this book. The Cooking Tip content type contains the Title, Image, Body, Tip Owner (Boolean field), and cooking tip Category (Term reference) fields. We will see all these fields in detail later. We will also use the Field UI to manage the field displays and change their order.
The preceding screenshot is of the Recipe content type. It is another custom content type we are going to create. This content type contains more fields than the others. It will contain Title, Body, Image, File, Difficulty (List: text), and recipe Category (Term reference) fields.
The Recipe content type is similar to the Cooking Tip content type, but it has a special field type, which is list, and we will create the Difficulty field by using this field type to define the difficulty level of a recipe.
The site administrators or authors can create a recipe using this content type, and indicate the difficulty level of a recipe on the website.
We will do some advanced theming for the Recipe content type to look like the preceding screenshot. As you can see, we will change the body field position to the left of the page, and position the Difficulty level and the Recipe Category (term reference field) to the right, so people may find it easier to look at both information in different boxes at the center of the page. If the body field has got a lot of information, it is more difficult for users to find the difficulty level and the recipe category information. We will guide you on how to theme fields in Chapter 9.
There is a file field created in the recipe content type, which allows the site administrators or authors to upload PDF versions of recipes or other materials such as wallpapers and coupons.
Most of the time there is a need for more than one type of content on a website. We usually see a newspaper website that contains news, pictures, videos, and forums sections. In terms of Drupal, a node is a piece of content, and every piece of content belongs to a unique content type, a content type that can contain various configurations and settings to define its own composition and behavior.
It is similar to a pancake maker, we set up a pancake maker to make a red bean pancake. Once we turn it on, it will keep making the same type of red bean pancake again and again. It will not suddenly make us a strawberry pancake, unless we use other ingredients and set up the pancake maker to create another type of pancake.
After installing Drupal, there are two default content types that come with Drupal out of the box, they are the Basic page content type and the Article content type. We can use these content types to create a simple website.
The Basic page content type only contains the Title and Body fields. We can write plain text and also insert HTML markup in the Body field.
Text format will finally determine what type of format the Body field will support and display:
For example, if we install and enable the
PHP filter module, it allows us to insert PHP code in the Body field, which means we can write PHP code to connect to databases, and extract data from the databases, and output the information on the website. There are many other filter modules on the Drupal website such as
Markdown filter module,
BBCode filter module, and so on. You can go to the website module download page to see more, and give them a try; you may find one or two filter modules useful for your projects.
The Article content type is similar to the Basic page content type, except it allows us to upload images and enter a set of tags to categorize the content.
The default content types are basically enough for a general purpose content managed website. For example, we can use the default content types to create a blog website. The Basic page content type can be used for creating About Us and Contact Us pages, and the article content type can be used for creating blog posts.
Let's get started by creating some web content using the default content type. Our first task is to add cooking articles to the cooking website using the Article content type.
First log in to the website as an administrator, and go to the administration menu at the top of the page, click on the Add content link to create new content:
It will show two content types on the page, one is Article, the other is Basic page. Click on the Article link to add a cooking article to the site:
You can type content in the fields, or copy and paste content from the final project folder if you have downloaded it. It contains a file called
content.txt, you will find all the text to input in this file. Also there is a directory called
images, which contains all the images for you to use when following along with the book. There is a file called
salad.jpg, you can use it for this tutorial.
After filling in all the details, we leave the other settings to their defaults. Then go to the bottom of the page and click the Save button to save the content:
Once you have saved the content, it will redirect you to the full content view mode of the content, and it will show a message saying the content has been successfully created:
If you go back to the homepage, you will see the content listed on the page as in the following screenshot.
Which of the following types are the default content types in Drupal 7?
a. Page and Image content type
b. Basic page and Page content type
c. Article and Basic page content type
d. Article and Page content type
To which default content type can we attach images?
a. Image content type
b. Article content type
c. Basic page content type
This time we will be creating two custom content types, which are called the Cooking Tip and the Recipe content type. We will mainly use these custom content types to create our cooking website.
Let's create the Cooking Tip content type now. Follow these steps:
Go to the administration menu bar at the top of the page. We will see a Structure link between the Content and Appearance, just click on it.
A page will show up with the following options. We can ignore the other options for now. Let's just focus on creating our custom content types. Click Content types, which is below the Blocks link and above the Menus link on the page:
It will go to the Content types administration page, and this page will show all the existing content types in your Drupal site. Currently it only shows the default content types:
Click the Add content type link:
On this page we will enter our content type information such as the name of the content type, a description of the content type, and other specific settings:
We enter Cooking Tip as the name of the content type, and enter a sentence to describe the content type, and then we just leave the other setting as default. Click the Save content type button at the bottom of the page.
After clicking the Save content type button, it will redirect you back to the Content types administration page with a message saying that the content type has been successfully added to Drupal:
Now we can see our recently added content type Cooking Tip in the list on the Content types administration page.
Now the Cooking Tip content type is created. We will use the same procedure to create the Recipe content type.
Now we will create the Recipe content type, and we will create fields in the later chapters to enhance the functionality of this content type. Follow these steps to create this content type:
In the Content types administration page, click the Add content type link:
Now you can enter Recipe as the name of the content type, similar to the Cooking Tip content type. You can enter a sentence to describe this content type.
When you are done, like the last exercise, go to the bottom of the page, and click on the Save content type button to save this content type in Drupal.
If we go back to the Content types administration page, you can check the existing content types in Drupal, just like the following screenshot. It shows that we have a total of four content types, namely, two custom content types and two default content types:
We have created the Cooking Tip content type and the Recipe content type. All the content types are created, the foundation of the website is built, we will use these content types for the rest of the cooking website.
Can we change the name of the content type after creating it?
Which of the following statements is true?
a. We can create a content type with the same name as another existing content type.
b. We can recreate default content types if we deleted any of the default content types.
We have already created two custom content types. We will add content using these content types. You will find that adding content using the custom content types does not differ greatly from adding content using the default content types. It is only when we start creating more fields in the custom content types that you will gradually understand the differences and characteristics of each content type.
Let's get started by adding some content to the website using our custom content types. Follow these steps to add content using Cooking Tip:
Go to the administration menu bar at the top of the page, and click Add content:
You will see that Cooking Tip and Recipe are added on the Add new content page because we have created those content types previously. Click the Cooking Tip link:
It is similar to the Basic page content type, which only contains the Title and Body fields. We will add more fields later. We can start entering text in the Title and the Body fields, but for your convenience, you can also copy and paste the text from the
content.txtfile if you have downloaded the final project files:
Then we click the Save button at the bottom of the page, and just leave other settings as default:
Once the content is saved, it will redirect you to the full content view mode of the content you just created. There are two tabs at the top of the content, which are the View and the Edit tabs. If we want to edit or update the content, we can click the Edit tab. It will show you the edit page of the content, and we can start to do any modification on that page:
We have added content using the Cooking Tip content type to the cooking website. We entered the title of the cooking tip, and we also entered the cooking tip content to the website. Visitors can now read our cooking tip on the website.
In this section, we will add content using the Recipe content type.
Go to the administration menu bar at the top of the page, and click Add content.
Click the Recipe link on the Add new content page.
On the Create Recipe page, enter text in the Title and the Body fields or copy and paste the text from the
Click the Save button at the bottom of the page to save the content. It will show the full view mode of the content as in the following screenshot:
We have added content using the Recipe content type to the cooking website. We have entered the ingredients and the cooking method of the cake recipe, and now, users can make a cake by following the recipe you just posted.
As we have seen so far, adding content using the Recipe custom content type is not much different from adding content using the Cooking Tip content type. However, in later chapters, we will learn and add a variety of fields to these different content types, and you will understand more about the real power of fields and the relationship between fields and content types.
Can we clone an existing node/content using default Drupal functionality?
Can we change the content type of a node/content to different content type?
Now it is time to test your skills in creating more content using the custom content types. You can try to enter more content with the methods we have learned. Also there are options at the bottom of the page when creating content. You can try to change those settings, and see what they give you.
Try to do all the steps on your own without looking at the chapter first. If you encounter any difficulties, read the chapter again to get familiar with the steps.
In this chapter, we have dealt with the following key topics:
A preview of the complete project in this book. We have an overview of the structure of the final project, and we have an idea of what will be achieved when we reach the end of this book.
What a node and a content type is, and the meaning and the relationship between those terms in Drupal.
Understanding what default content types are in Drupal 7 core and what are the fields created in those content types by default.
How to add content using the default content types.
Understanding the workflow of creating custom content types.
Adding content using custom content types.
Now that we've learned how to create content types, we're ready to learn how to create fields and add them to the custom content types. This is the main purpose of fields, and we will discover the power of fields, which is the topic of the next chapter.