Drupal 7 Fields/CCK Beginner's Guide

P U B L I S H I N G community experience distilled Drupal 7 Fields/CCK Beginner's Guide Dave Poon Chapter No. 5 "File and Image Fields"

In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter NO.5 "File and Image Fields" A synopsis of the book s content Information on where to buy this book About the Author Dave Poon is a web developer and designer based in Sydney. He started his career as a freelance graphic and web designer in 1998 and works with web development agencies and medium sized enterprises. He graduated from Central Queensland University with a degree in Multimedia Studies and a Master's degree in IT. His love affair with Drupal began afterwards, and he now works for a variety of companies using Drupal. He is the founder and Technical Director of Erlango (http://erlango.com), a web product development startup, located in Sydney and Hong Kong, which uses Drupal as a framework to create web products and customized CMS. He is also the technical reviewer of Drupal Intranets with Open Atrium by Tracy Smith (Packt Publishing, 2011). I would like to thank my wife Rita (she should be my wife at the time of the printing of this book) for her endless patience and support. Without her, what I do would be meaningless. I would also like to thank my father for his continued encouragement. It is my great fortune to have worked with a great team of publishing professionals at Packt Publishing. I extend my sincerest gratitude to Usha Iyer, Neha Mallik, Vanjeet D'souza, Neha Shefty, and Michelle Quadros for their cooperation and help in writing this book.

Drupal 7 Fields/CCK Beginner's Guide Drupal is changing the way we create a feature and content-rich website. When I created my first web-based Content Management System (CMS) website in Drupal, I was amazed at the power of the Drupal CMS system. It allows me to rapidly create a high quality web application in a short period of time without sacrificing the application functionality. Drupal is not only an open source CMS, but is also a web application development framework. The extensible and flexible architecture of Drupal can be used for any size of business including freelancers, agencies, governments, universities, and enterprises. The White House, Digg, Fast Company, Sony Music, McDonald's, and Stanford University are all using Drupal for their sites. One of the most important milestones in Drupal was the Content Construction Kit (CCK). Most of this module has been integrated into Drupal 7 core. It is now called Field API. So when you install Drupal 7, it will come with this powerful module in core, and you can start to create custom fields for your site without downloading an extra module. The Field API module is not just the CCK module moved to the Drupal core. It has been completely rewritten and redesigned in Drupal 7. It has been optimized to run faster and work more efficiently. It provides you with more field type options, and it has given you more flexible options to allow you to create custom fields not only for content types, but also for comments, taxonomy, and more, that was not possible to achieve before Drupal 7. After reading this book, you will learn how the new Fields API module works, and understand the concept of fields and how to implement them. In this book, we will use Drupal 7 fields to build a fictional website from scratch. We will explore the power of fields within Drupal 7, then you can apply these techniques to your own projects. What This Book Covers Chapter 1, Nodes and Content Types in Drupal 7 explains the concept of nodes and content types in Drupal. It will explain the default content types that Drupal 7 core comes with. This chapter will also teach you how to create contents and create custom content types in Drupal. Chapter 2, Fields explains the concept of the new core module in Drupal 7 and demonstrates to how to add fields to content types, rearrange the order of fields, and reuse existing fields. It will also show how to add fields to comments, which is new in Drupal 7.

Chapter 3, Multiple Value Fields focuses on using field modules to creating multiple value fields for the site. We will look in detail at the new field type and other multiple value field type options such as Boolean, List, List (Numeric), and List (Text) field types. Chapter 4, Taxonomy focuses on using fields in taxonomy; at the beginning of the chapter we will learn what taxonomy is. We will then create custom vocabularies, and add taxonomy terms. We will also look at how to add fields to vocabularies and term references to content types. Chapter 5, File and Image Fields focuses on using the file and image fields modules. We will look at adding file and image fields to content types, configuring file and image field settings, using and creating image styles, as well as adding those fields to content types. Chapter 6, Managing Field Display focuses on field display management. We will look at how we control field display on the pages, format field display on teaser and full content pages, customize display settings, format comment fields display, and format vocabulary fields display. Chapter 7, Field Modules focuses on using field related modules. We will learn where to find the contributed modules and field related modules, we will also learn about downloading modules and installing them. We will also look at some of the most popular field related modules such as the Content Templates module and Field permission modules. Chapter 8, Field Level Permissions focuses on using the field permission module. We will discuss how to use this powerful module to control the permissions of fields. At the beginning of this chapter, we will start from scratch, by downloading the module, installing the module, and enabling it. Then we will continue with enabling permissions in fields, viewing field-level permissions report and configuring permissions in the PERMISSIONS administration page. Chapter 9, Theming Fields focuses on themes. We will discuss what theming is. We will look at where to find the template files for fields, creating template files, editing template files, creating CSS files, and theming field display. Chapter 10, A Database Perspective of Fields explains the difference between CCK fields and the Drupal 7 fields in the database. This chapter also shows you how to find the content types and fields we created in the example project from the database, and shows the interaction between Drupal and the database.

5 File and Image Fields Images play an important role in any website. Imagine an e-commerce website like Amazon without product images on product pages, a Facebook-like site where users cannot upload and share images with friends. The presence of images and the ease with which they can be handled has become 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 configuring file fields to content types Using file fields Adding image fields to content types Configuring image field settings Creating custom image styles

File and Image Fields 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. [ 120 ]

