Creating a recipe style content type

 

In this post I am going to explain how to create a content type which can be used for writing recipes on a cookery site (for example). You can adapt the content type as you wish for other uses.

When we are finished, this is what we will have created.

Result of this tutorial

You will need

To create the content type, please install and enable the following Drupal modules:

·         Entity http://drupal.org/project/entity

·         Field collection http://drupal.org/project/field_collection

You will also need to have the ability to edit the CSS in your theme.

Note: It’s preferable not to use one of the Drupal default themes. A good starting point would be to use a base theme such as Zen or Sasson.

Let’s go

1.       Select Structure from the admin menu, then select Content types

2.       Select Add content type

3.       In the Name field enter Recipe

4.       In the Description field, enter Use this content type for publishing recipes to the site

5.       Select Save and add fields

6.       On the Manage fields page, enter Ingredients in the Label field

7.       Enter ingredients in the Field name field

8.       Select Field collection in the Field column

9.       Select Embedded from the Widget column

10.   Select Save

11.   On the following screen, select Save field settings

12.   On the following screen, set the Number of values field to Unlimited

13.   Select Save settings

14.   Enter Cooking time in the Label field

15.   Enter cooking_time in the Field name field

16.   Select Text in the Field column

17.   Select Save

18.   On the following page, leave the default value of 255, and select Save field settings

19.    On the following page, leave the default settings, and select Save settings

21.   Select Structure from the admin menu, then select Field collections

22.   Select manage_fields for the field_ingredients row

23.   In the Label field, enter Ingredient

24.   In the Field name field, enter ingredients

25.   Select Text from the Field column

26.   Select Save

27.   On the following page, leave the Maximum length filed set at 255 and select Save field settings

28.   On the following settings page, select Save settings

29.   In the Label field, enter Quantity

30.   In the Field name field, enter quantity

31.   Select Text in the Field column

32.   Select Save

33.   On the following page, leave the Maximum length set as 255 and select Save field settings

34.   On the following page, select Save settings

35.   Select Manage display

36.   Select <Hidden> for the Label field for both the Ingredient and Quantity fields

37.   Select Save

38.   Select Content from the admin menu, then select Recipe

39.   In the Body field, enter some sample content for the time being

40.   In the ingredients section, enter Chicken in the Ingredient field, and 2 breasts in the Quantity field

41.   Select Add another item

42.   In the new field, enter Tomatoes in the Ingredient field, and 1 tin in the Quantity field

43.   Add the following ingredients:
 

Ingredient

Quantity

Onion

2

Salt

Pinch

Black pepper

To taste

Chorizo

5 large slices

Penne pasta

100 grams

44.   In the Cooking time field, enter 25 minutes

45.   Select Save

46.   Open the CSS file for your theme, and add the following CSS:
.node-recipe .field-collection-container{float:right;width:200px;margin-left:20px;background:#eee;padding:10px}

.node-recipe .field-name-body{float:left;width:450px;}

.node-recipe .field-collection-view{padding:0;margin:0}

.node-recipe .field-name-field-ingredient{float:left;font-weight:bold;margin-right:5px}

.node-recipe .field-name-field-quantity{float:left}

 

Image: