Drupal Training Series Foundations for OSU Drupal 6 Generating Custom Content Types This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License What We’ll Be Covering… Anatomy of a Content Type • Data Input Form and Database Change Existing Content Type Settings • Workflow Settings – Ex. 01 Change Content Type Settings What CCK Is • How CCK Benefits Users Import a Custom Content Type • Form Re-Use – Ex. 02 Import Equipment Content Type – Ex. 03 Add Equipment Node – Lab Add Additional Equipment Nodes Create Custom Content • Deciding What You Need • Create an Employee Content Type – Ex. 04 Create Employee Content Type – Ex. 05 Add Employee Node – Lab Add Additional Employee Nodes • Create a Recipes Content Type – Ex. 06 Create Recipes Content Type – Ex. 07 Add Recipe Node – Lab Add Additional Recipe Nodes Summary Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 2 Getting Started As a reminder, to get to your personal development site go to: http://drupaldev.cws.oregonstate.edu/training/<yourONIDname>/login From there, log in with your ONID information. After logging in, please open a second tab in your browser and go to CWS Training at http://oregonstate.edu/cws/training Locate the name of this workshop in the list and click it. This will take you to a page describing the course with download links at the bottom of the page. Download the lab materials to your desktop and unzip them. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 3 Assignment The pre-class assignment required the development of a set of Taxonomy Vocabularies. These vocabularies will be attached to the custom content types that we’ll develop through the course of this workshop. These vocabularies will be a necessary part of both this workshop and future workshops related to Views. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 4 Anatomy of a Content Type By this point in your Drupal endeavors, you should be fairly knowledgeable about content types from the user interface (the UI or “front-end”). Now though, since we’ll actually be building some custom content types, it’s time to start understanding a little bit about what goes on in the background. Database Server Web Server Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 5 Anatomy of a Content Type: Database Records Employees ID Last Name First Name Department 965894 Doe Jane HR 965895 Blow Joe Production Bank Account 85-265 Date Time Type Amount 08/23/2009 10:23 am Deposit + $400.00 08/23/2009 12:30 pm Debit - $15.72 Electric Bill Account 923-12-01 Due Date Name Address Amount 09/15/2009 John Smith 47 Main St. $125.64 A Drupal website is actually the front end of a very powerful, industrial-sized MySQL database. It’s this database, combined with a dynamic programming language known as PHP, that allows your site to respond and display realtime changes according to various events. Most of us have, at some point, seen some type of database record. Let’s take a look at some that you’re probably familiar with. Note that all of these items are organized inside of a table. Each row of the table is a unique record and is identified by some form of a unique id number or code. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 6 Anatomy of a Content Type: Node Type Data Every time you create or edit a node within Drupal, you’re actually entering or updating data in the database. Most of the content types we work with – such as Announcement, Book, or Poll - have their own tables inside of this big database. Each time you create a new node – you’re actually creating a new record in the respective table. All of these tables are then related together into the overall system and given a Node ID. This Node ID is the unique identifier of a particular page of content. This is what a MySQL database for a Drupal site looks like when using phpMyAdmin – a database management tool. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 7 Anatomy of a Content Type: Why Is This Important? Database Knowing a little bit about the supporting database behind your system is important – because through the course of this workshop, we’ll be doing things that will, ultimately, affect its structure. We’ll also be doing things that will automatically affect the directory structure of your site. File System This is where the need for a system mindset really begins to manifest. It’s now getting to the point where random changes can drastically affect the display, and possibly even the integrity, of your site. User Interface Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 8 Anatomy of a Content Type: Content Type Settings Up to this point, we’ve all encountered some small annoyances with some of the existing content types: For example: • Content revision tracking must be manually toggled for all content types • Some content types have the Promoted to Front Page settings enabled by default • Some content types are set to either Publish automatically when saving, while others are set to or Save as Draft when saving Just like with most other Drupal features, content types can be configured as well, if desired. By default, in the OSU Drupal 6 installation, the Administrator and Advanced Author are the only roles who can do this. We’ll start by changing the Create new revision default option on the Book page content type. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 9 Ex. 01 Change Content Type Settings 1 You may not see a need to keep revisions of some content types, such as Announcements or Polls. Other types, though, such as Book pages may involve deeper and more complex levels of development – so automatic revisions may be desired. To change the Create New Revision option, do the following: 1. Go to Administer > Content management > Content types 2. Locate the Book page row and click on its edit link 2 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 10 Change Content Type Settings: Edit Workflow Settings 1 2 Once within the Book page content type settings, do the following: 1. Scroll down the page and click on the Workflow settings field set to expand it. 2. Check the Create new revision checkbox. 3. Click on the Save content type button at the bottom of the page You’ll receive a confirmation message that the change has been made, but it won’t be evident until you open up the Book page content type. 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 11 Change Content Type Settings: View Revision Setting Change Let’s see how this settings change translates into our Book page content type: 1. Go to your Cooking Companion > Methods > Cooking > BBQ&A page and click on its Edit tab. 1 2 2. From your lab materials, copy the contents of ex-01.doc and paste it over the original content on your BBQ&A page. Insert your choice of images, if desired. 3. Scroll down the page to the Revision information fieldset, open it, and note how it’s checked. 3 4. Click the Save button. 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 12 Change Content Type Settings: Revision Tab Visible After saving, you’ll see that a Revisions tab appears at the top of your page. From this point on, any Book page that you create will automatically save all revisions. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 13 Change Revision Settings: Now You Do It Go to Administer > Content management > Content types and change the Create New Revision option for the following content types: • Page • Story For both content types: Workflow Settings = check the Create new revision checkbox Click the Save content type button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 14 Revisiting the Site Map Remember our site map from back during the Developing Site Structures workshop? Cooking Methods Equipment Book Now it’s finally time to finish it up. CCK Handling Methods Methods Conversions Book Book Book Cooking Companion We’ll be adding three brand new content types to our site: Book • Equipment • Employee Food for Thought • Recipe Home Page To do this, we’ll need to use a module called CCK. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 15 Employee Recipe CCK CCK Content Construction Kit (CCK) Module The Content Construction Kit, or CCK, module is one of the most well-developed and extended modules available for Drupal. In fact, this contributed module is so popular and useful that it’s slowly being integrated into Drupal as a core feature. CCK allows a permitted user the ability to add custom fields to any content type, or to create completely custom content types altogether. In the OSU Drupal 6 world, CCK is commonly used to create custom content types for various things such as employees, courses, and publication information. Another nice feature is the ability to actually import existing CCK types into your Drupal site as well. We’ll start with this, as a little bit of a warm up. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 16 Form Re-Use Code re-use is a common occurrence in programming. If something has been proven to work well, is stable, and efficient there’s typically little desire to reinvent the wheel. The same can hold true for objects as well, such as forms. OSU Drupal 6 has the capability of both importing and exporting CCK types. When available, form re-use can save a great deal of time and effort. Let’s take a look at how to import a CCK type. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 17 Ex. 02 Import Equipment Content Type To import the Equipment custom content type, do the following: 1. Click on Administer > Content management > Content types > Import tab 2. In the Content type field, leave the default set at <Create> 3. In the Import data field, paste in the code found in the equipment.txt file, within your lab materials. 4. Click the Import button at the bottom of the page. 1 2 3 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 18 Import Equipment Content Type: Set Permissions Before you can fully use your Equipment content type, Permissions must be set for it. To set permissions, do the following: 1. Go to Administer > User management > Permissions. 2. Scroll down the page until you find the node module group. Within this group, set the following permissions: 1 2 node module adv. author author create equipment content x x x delete any equipment content x x x delete own equipment content x x x edit any equipment content x x x edit own equipment content x x x 3. Click the Save permissions button at the bottom of the screen. 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws admin 19 Import Equipment Content Type: Add Equipment Tag List Remember the extra Tag Lists we created way back in the Developing Site Structures workshop? Now it’s time to put one of them to use: 1. Go to Administer > Content management > Taxonomy, locate the Equipment vocabulary in the list, and click on its edit vocabulary link. 2 2. In the Content types fieldset, check the Equipment content type. 3. Click on the Save button. 1 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 20 Ex. 03 Create an Equipment Node So now it’s time to explore the newly imported Equipment content type: 1. Click on the Create content > Equipment link. You’ll discover that this form looks a bit different than ones that you are currently accustomed to. In addition to the standard fields and tag list, there exist the following custom fields: a b a. Image Upload field b. Description Field c. Maintenance Field c Since we have some new and different features here, let’s take this one a bit slow and examine what’s going on. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 21 Create an Equipment Node: Enter Text Information 1 In the Equipment content type form, enter the standard information first: 1. Name field = Casserole Dish 2 2. Equipment tag list = Bakeware 3. Description field = paste lab materials – ex-03.doc corresponding Description Note: This field is actually the Body field, just with a different label. It works the same way as you’re accustomed to. Remember to change the Input format to Full HTML. 3 4. Maintenance field = paste lab materials 4 – ex-03.doc corresponding Maintenance Note: This field is a custom text field that has been added, but it works the same way as you’re accustomed to. Remember to change the Input format to Full HTML. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 22 Create an Equipment Node: Exploring the Imagefield Widget Now let’s check out the Image field, which uses a custom field type generated by the Imagefield widget. 1. Click on the Browse button. 2 1 2. In your File Uploader, navigate to: ..lab > ex-03 > images > dish-casserole.png file and then click on the Open button. 3 3. Click the Upload button. Note: This will immediately open up an area with a thumbnail of your image and metadata fields to describe your image 4 5 4. Description = Casserole Dish 5. Alternate Text = casserole-dish 6 6. Title = Casserole Dish Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 23 Create an Equipment Node: Completed Equipment Node Preview and Save your new content. You may have noticed a few things... • The image label isn’t really necessary • A menu link was not created • The text does not flow around the image For the label issue, we’ll address that right now. We’ll address the other concerns (and a lot more) when we get to the upcoming Views workshop. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 24 Create an Equipment Node: Edit Equipment Node Display 1 To edit the labels on your node display, do the following: 1. Go to Administer > Content management > Content types and click on the Equipment manage fields link. 2 2. Once inside the Equipment configuration panel, click the Display fields tab. 3. On the Display fields screen, in the Label column, select <Hidden> for the Image row. 3 4. Click the Save button. 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 25 Create an Equipment Node: View Edited Equipment Node Now, take a look at your new Equipment node by going to Administer > Content management > Content and clicking on the Casserole Dish title. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 26 Create an Equipment Node: Now You Do It Over the next 10 minutes, go to Create content > Equipment and create a few more Equipment nodes using the following information: Lab Materials: • Text = ..lab > ex-03 > ex-03.doc • Photos = ..lab > ex-03 > ex-03-images folder Note: You may not be able to create all 10 items in the given time limit – this is expected. Extra content has been provided for you to practice with on your own at a later time. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 27 Create an Equipment Node: Equipment Image Uploads You might be wondering where your equipment image was uploaded to. To find out, click on the My account > File browser tab. You’ll note that a new equipment-images subdirectory exists in sites/default/files and it contains the image we just uploaded. You can manage these files just like any others in your file browser. We’ll learn how to set this up ourselves in just a few minutes. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 28 Planning Custom Content Types Before rushing headlong into creating a custom content type, it’s a good idea to have a general idea of what you want to use the form for. CCK isn’t really intended for items of a singular nature. It’s meant for content that has a format to it – items that possess similar types of information and need to look consistent in a group of similar content. We’ll use an Employee information form as an example. On an employee data entry form, there will exist some general form data that always applies to each employee. What are some examples of this type of data? • ? • ? • ? • ? Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Other, information may also be included that may or may not apply to each employee. What are some examples of this type of data? • • • • • 29 ? ? ? ? ? Planning Custom Content Types: Required vs. Optional Information Data that is consistent for all employees should be considered Required. For example: • All employees will possess a First Name and a Last Name • All employees have some sort of Position at their place of employment Data that is not consistent for all employees should be considered Optional. For example: • Not every employee may have their own office phone • Not every employee may want their photo published • • • • Required Information First Name Last Name Department Position Optional Information • • • • • Biography Experience Photo E-mail Phone Number Note: As a general rule of thumb, it’s a good idea to avoid publishing personal information, such as your home address, personal phone number, etc on a web site. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 30 Planning the Employee Content Type: Understanding Data Types Now that we know what fields we want on our Content Type form, we should consider what data types these fields will hold. A data type is a set of data values that possess predefined characteristics. Following are some common data types that you may be familiar with: • Text • Number • Image So, now we should refine our data field lists a bit more by including the type of data that will be involved with each field. • • • • Optional Information Required Information First Name – Text field Last Name – Text field Department – Selection box Position – we’ll use Taxonomy for this Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws • • • • • 31 Biography – Text area Experience – Text area Photo – Image field E-mail – Text field Phone Number – Text field Planning the Employee Content Type: Putting It All Together It’s usually easiest to put these items in a table: Field Required? Data Type First Name X Text field Last Name X Text field Department X Selection box Position X Taxonomy Biography Text area Experience Text area Photo Image field E-mail Text field Phone Text field Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 32 Ex. 04 Create Employee Content Type 1 Now that we’re prepared, it’s time to create the Employee custom content type: 1. Go to Administer > Content management > Content types. 2. Take a good look at the table as it currently exists, as this table will change once your new content type is created. Note the cells named Name, Type, and Description. 3. Click on the Add content type tab. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 3 2 33 Create Employee Content Type: Configure Identification Settings The Identification fieldset is where you set all name and description information for this particular content type: 1. Name field = Employee This information should be human-readable (may contain mixed case and spaces). It will be displayed on the main content type list. 1 2. Type field = employee 2 This information must be machine-readable (all lowercase letters and/or numbers, and underscores only). It is used to create a data table in the database. 3 3. Description = Employee information This information will appear on the main Create content page Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 34 Create Employee Content Type: Configure Submission Form Settings The Submission form settings fieldset is where you set custom information for default fields used: 1. Title field label field = Employee 1 This is the label you want to use for the Employee field. 2 2. Body field label field = Biography 3 This is the label you want to use for the Biography field. 3. Minimum number of words field = 0 4 Leave this at the default setting, for now. 4. Explanation/Guidelines field = This content type is intended for work purposes only. Please avoid entering personal contact information. This is a place where you can add any special instructions to your contributors regarding use of this content type. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 35 Create Employee Content Type: Configure Workflow Settings The Workflow settings fieldset is where you determine the processing of your content type as well as the use of add-on features: 1. Default options group = uncheck Promoted to Front Page option 1 2. Multilingual support group = Disabled 2 3. Attachments group = Disabled field 4. Click the Save content type button Once saved, you’ll be redirected back to the main Content types screen and your new content type will be added to the list. 3 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Now it’s time to add some custom fields… 36 Create Employee Content Type: Create First Name Text Field To edit your new Employee content type, click on the manage fields link in its row. We have seven more fields to add, so we’re going to do this one by one, as we’ll be dealing with some different data types. We’ll start with the First name field. 1. Label field = First name 2. Field name field = first_name 3. Data type field = Text 4. Form element field = Textfield 5. Click the Save button You will be redirected to the First name field configuration screen. 1 2 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 37 3 4 Create Employee Content Type: Configure First Name Text Field To configure the First name field, do the following: 1. Size of textfield field = 20 1 2 2. Help text field = Enter employee’s first name 3. Required check box = checked 4. Maximum length field = 25 5. Click the Save field settings button 3 After saving, you’ll be redirected back to the Manage fields panel to add the next field. 4 Using the same method as used for the First name field, now create the Last name field. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 38 Create Employee Content Type: Create Department Selection Box There are a couple of different departments included in our Food For Thought company. One way to provide options for your contributors to select from is to create a selection box. To create a Department selection box, do the following: 1. Label field = Department 2. Field name field = department 3. Data type field = Text 4. Form element field = Select list 5. Click the Save button After saving you’ll be redirected to the Department field configuration screen. 1 2 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 39 3 4 Create Employee Content Type: Configure Department Selection Box Now configure the Department field: 1. Help text field = Select the department associated with this employee. 1 2. Required checkbox = checked 3. Maximum length field = 30 4. Allowed values list field = enter the following, one per line: 2 3 Communications Research & Development 5. Click the Save button After saving you’ll be redirected to the Manage fields main screen. 4 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 40 Create Employee Content Type: Create Experience Text Area A text area differs from a text box in that a text area has multiple lines – it’s a larger space. To create the Experience text area, do the following: 1. Label field = Experience 2. Field name field = experience 3. Data type field = Text 4. Form element field = Text area 1 2 5. Click the Save button You will be redirected to the Experience field configuration screen. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 41 3 4 Create Employee Content Type: Configure Experience Text Area To configure the Experience text area, do the following: 1 2 3 1. Rows field = 10 2. Help text field = Type or paste information regarding the employee’s work/professional achievements and experience. Please use bulleted text. 3. Text processing option group = Filtered text 4. Click the Save button After saving you’ll be redirected to the Manage fields main screen. 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 42 Create Employee Content Type: Create Photo Field Creating an image field is a little elusive as it’s not listed as you would expect it to be. To create the Photo field, do the following: 1. Label field = Photo 2. Field name field = employee_photo 3. Data type field = File 4. Form element field = Image 5. Click the Save button After saving you’ll be redirected to the Photo field configuration screen. 1 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 43 2 3 4 Create Employee Content Type: Config Photo Field – Employee Settings Images require quite a bit of configuration, so we’ll take this part section-by-section, starting with the Employee settings fieldset: 1. Help text field = Upload employee photo. 1 2. Permitted upload field = default 3. Maximum resolution field = 250x250 Note: all images used in the lab materials have been resized to fit a 250 x 250 field at 72 dpi. Remember, the larger an image is, the longer it takes for it to load on the page. 2 3 4. Minimum resolution field = default 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 44 Create Employee Content Type: Config Photo Field – Path Settings The Path settings fieldset is where you can name a particular directory into which your content type’s images will be automatically uploaded. To set the File path, do the following: 1. File path field = employee-images 1 Type the path in exactly as shown with no preceding or trailing slashes. This will create an employee-images directory in your sites/default/files path into which your employee images will be uploaded. The large token list underneath the File path field doesn’t quite apply at this stage yet so don’t be concerned with it. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 45 Create Employee Content Type: Config Photo Field – File Size Restrictions Images can be memory intensive. Most contemporary digital cameras are set at a very high resolution, by default – much higher than is needed (or desired) for a web page. Use the File size restrictions fieldset to help manage the size of uploaded image files: 1 1. Max upload size per file field = 150KB 2 This limits the size of a file when it’s uploaded. 2. Max upload size per node field = 1MB This limits the total size of all combined images on a particular node. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 46 Create Employee Content Type: Config Photo Field – ALT Text Settings ALT text (Alternative Text) serves two purposes. If a link to an image is broken, the ALT text will provide a text description for the viewer. Additionally ALT text is also read by screen readers, which are utilized by those with vision impairment. To configure the ALT text settings, do the following: 1. Enable custom ALT text box = check 1 2 This allows a contributor to provide custom ALT text, if desired. 2. Default ALT text field = food-forthought-image This will put a default ALT text entry in if a custom one is missed. The large token list underneath the Default ALT text field doesn’t quite apply at this stage yet so don’t be concerned with it. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 47 Create Employee Content Type: Config Photo Field – Title Text Settings 1 2 3 Title text serves as a tool-tip when a user hovers a mouse over an image. This information can be handy in many cases: as directions to a user, as captions, or as credits for the image creator. To configure the Title text settings, do the following: 1. Enable custom Title text box = check This allows a contributor to provide custom Title text, if desired. 2. Input type = textfield 3. Default Title text field = leave blank The large token list underneath the Default Title text field doesn’t quite apply at this stage yet so don’t be concerned with it. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 48 Create Employee Content Type: Config Photo Field – Global Settings The Photo field Global settings are as follows: 1. Required check box = default 1 2. Number of values field = default 3. List field option group = default 4. Description field = check Enabled 5. Click the Save field settings button That’s it for the image configuration. There are still a couple more fields to add, though. 2 3 4 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 49 Create Employee Content Type: Now You Do It Two final text fields need to be created to complete our Employee content type, an Email field and a Phone field. Using the specifications provided below, create and configure the final two fields for your content type. Remember, to get to the Employee content type to edit it, go to Administer > Content > Content types > Employee manage fields link. E-mail field Phone field Label field = E-mail Label field = Phone Field name field = employee_email Field name field = employee_phone Type of data field = Text Type of data field = Text Form element field = Text field Form element field = Text field Configuration Configuration Size of textfield field = 60 Size of textfield field = 14 Maximum length field = 60 Maximum length field = 14 Click Save field settings button Click Save field settings button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 50 Create Employee Content Type: Field Ordering All necessary fields have been created. Now click on the Manage fields tab and lets apply some order to the fields. Ordering your fields works in the exact same way that ordering menu items does – just grab on the little cross handle and move the item to where you want it to go. When finished, click the Save button. That’s it for the configuration, but remember, we still have to add our tag list and set the permissions for this content type. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 51 Create Employee Content Type: Add Tag List To add the Position tag list to the Employee content type, do the following: 1 1. Go to Administer > Content management > Taxonomy, locate the Position row and click on its edit vocabulary link. 2. Scroll down the page to the Content types fieldset and check the Employee check box. 3. Click the Save button. 2 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 52 Create Employee Content Type: Set Permissions To set the permissions for the Employee content type, do the following: 1 1. Click on the Administer > User management > Permissions link. 2. Scroll down the page until you find the node module group. Within this group, set the following permissions: Adv. Author Admin Create employee content x x x Delete any employee content x x x Delete own employee content x x x Edit any employee content x x x Edit own employee content x x x 3. Click the Save permissions button at the bottom of the screen. 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Author 53 Create Employee Content Type: View New Employee Content Type Let’s take a minute to examine what’s been built to date as quite a bit of work has been put into this form so far. Click on Create content > Employee to open the content form. Note the new features and different order of the fields present on the custom content type. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 54 Ex. 05 Create Employee Node It’s now time to create the first Employee node. You will need to use the following lab materials: • Text = ..lab > ex-05 > ex-05.doc • Photos = ..lab > ex-05 > ex-05-images folder 1. On your Employee content type, enter the following information: Employee field = Rasheed Abdul Photo field = abdul-rasheed.png First name field = Rasheed Last name field = Abdul Position field = Chef - Executive Department field = Research & Development E-mail field = rasheed.abdul@fft.com Phone field = 541-555-1000 Biography field = paste in materials, Full HTML Experience field = paste in materials, Full HTML Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 55 Create Employee Node: View Completed Employee Node You may notice that the layout on this node isn’t exactly as you may wish. It’s okay – we’re not quite ready to deal with the display side of things. In fact, we’re not even creating menu links for these nodes – these subjects will be covered quite extensively in the future Views workshop. Right now, our concern is getting the content in the site and ensuring that it’s entry is consistent in form. If you would like to edit the label display, though, feel free to do so. Do you remember how? Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 56 Create Employee Node: Now You Do It Over the next 10 minutes, go to Create content > Employee and create a few more Employee nodes using the following: Lab Materials: • Text = ..lab > ex-05 > ex-05.doc – Use Full HTML for the Biography and Experience text areas • Photos = ..lab > ex-05 > ex-05-images folder Note: You may not be able to create all 10 items in the given time limit – this is expected. Extra content has been provided for you to practice with on your own at a later time. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 57 Planning the Recipe Content Type: Taking Stock We’re now at the major point of our website – the recipes. We’ve already laid some groundwork for this particular content type in previous workshops and assignments. The Recipes content type will require the following four, fully built vocabularies: • Ethnicity • Food Groups • Meal • Meal Course We’ll be attaching these vocabularies to our new Recipe content type after it’s created. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 58 Planning the Recipe Content Type: Determining Fields What particular fields should exist on our Recipe content type? Can you think of any that should be required? Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Field Required? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 59 Planning the Recipe Content Type: Determining Data Types What about data types? What kind of data do you think each of the fields will hold? Field Required? Data Type Title X ? Photo ? Ingredients X ? Directions X ? Prep Time X ? Cook Time X ? Servings X ? Calories Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws ? 60 Planning the Recipe Content Type: Completed Form Fields Below is all we need to start building the Recipe content type. We’ll work together on a few items because they’re difficult or new: Photo, Ingredients, and Calories. You’ll build the rest in lab. Field Required? Data Type Title X Text field Photo Image field Ingredients X Text – multiple field Directions (Body) X Text area Prep Time X Text field Cook Time X Text field Servings X Integer (Number) Calories Group Total Calories Integer (Number) Fat Calories Integer (Number) Carb Calories Integer (Number) Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 61 Ex. 06 Create Recipe Content Type To create the Recipe content type, first we a have to add the content type: 1. Go to Administer > Content management > Content types and click b on the Add content type tab. 2. Enter the following information: c a. Name field = Recipe b. Type field = recipe c. Body field label field = Directions d. Explanation field = Enter all recipe information here. e. Promoted to Front Page option = Uncheck f. Multilinqual support option = Disabled g. Attachment option = Disabled h. Click the Save content type button d e f g h Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 62 Create Recipe Content Type: Create Photo Field 1 2 3 4 You will be redirected back to the main content types screen. Click on the manage fields link in the Recipe row to add some more fields. We’ll start with the Photo field. To create the Photo field, do the following: 1. Label field = Photo 2. Field name field = recipe_photo 3. Data type field = File 4. Form element field = Image 5. Click the Save button After saving you’ll be redirected to the Photo field configuration screen. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 63 Create Recipe Content Type: Configure Photo Field – Recipe Settings We’ve done this once, but there’s quite a bit to configuring images, so we’ll walk through it again, section-by-section, starting with the Recipe settings fieldset: 1 1. Help text field = Upload recipe photo. 2. Permitted upload field = default 3. Maximum resolution field = 300x200 2 Note: all images used in the lab materials have been resized to fit a 300 x 200 field at 72 dpi. Remember, the larger an image is, the longer it takes for it to load on the page. 3 4 4. Minimum resolution field = default Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 64 Create Recipe Content Type: Configure Photo Field – Path Settings 1 To set the File path, do the following: 1. File path field = recipe-images Type the path in exactly as shown with no preceding or trailing slashes. This will create a recipe-images directory in your sites/default/files path into which your employee images will be uploaded. The large token list underneath the File path field doesn’t apply at this stage so don’t be concerned with it. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 65 Create Recipe Content Type: Configure Photo Field – File Size Restrictions To set the File size restrictions enter the following: 1. Max upload size per file field = 150KB 1 This limits the size of a file when it’s uploaded. 2. Max upload size per node field = 1MB 2 This limits the total size of all combined images on a particular node. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 66 Create Recipe Content Type: Configure Photo Field – ALT Text Settings To configure the ALT text settings, do the following: 1. Enable custom ALT text box = check 1 2 This allows a contributor to provide custom ALT text, if desired. 2. Default ALT text field = recipe-image This will put a default ALT text entry in if a custom one is missed. The large token list underneath the Default ALT text field doesn’t apply at this stage so don’t be concerned with it. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 67 Create Recipe Content Type: Configure Photo Field – Title Text Settings To configure the Title text settings, do the following: 1 2 1. Enable custom Title text box = check This allows a contributor to provide custom Title text, if desired. 2. Default Title text field = leave blank The large token list underneath the Default Title text field doesn’t apply at this stage so don’t be concerned with it. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 68 Create Recipe Content Type: Configure Photo Field – Global Settings The Photo field Global settings are as follows: 1. Required check box = default 1 2 2. Number of values field = default 3. List field option group = default 3 4. Description field = check Enabled 5. Click the Save field settings button 4 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 69 Create Recipe Content Type: Create Ingredients Multiple Text Field 1 2 3 4 Sometimes, you may encounter a need to enter multiple text items, one each to a field. To create a multi-text field for the Ingredients item, do the following: 1. Label field = Ingredients 2. Field name field = ingredients 3. Data type field = Text 4. Form element field = Text field 5. Click the Save button After saving you’ll be redirected to the Ingredients field configuration screen. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 70 Create Recipe Content Type: Configure Ingredients Multiple Text Fields To configure the Ingredients field, do the following: 1. Size of textfield field = 80 1 2. Help text field = Enter ingredients. To add additional lines, click the Add More button. 2 3. Required check box = checked 4. Number of values field = Unlimited 3 5. Click the Save field settings button 4 After saving, you’ll be redirected back to the Manage fields panel to add the next field. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 71 Create Recipe Content Type: Create Calorie Group CCK will allow you to create Groups (sometimes also known as fieldsets) into which you can place several related fields and/or option buttons. These Groups can be set to expand and collapse. To create the Calorie group, do the following: 1. New group field = Calories 1 2 2. Field name field = calories 3. Click the Save button After saving the Calories group will go to the field list at the top of the screen. 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 72 Create Recipe Content Type: Configure Calorie Group To configure the Calorie group, click on its corresponding Configure link and do the following: 1. Style option = collapsed 2. Description field = This recipe contains the following caloric breakdown. 1 3. Click the Save button After saving, you’ll be redirected back to the Manage fields panel to add the next field. We’ll create a field to go inside of this group. 2 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 73 Create Recipe Content Type: Create Total Calorie Field 1 2 3 4 Sometimes, you may encounter a need to enter multiple text items, one each to a field. To create a multi-text field for the Ingredients item, do the following: 1. Label field = Total Calories 2. Field name field = total_calories 3. Data type field = Integer 4. Form element field = Text field 5. Click the Save button After saving you’ll be redirected to the Total Calories field configuration screen. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 74 Create Recipe Content Type: Configure Total Calories Fields To configure the Total Calories field, do the following: 1 1. Help text field = Enter the total number of calories this recipe contains. 2. Minimum field = 0 3. Suffix field = calorie| calories Note: enter a space before the word ‘calorie’ and a space between the vertical pipe and the word ‘calories’ for proper display. 4. Click the Save field settings button 2 After saving, you’ll be redirected back to the Manage fields panel to add the next field. You will need to assign this particular field to the Calories group. 3 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 75 Create Recipe Content Type: Assign Total Calories Fields to Calories Group Once you’ve returned to the Manage fields screen, to assign the Total Calories field to the Calories group, just grab the move icon and drag it under and to the right of the Calories row and then click the Save button. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 76 Create Recipe Content Type: Now You Do It – Add Calorie Group Fields Two final fields need to be created, configured, and added to the Calories group a Fat Calories field and a Carb Calories field. Using the specifications provided below, create and configure the final two fields for this group. Fat Calories field Carb Calories field Label field = Fat Calories Field name field = fat_calories Type of data field = Integer Form element field = Text field Configuration Label field = Carb Calories Field name field = carb_calories Type of data field = Integer Form element field = Text field Configuration Help text field = Enter the number of fat calories this recipe contains. Minimum field = 0 Suffix field = calorie| calories Help text field = Enter the number of carbohydrate calories this recipe contains. Minimum field = 0 Suffix field = calorie| calories Note: enter a space before the word ‘calorie’ and a space between the vertical pipe and the word ‘calories’ for proper display Note: enter a space before the word ‘calorie’ and a space between the vertical pipe and the word ‘calories’ for proper display. Click Save field settings button Drag field under Total Calories row Click Save button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Click Save field settings button Drag field under Carb Calories row Click Save button 77 Planning the Recipe Content Type: Taking Stock Let’s take stock of where we’re at right now regarding the creation of all of the fields on our form. Field Required? Data Type Title X Text field Photo Image field Ingredients X Text – multiple field Directions (Body) X Text area Prep Time X Integer (Number) Cook Time X Integer (Number) Servings X Integer (Number) Calories Group Total Calories Integer (Number) Fat Calories Integer (Number) Carb Calories Integer (Number) Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 78 Create Recipe Content Type: Now You Do It – Add Final Integer Fields Three Integer fields need to be created and configured to complete the Recipes content type. Using the specifications provided below, create and configure the final fields. Prep Time field Cook Time field Servings field Label field = Prep Time Label field = Cook Time Label field = Servings Field name field = prep_time Field name field = cook_time Field name field = servings Type of data field = Integer Type of data field = Integer Type of data field = Integer Form element field = Text field Form element field = Text field Form element field = Text field Configuration Configuration Configuration Help text field = Enter the approximate time, in minutes, to prepare this recipe. Help text field = Enter the approximate time, in minutes, to cook this recipe. Help text field = Enter the number of servings this recipe provides. Required checkbox = checked Required checkbox = checked Minimum field = 1 Minimum field = 0 Minimum field = 0 Suffix field = serving| servings Suffix field = minute| minutes Suffix field = minute| minutes Note: enter a space before the word ‘minute’ and a space between the vertical pipe and the word ‘minutes’ for proper display Click Save field settings button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Note: enter a space before the word ‘minute’ and a space between the vertical pipe and the word ‘minutes’ for proper display Click Save field settings button 79 Required checkbox = checked Note: enter a space before the word ‘serving’ and a space between the vertical pipe and the word ‘servings’ for proper display Click Save field settings button Create Recipe Content Type: Order Items On Manage Fields List Field We’re almost there. Now order the fields on the Manage fields list, according to the order established on our table. When you’re done dragging items to their proper location, click the Save button. All that remains is adding the vocabulary tag lists and setting permissions. Let’s see if you remember how to do this… Title Taxonomy Module Form Photo Ingredients Directions (Body) Prep Time Cook Time Servings Calories Total Calories Fat Calories Carb Calories Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 80 Create Recipe Content Type: Add Tag Lists and Set Permissions Do you remember how to add tag lists and set permissions? Use this cheat sheet to walk through it. To add the tag lists: To set permissions: Go to Administer > Content management > Taxonomy Go to Administer > User management > Permissions Click the edit vocabulary link for the Ethnicity vocab. Edit the following permissions in the node module group. In the Content types fieldset, check the Recipe box Click the Save button Now repeat this exact same process for the remaining vocabularies: – Food Groups admin adv. author author Create recipe content x x x Delete any recipe content x x x Delete own recipe content x x x Edit any recipe content x x x Edit own recipe content x x x – Meal – Meal Course Click the Save permissions button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 81 Create Recipe Content Type: View New Recipe Content Type Multiple Tag Lists Click on Create content > Recipe to open the content form and take a look. It’s a large content type form. Image Field Note the new features and different order of the fields present on this particular custom content type. Multiple Item Field Field Group Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 82 Ex. 07 Create Recipe Node Finally! It’s now time to create the first Recipe node. You’ll need to use the following lab materials: •Text = ..lab > ex-07 > ex-07.doc •Photos = ..lab > ex-07 > ex-07-images folder On your Recipe content form, enter the following information: Title field = Quick Lasagna Meal Course tag = Entree Meal tag = Dinner Food Groups tag = Cheese, Pasta, Beef, Pork, Tomato Photo field = casserole-lasagna-quick.png Directions field = paste in materials, Full HTML Prep Time field = 20 Cook Time field = 40 Servings field = 8 Total Calories field = 320 Fat Calories field = 108 Carb Calories field = 128 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 83 Create Recipe Node: View Completed Employee Node Click the Save button when you’re done and take a look at the finished node. Again, the layout on this node isn’t perfect. We’ll tackle node display in the following Views workshop. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 84 Create Recipe Node: Now You Do It For the remainder of this workshop, go to Create content > Recipe and create a few more Recipe nodes using the following: Lab Materials: • Text = ..lab > ex-07 > ex-07.doc – Use Full HTML for the Biography and Experience text areas • Photos = ..lab > ex-07 > ex-07-images folder Note: You may not be able to create all 10 items in the given time limit – this is expected. Extra content has been provided for you to practice with on your own at a later time. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 85 Summary You’ve made it through your first advanced OSU Drupal 6 workshop! In this workshop you learned: • The different components that are used to create a node, including some very basic database structure concepts • How to change the settings on existing content types • How to import an existing CCK type • How to create a CCK type • How to add and configure several different widgets used in CCK This is quite a bit for one day. You’re strongly encouraged to continue regularly visiting and working within your training site. At this point, the more time you spend practicing, the more you’ll understand and also discover on your own. Stay tuned for our next training installment, where we take what we built in CCK and further refine it using the Views module. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 86 Conclusion This completes the OSU Drupal 6 Generating Custom Content Types tutorial. For additional tutorials, please visit CWS Training at: http://oregonstate.edu/cws/training To view and register for all OSU Drupal 6 Workshops, visit the Professional Development Central Registration site at: http://oregonstate.edu/cws/register To submit a Help Ticket or make a Site Request on-line, go to: http://oregonstate.edu/cws/contact Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 87