Chapter 5 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 enter "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. [ 121 ]

File and Image Fields 5. A new window will pop up which provides the field settings for the file field that we are 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: [ 122 ]

Chapter 5 [ 123 ]

File and Image Fields 7. We can leave the Label field as default as it will be filled automatically with the value we 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. [ 124 ]

Chapter 5 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. We can ignore the bottom part and click on the Save settings button to store all the values we have entered. [ 125 ]

File and Image Fields 12. Drupal will direct us back to the manage fields administration page with a message saying 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 display 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. [ 126 ]

Chapter 5 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 automatically when viewing the content? a. Enable the Enable Display Field option. b. Disable the Enable Display Field option. c. We cannot do this in Drupal. [ 127 ]

File and Image Fields 2. Which of the following statements is true? a. There is only one field widget available for the file field type. b. There are more than two field widgets available for the file field type. c. There is no field widget support in the file field type. 3. Can we limit the type of file being uploaded? a. Yes b. No 4. Which of the following statements is true? a. We need to install contributed modules that give us the ability to choose different types of progress indicators for file fields. b. We can enter a description of the uploaded file if we enable the Description field in the file field settings. c. We can 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. [ 128 ]

Chapter 5 2. This page displays a list of the existing content types. Because we would like to add recipe content, we click on the Recipe link to create new content. 3. On this page we can enter new recipe content. In the Title 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. [ 129 ]

File and Image Fields 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. [ 130 ]

Chapter 5 7. Drupal directs us to the full content view of the new content, and it displays a message saying Recipe Shortbread Biscuits has been created successfully. 8. In the full content view, we will see the output of the Title, Body, 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. [ 131 ]

File and Image Fields 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. [ 132 ]

Chapter 5 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 Description field is enabled by default b. The Description field is disabled by default c. The Description 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. [ 133 ]

File and Image Fields 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. [ 134 ]

Chapter 5 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. [ 135 ]

File and Image Fields 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 settings for the image field. The Upload destination option is the same as the file field settings, which provide us an option to decide whether image files should be public or private. In our case, we select Public files. The last option is the Default image field. We will leave this option for now, and click on the Save field settings button to go to the next step. [ 136 ]

2. This page contains all the settings for the image field. The most common field settings are the Label field, the Required field, and the Help text field. We will leave these fields as default. Chapter 5 3. The Allowed file extension section is similar to the file field we have already learned about. We will use the default value in this field, so we don't need to enter anything for this field. The File directory section is also the same as the settings in the file field. Enter "image_files" in this field. [ 137 ]

File and Image Fields 4. Enter "640" x "480" in the Maximum image resolution field and the Minimum image resolution field, and enter "2MB" in the maximum upload size field. 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 previous page we just saved, so we don't need to re-enter the values. Click on the Save settings button at the bottom of the page to store all the values we entered on this page. [ 138 ]

Chapter 5 8. After clicking the Save settings button, Drupal sends us back to the Manage fields setting administration page. Now the image field is added to the Recipe content type. [ 139 ]

File and Image Fields What just happened? We have added and configured an image field for the Recipe content type. We left the default values in the Label field, the Required field, and the Help text field. They are the most common settings in fields. The Allowed file extension section is similar to the file field that we have seen, which provides us with the ability to enter the file extension of the images which are allowed to be uploaded. The File directory field is the same as the one in the file field, which provides us with the option to save the uploaded files to a different directory to the default location of the file directory. The Maximum image resolution field allows us to specify the maximum width and height of image resolution that will be uploaded. If the uploaded image is bigger than the resolution we specified, it will resize images to the size we specified. If we did not specify the size, it will not have any restriction to images. The Minimum image resolution field is the opposite of the maximum image resolution. We specify the minimum width and height of image resolution that is allowed to be uploaded, not the maximum width and height of image resolution. If we upload image resolution less than the minimum size we specified, it will throw an error message and reject the image upload. The Enable Alt field and the Enable Title field can be enabled to allow site administrators to enter the ALT and Title attributes of the img tag in XHTML, which can improve the accessibility and usability of a website when using images. The Preview image style select list allows us to select which image style will be used to display while editing content. Currently it provides three image styles, thumbnail, medium, and large. The thumbnail image style will be used by default. We will learn how to create a custom image style in the next section. 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 image that is bigger than the maximum image resolution we specified, what will happen to the image? a. Nothing. b. The upload will be rejected. c. The image will be resized. [ 140 ]

Have a go hero adding an image field to the Cooking Tip content type Chapter 5 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. [ 141 ]

File and Image Fields 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. [ 142 ]

Chapter 5 6. The following page shows a preview of a sample image, and a preview of a sample image with an image style applied: 7. At the bottom of the page, we select Scale and crop, and then click on the Add button. [ 143 ]

File and Image Fields 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 image with the effect applied, and the effects we used are also listed in the table at the bottom of the page. [ 144 ]

Chapter 5 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. [ 145 ]

File and Image Fields 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 Image styles link is on the Structure page. b. The Image styles link is on the Add content page. c. The Image styles link is on the Configuration page. 2. Can we add multiple effects 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. [ 146 ]

Where to buy this book You can buy Drupal 7 Fields/CCK Beginner's Guide from the Packt Publishing website: http://www.packtpub.com/drupal-7-fields-cck-beginnersguide/book Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read our shipping policy. Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers. P U B L I S H I N G community experience distilled www.packtpub.com