Diggin' Drupal Gardens 503: Developing Site Structures This work is licensed under a Creative Commons Attribution-NonCommercialShareAlike 3.0 United States License.
Download ReportTranscript Diggin' Drupal Gardens 503: Developing Site Structures This work is licensed under a Creative Commons Attribution-NonCommercialShareAlike 3.0 United States License.
Diggin' Drupal Gardens 503: Developing Site Structures This work is licensed under a Creative Commons Attribution-NonCommercialShareAlike 3.0 United States License What We’ll Be Covering… Getting Started Gather Materials Understanding Systems Overview Planning Site Set-Up Taxonomy Overview Taxonomy Drill-Down Create Vocabularies Vocabulary Use Pathauto Overview Overview Create Configure Site Change Theme Create Home Page Change About Page Site Information Settings Summary Conclusion Books Overview Outline a Book Build a Book Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 1 Aliases Getting Started: Your Lab Materials Please use Mozilla Firefox as your browser for this workshop. Log in to: http://discoverdrupal.drupalgardens.com After logging in to the training site, to gather your lab materials for this workshop, do the following: 1. Open another tab in your browser 2. In your new tab, go to http://oregonstate.edu/cws/training 3. Look in the lower right and click on the Training Materials graphic – this will take you to the page where all training materials for all CWS Drupal classes are distributed 4. Filter for the 500 – Diggin’ Drupal Gardens materials 5. Locate the 503 Developing Site Structures row and click on the Lab link – download the lab to your desktop 6. Once the zip file is downloaded you will need to extract it. For a PC, right click on the zip file and select Extract All. For a Mac, simply double-click on the zip file. 7. You can then move the zip file to your trash Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 2 Understanding Systems: Overview Websites can grow to be complex Many different forms of media Many internal parts/pages External relationships may exist as well Often times these parts depend on each other to achieve some desired function or effect. When there is a dependency between two or more objects or elements, and one or more of those elements change, it may affect the other parts as well – often adversely. This is why a good understanding of systems and how to work is very helpful. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 3 Understanding Systems: Overview – What is a System? System: a regularly interacting or interdependent group of items forming a unified whole (http://www.merriam-webster.com/dictionary/system) Just about everything is a system of something. Think about it… Families Systems of People Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Our Bodies Multiple Biological Systems 4 Even Atoms System of Protons, Neutrons & Electrons Understanding Systems: Overview – A Website is a System A website is an information system which consists of several different systems working together to make it all happen Back-end The hardware required to store and distribute electronic files Web Servers Database Servers The programming required for hardware to communicate and perform particular tasks HTML PHP Front End The User Interface (UI) we see on our computer monitors This is how we “communicate” with the equipment Most importantly, this is how we communicate with our audience As Drupal site-builders we’ll be both interacting with and building a large part of the front-end. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 5 Understanding Systems: Overview – Site Systems There are three main systems we’ll be working with in this workshop: Navigation System Classification System Creating well-formed, logical menus Creating a solid base for tagging and organizing site content URL System Creating a meaningful, sectionalized, and automated URL structure Solid development of these systems provides: Higher degree of usability Site optimization Often, the development of one of these systems will lend itself nicely to the development of another. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 6 Understanding Systems: Planning – Project – Overview The project we’ll be working on, from this point onward, is a website centered around food. This website, titled Food for Thought, has two goals: Provide a wide collection of searchable recipes Provide advice on how to use different methods and common utensils Our audience consists of: Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 7 Ages 13+ Male & Female English Speakers Understanding Systems: Planning – Project - Site Map To get started, it’s a good idea to have at least a rough idea of how the site should be formed. A site map is a good, graphic tool for fitting everything together. Preparation Equipment Book Custom Cooking Methods Book Book Conversions Book Cooking Companion Book Preservation Book Title/Content Title Should be meaningful , concise and somewhat define purpose Node Type, if known How Content Relates Home Basic Page At right is a very basic frame on which we’ll build our Food for Thought site on. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Node Type Food for Thought Relationship 8 FFT People Recipes Custom Custom Understanding Systems: Planning– Project - Narrative The site map, shown previously, is a good general guide to the structural components of our site. Additionally, we should have some idea of the intended function that each of the major components serves – a narrative will serve this purpose nicely Food For Thought Home Page Function: an overview page which describes the website as a whole Cooking Companion Feature Recipes Feature Function: similar to an Appendix or Bonus section of a traditional cookbook Methods Section Equipment Section Conversions Section Function: a categorized collection of techniques and tips for the cooking, handling, and preservation of food Function: a searchable and sortable collection of tips regarding the use of common food preparation and serving equipment Function: a simple standard to metric conversion chart for common cooking measurements FFT People Feature Highlights the employees of Food for Thought by providing photos, brief biographies, and contact information. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 9 Function: a searchable and sortable collection of recipes Site Set-Up: Overview For your training site, we’ll be taking advantage of Drupal Gardens. Drupal Gardens is: Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws A special hosting environment provided by Acquia, the proprietary Drupal consultation company founded by Dries Buytaert A good example of a Distribution Highly stylized – it’s not what you should expect out of a basic Drupal installation, but it’s good example of what Drupal can become Available anywhere you can get on the web Free for your use 10 Site Set-Up: Ex. 01 – Create Site – Log In to Drupal Gardens 1 First, let’s log in to Drupal Gardens: 1. Go to http://drupalgardens.com and click the Log In link in the upper right corner Please note that this exercise assumes you have created an account during the Basics workshop. If you have not yet created an account, please click the Sign Up link in the upper right corner and sign up prior to initiating a site. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 11 Site Set-Up: Ex. 01 - Create Site – Establish URL When the splash screen appears: 1. 1 2. 2 3. 3 5 4. 4 5. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 12 Click the Create a free site button A screen for your site name will appear Site URL field = enter the URL you want for your site Word verification field = enter the characters you see in the CAPTCHA image Click the Continue button Site Set-Up: Ex. 01 - Create Site – Select a Template When the template selection screen appears: 1 1. 2. 3. 3 4. 2 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 13 Select Campaign template from the top drop down menu Locate the Webforms option and change the switch from off to on Locate the FAQ option and change the switch from off to on Click the Create site button Site Set-Up: Ex. 01 Create Site – Completed An indicator bar will appear to show you the progress as your site installs. The process takes approximately five minutes. Upon completion your site will display. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 14 Site Set-Up: Ex. 02 - Change Theme – My Themes Palette 1 Drupal Gardens gives you a great deal of control over your theme. Let’s change the theme so it’s more appropriate for a food site: 1. 2. 3. 2 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 15 Go to Admin menu > Appearance Once the My theme palette appears, click the Themes tab Click the Choose a new theme link Site Set-Up: Ex. 02 - Change Theme – Select Theme To select a theme: 1. 2. Click on the Kenwood theme to preview it Click on the Choose button to select the theme 3. For the sake of this workshop stick with the Kenwood theme – you can always change it easily at a later date An overlay dialog box will appear – name your theme and click the OK button 2 3 1 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 16 Site Set-Up: Ex. 02 - Change Theme – Publish Theme Now it’s time to publish the theme: 1 1. 2. 3. 2 4. 3 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 17 Click the Publish button The system will generate a thumbnail – this takes a minute or two After the thumbnail appears, you’ll see a message at the top of the palette that informs you the theme is live Click the X in the upper right corner of the palette to close it Site Set-Up: Ex. 02 - Change Theme – Completed The theme is now published. Now let’s make a couple more quick configurations. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 18 Site Set-Up: Ex. 03 – Create Home Page By default, the front page is set up to show a news stream. Let’s change this so it has a static welcome in the content area. To do this, we first have to create a node: 2 1 3 4 1. 5 2. 3. 4. 5. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 19 Go to Shortcut bar > Add Content > Basic Page The node submission form opens Title field = Home Input format field = Full HTML Body field = paste text from Ex. 03 lab materials Site Set-Up: Ex. 03 – Create Home Page – Change URL Alias For this particular node, we’re going to turn off the automatic URL alias. To do this: 1. 2. 3. 4. 2 3 Click on the Search engine optimization (SEO) tab Uncheck the Generate automatic URL alias check box URL alias field = home Click the Pubilsh button 1 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 20 Site Set-Up: Ex. 03 – Create Home Page – Completed The completed page is somewhat bland, but once it’s put into it’s proper place on the front page, it will work just fine. Perhaps you noted that the styling toolbar buttons were missing. The Full HTML WYSIWYG editor profile needs to be configured to get the buttons (Admin menu > Configuration > Wysiwyg profiles). This will not be covered in this class. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 21 Site Set-Up: Ex. 04 – Change About Page 1 The About page is a pre-made page intended to describe your organization. It includes an embedded Google map. Let’s update the text on our About page: 1. 2. 2 Click on the About link in the Main menu Click on the Edit tab to open the node in edit mode Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 22 Site Set-Up: Ex. 04 – Change About Page – Change Text Once in edit mode: 1 1. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 23 Copy the text from your Ex. 04 lab materials and paste it over the existing text in the node Site Set-Up: Ex. 04 – Change About Page – Embed Photo Once the upload overlay appears: 1 1. 2. 3. 4. 5. 6. 7. Click the Browse button – this will open a window to your computer – navigate to your lab materials and select the ex04.jpg file Click the Upload button An image settings dialog box will appear Current format is field = Original Description field = close up of blackberries and cake Click the Submit button The image will appear small – it’s sized correctly, the display space is smaller than the text editor Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 2 3 4 5 6 7 24 Site Set-Up: Ex. 04 – Change About Page – Completed When you’re satisfied with your page, click the Save button. Your saved About page should look something similar to what’s shown at left. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 25 Site Set-Up: Ex. 05 – Change Site Information Settings Now we’ll quickly jump in and change some global settings to finish setting up our site: 2 1 3 1. 2. 3. 4. 5. Go to Admin menu > Configuration > Site information Site name field = Food for Thought Slogan field = We’re What’s Cookin’! Default front page field = home Click the Save configuration button 4 Once the settings have saved, close the panel by clicking on the X tab in the upper right of the overlay. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 5 26 Site Set-Up: Ex. 05 – Change Site Information Settings - Completed After closing the overlay, you’ll be returned to your site’s front page. Note the changes in the site name, the site slogan, and the presence of the Home node at the center of the front page. Now that your site is configured a bit, let’s get in and structure it out. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 27 Books: Overview The Book page content type was introduced, initially, in the Content Types workshop. As a refresher, this content type has some great features in terms of developing the structure of a site: Relates appropriate content together with Parent/Child pages Provides a degree of automation to menu development. Remember, the Book page content type is intended for hierarchical content. Think of it in the same fashion as you would a traditional book – with a main topic and supporting chapters. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 28 Books: Ex. 06 – Outline a Book – Revisit Site Map Preparation Equipment Book The site map provided at the at the beginning of this workshop display a small step towards outlining a book. The Cooking Companion section of this site will be the focus for our Book building efforts. As shown at right on the site map, the Equipment category within our Cooking Companion book will consist of its own custom node type. This is addressed in a future workshop. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Custom Cooking Methods Book Book Conversions Book Cooking Companion Book Preservation Book Food for Thought Home Basic Page 29 FFT People Recipes Custom Custom Books: Ex. 05 – Outline a Book – What is an Outline? Outlining a written piece of work simply means to take a broad topic and break it down into smaller pieces that support the main topic. A great example of an outline is to look at the Table of Contents of any textbook. Generally, each chapter contains a descriptive title and probably contains several points of interest. The site map is a start at outlining, but it really just points us in the general directions. The Methods group and its children: Cooking and Handling & Preservation, are ripe for outlining. So, let’s get to outlining... Preparation Book Cooking Methods Book Book Conversions Book Cooking Companion Book Preservation Book Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 30 Books: Ex. 05 – Outline a Book – Methods, Handling, & Preservation According to our summary, the content that will exist in the Methods group will be “a categorized collection of techniques for the cooking, handling, and preservation of food”. How could these sub-groups be further outlined? What are some different Cooking Methods? What about Handling? Preservation? Methods Book Preparation Cooking Preservation Book Book Book Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 31 Books: Ex. 05 – Outline a Book – Completed Methods Book Our site map is starting to show some signs of advanced structure. Now it’s time to set it all up. Preparation Cooking Preservation Book Book Book We won’t be creating full pages for everything – instead, we’ll include content in the top three pages and just get the others started. Food Safety Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws B-B-Q & A Freezing Child Book Page Child Book Page General Prep Baker’s Dozen Child Book Page Child Book Page Meat Prep Get the Skinny Dehydrating Child Book Page Child Book Page Child Book Page Fruit & Veg Prep Joe’s Diner Child Book Page Pickling Child Book Page Child Book Page 32 Child Book Page Canning Child Book Page Books: Ex. 06 – Build a Book – Enable Book Module 1 Now that we’ve got our outline we can put our book together. We need to enable the Book module and Book navigation block to work with this content, so let’s start with the Book module: 2 1. 2. 3. 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 33 Go to Admin menu > Modules Locate the Book module and check it Click the Save configuration button Books: Ex. 06 – Build a Book – Enable Book Navigation Block And now we’ll enable the Book navigation block so we can view our Book menu as its being built: 1 1. 2. 3. 4. Go to Admin menu > Structure > Blocks Scroll down to the Disabled group and locate the Book navigation block Select the Sidebar B option from the drop-down menu Click the Save blocks button 2 3 After saving the block settings, close out of the Blocks overlay. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 4 34 Books: Ex. 06 – Build a Book – Missing Block After closing out of the Blocks overlay, you’ll note the Book navigation block on the right side of your screen, but it’s empty. This is, of course, due to the fact that we don’t have any Book page nodes created yet. So let’s get to building! Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 35 Books: Ex. 06 – Build a Book – Create Parent Page 1 Let’s start by creating the Parent book page: 1. 2. 3. Go to Shortcut bar > Add content > Book page Title field = Cooking Companion Body field = use lab materials 4. 5. 2 3 Input format field = Full HTML Ex. 06a text ex-06a.jpg 4 Book outline field = <create a new book> Click the Publish button 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 36 Books: Ex. 06 – Build a Book – Completed Parent Page After saving, note the appearance of the Book navigation menu. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 37 Books: Ex. 06 – Build a Book – Create Conversions Child Page According to our site map, the Conversions Child Book page has nothing stemming from it, so let’s quickly create this node as well: 1. Scroll to the bottom of the Cooking Companion Parent page and click on the Add child page link 1 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 38 Books: Ex. 06 – Build a Book – Create Conversions Child Page – Enter Data 1 3 To create the Child book page: 2 1. 2. 3. 4 4. Title field = Conversions Input format field = Full HTML Click the HTML tab at the top right of your text editor Body field = use lab materials 5. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 39 Open and copy the ex-06b.txt file Paste the HTML code in Click the WYISIWYG tab to return to the rich text editor Click the Publish button Books: Ex. 06 – Build a Book – Create Conversions Child Page – Completed After your Conversions child page saves, note how the Book module is doing its job by automatically creating your navigation in two spots. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 40 Books: Ex. 06 – Build a Book – Create Methods Section – Methods Parent Page Now it’s time to put our outline to work. We’re going to start by creating the Methods page, which will be a parent to three sub-sections: 1. 2. 3. 4. From the Cooking Companion parent node, click on the Add Child page link Title field = Methods Input format field = Full HTML Body field = use lab materials 5. Ex. 06c text ex-06c.jpg file Click the Publish button The results should appear similar to the example shown. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 41 Books: Ex. 06 – Build a Book – Create Methods Section – Methods Child Pages – Now You Do It Now it’s time to quickly build out the Preparation, Cooking, and Preservation sections, which are all children of Methods. Parent = Methods Parent = Methods Parent = Methods Title field = Preparation Title field = Cooking Title field = Preservation Input format field = Full HTML Input format field = Full HTML Input format field = Full HTML Body field = use lab materials: Body field = use lab materials: Body field = use lab materials: • Ex. 06d text • Ex. 06e text • Ex. 06f text Weight field = -15 Weight field = -14 Weight field = -13 Click the Publish button Click the Publish button Click the Publish button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 42 Books: Ex. 06 – Build a Book – Create Methods Section – Cooking Child Pages – Now You Do It Create the child pages of Cooking. Parent = Cooking Parent = Cooking Title field = B-B-Q & A Title field = Baker’s Dozen Body field = use lab materials: Body field = use lab materials: • Ex. 06g text • Ex. 06g text Input format field = Full HTML Input format field = Full HTML Click the Publish button Click the Publish button Parent = Cooking Parent = Cooking Title field = Get the Skinny Title field = Joe’s Diner Body field = use lab materials: Body field = use lab materials: • Ex. 06g text • Ex. 06g text Input format field = Full HTML Input format field = Full HTML Click the Publish button Click the Publish button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 43 Books: Ex. 06 – Build a Book – Create Methods Section – Preparation Child Pages – Now You Do It Refer to your Ex. 06h lab materials to create the child pages of Preparation. Parent = Preparation Parent = Preparation Title field = Food Safety Title field = General Preparation Input format field = Full HTML Input format field = Full HTML Body field = leave blank Body field = leave blank Weight field = -15 Weight field = -14 Click the Publish button Click the Publish button Parent = Preparation Parent = Preparation Title field = Fruit & Vegetable Preparation Title field = Meat Preparation Input format field = Full HTML Input format field = Full HTML Body field = leave blank Body field = leave blank Weight field = -13 Weight field = -12 Click the Publish button Click the Publish button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 44 Books: Ex. 06 – Build a Book – Create Methods Section – Preservation Child Pages – Now You Do It Refer to your Ex. 06h lab materials to create the child pages of Preservation. Parent = Preservation Parent = Preservation Parent = Preservation Title field = Canning Title field = Dehydrating Title field = Pickling Input format field = Full HTML Input format field = Full HTML Input format field = Full HTML Body field = blank Body field = blank Body field = blank Click the Publish button Click the Publish button Click the Publish button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 45 Books: Ex. 06 – Build a Book – Create Methods Section – Completed Clicking through the parent categories in the Book navigation menu will open each group of menu items. There are many pages that have been created as “holder” pages. As site builders, we know what’s desired for each holder page, we just haven’t generated the content for it yet. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 46 Books: Book Manager Remember, you can also get a view of the overall structure of your book by going to Shortcut bar > Find content > Books tab. Here you can drag and drop your titles to order them as you wish. Your changes will be reflected automatically throughout the system. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 47 Taxonomy: Overview It’s a somewhat daunting term, but most of us tend to understand taxonomies innately. When given a varied group of things, most people sort things out based on some type of categorical attribute. A taxonomy is merely a way of categorizing things. If a person happens to have a music collection and enjoys more than one artist or type of music, chances are, they’re created their own musical “taxonomy” based on genre. My Music • Classical – Boston Philharmonic Beethoven’s 5th • Country – Johnny Cash Ring of Fire • Jazz – Norah Jones Come Away With Me • Rock – The outline at left may look somewhat familiar in form. While there may be many different taxonomy topics, there is really only one purpose behind creating one…it organizes things. This, in turn, makes things easier to find. Red Hot Chili Peppers Around the World Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 48 Taxonomy: Overview – Why Bother With a Taxonomy? Taxonomies do not need to be built for a Drupal site to work. For small sites, many site-builders may choose not to use this feature. For large sites, though – sites that contain much more content than menu space – taxonomies can help in the following ways: Categorical assignment Controlled keywords/tagging Helps with queries and Views Provides an out of the box solution for related content As a foundational tool for other modules Many other contributed modules leverage the functionality that Taxonomy supplies Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 49 Taxonomy: Overview – Terminology Before we begin, it would be beneficial to go over the terminology used within a site’s Taxonomy: Taxonomy: The Drupal module that allows a user to categorize content using both tags and defined terms – also the collection of vocabularies used in a Drupal site Vocabulary: A collection of terms used within a particular category – several different vocabularies might exist in one site’s taxonomy Term: A word or phrase and its definition Tag: A word or phrase that is connected to a node and serves as a tool to facilitate content filtering Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 50 Taxonomy: Ex. 07 Taxonomy Drill-Down Now, imagine that someone has dumped a shoebox full of recipe cards in front of you. Your job is to sort through it all and put it into order. How many different ways can these items be sorted? What makes sense to you? Even more importantly, what do you think makes sense to someone else who is looking for something in particular? Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 51 Taxonomy: Ex. 07 Taxonomy Drill-Down – Establish Topic Before building the actual taxonomy on Drupal, it’s a good idea to come in prepared performing a drill-down first. To do a taxonomy drill-down: First, establish a topic. Recipes The topic should be: Broad Directly related to the main subject of the site We’ll start by using Recipes as a topic. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 52 Taxonomy: Ex. 07 Taxonomy Drill-Down – Vocabularies Food Group Alphabetic We’ve established Recipes as our topic. Nutrition Value Course Recipes Let’s get a little more specific with our Recipes group by adding some categories. Each of these categories will be their own vocabulary. Meal Cuisine Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 53 Taxonomy: Ex. 07 Taxonomy Drill-Down – Parent Terms Dairy Veg Grain Now, we’ll add a first level of terms for each category. These will be known as the Parent terms in the vocabularies. The diagram is starting to look a little more detailed by now. Food Group Meat Fruit Alphabetic Junk Entree Recipes Appetizer Nutrition Value Course Low Carb Soup Meal Cuisine Snack Dinner Italian Break fast Chinese Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 54 Vegan Mexican Lunch Taxonomy: Ex. 07 Taxonomy Drill-Down – Child Terms Tomato Cheese Milk Veg Dairy Can a level of Child terms be added? Beef Bread Grain Pasta Food Group Meat Seafood Yes, as shown with the Food Groups vocabulary at left. Pork In fact, this diagram can be drilled down quite a bit further. Poultry Fruit Apple Alphabetic Junk Entree Recipes Appetizer Vegan Nutrition Value Course Low Carb Soup Meal Cuisine Snack Dinner Italian Break fast Chinese Lunch Mexican Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 55 Part of building a good taxonomy, though, is also knowing when to stop. This is a matter of judgment and having a focused concept of what is desired as an end result. Taxonomy: Ex. 07 Taxonomy Drill-Down – Clean-Up Sometimes a drill-down exercise can produce many possibilities. Veg Dairy Some, of course, will always be better than others. It’s the job of the site-builder to determine what will work best and weed out what might be unnecessary. In this case, the following will go: Beef Bread Grain Pasta Food Group Meat Seafood Pork Poultry Fruit Apple Alphabetic Junk Entree Recipes Appetizer Nutrition Value Course Alphabetic Tomato Cheese Milk Not specific enough Low Carb Soup Meal Nutrition Value Cuisine Potentially high-maintenance Snack Dinner Italian Break fast Chinese Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 56 Vegan Mexican Lunch Taxonomy: Ex. 07 Taxonomy Drill-Down – Completed Tomato Cheese Milk Veg Dairy Beef Seafood Bread Grain Pasta Food Group Meat Poultry Fruit Entree Pork Apple Appetizer Course The Meal and Course vocabularies are quite small. The Cuisine vocabulary is a bit larger. Recipes Soup What remains are four very solid recipe-based vocabularies. The Food Group vocabulary is the most complex of all. Meal Cuisine Snack Italian Dinner Chinese Mexican Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Break fast Lunch 57 Taxonomy: Ex. 08 Create Vocabularies - Tagging – Overview The first few vocabularies that we’ll construct are intended to be used as tagging tools for a custom Recipe content type that will be built in the future. Tagging, as mentioned previously, is used to help optimize site content. Cheese Dairy Grain Pasta Food Group Consider this… Tomato Veg One person might enter this website looking for Italian food. Meat Beef Another person may desire dishes with tomatoes in it. Entree Recipe Still another may be looking for pasta recipes. Lasagna Course In all cases, Lasagna should be on any result list – if it’s tagged right Meal Cuisine Italian Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Dinner This is part of content optimization Lunch 58 Taxonomy: Ex. 08 Create Vocabularies - Tagging – Meal Vocabulary – Define To create the Meal vocabulary, go to Admin menu > Structure > Taxonomy: 1 2 1. 2. 3. 4. 5. 6. The Taxonomy manager will appear Click the Add vocabulary link An overlay will appear Name field = Meal Description field = enter a brief description of the vocabulary, if desired Click the Save button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 3 4 5 6 59 Taxonomy: Ex. 08 Create Vocabularies – Meal Vocabulary – Add Terms You’ll be returned to the Taxonomy manager, which will contain a new Meal vocabulary. To add terms: 1 1. 2. 3. Click the corresponding add terms link Name field = Breakfast Click the Save button 2 Now repeat this process for 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 60 Lunch Dinner Snack Taxonomy: Ex. 08 Create Vocabularies – Meal Vocabulary – Organize Terms 1 To re-order the new terms 1. 2. 3. Click the List tab Click and hold on the small cross icon next to the Lunch term and drag it up between the Breakfast and Dinner terms Click the Save button 2 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 61 Taxonomy: Ex. 08 Create Vocabularies - Tagging – Now You Do It Now, you give it a shot. This vocabulary can also be found in your Ex. 08b lab materials. Define Taxonomy Add Terms From the Taxonomy manager Appetizer Click on the Add Vocabulary link Beverage Vocabulary name field = Course Bread Description field = Select the course, such as appetizer, entrée, etc, that best applies to this recipe Dessert Click the Save button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws Entrée Soup Salad 62 Taxonomy: Ex. 08 Create Vocabularies – Term Options- Overview So far, we’ve just listed a few terms in a very simple vocabulary. Taxonomy can provide some additional features, though, such as: Definitions/descriptions Allows for the inclusion of definitions. This is a great feature that provides the ability to do something simple like spelling out an acronym or something more complex, such as a detailed definition. Parent – Child relationships This allows for a drop-down list that is hierarchical, so you can, in effect, make categorized lists of your categories. These different options can be used in a variety of ways by Drupal, as well as by other modules that might be included in an installation. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 63 Taxonomy: Ex. 08 Create Vocabularies – Term Options – Cooking Methods Vocabulary – Define To create the Cooking Methods vocabulary, click the Taxonomy breadcrumb to return to the Taxonomy manager: 1. 2. 3. 4. 5. 1 Once on the Taxonomy manager, click the Add vocabulary link An overlay will appear Name field = Cooking Methods Description field = enter a brief description of the vocabulary, if desired Click the Save button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 2 3 4 5 64 Taxonomy: Ex. 08 Create Vocabularies – Term Options – Cooking Methods Vocabulary – Add Terms You’ll be returned to the Taxonomy manager, which will contain a new Cooking Methods vocabulary. To add terms: 1 1. 2. 2 3. 4. 3 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 65 Click the corresponding add terms link Name field = Dry Heat Cooking Description field = paste definition from Ex. 08c Click the Save button Taxonomy: Ex. 08 Create Vocabularies – Term Options – Cooking Methods Vocabulary – Create Child Now we’re going to make a child term of Dry Heat Cooking. In the new submission form: 1 1. 2. 2 3. 3 4. 4 5. 5 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 66 Name field = Bake Description field = paste definition from Ex. 08c Click the Relations fieldset to open it Parent terms list = Dry Heat Cooking Click the Save button Taxonomy: Ex. 08 Create Vocabularies – Term Options – Cooking Methods Vocabulary – Now You Do It For the next ten minutes, following the example provided in Ex. 08c, continue adding terms from the Cooking Methods vocabulary. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 67 Taxonomy: Ex. 09 Vocabulary Use – Attach Vocabulary – Edit Content Type Taxonomies can be attached to content types. In fact, this is how they’re used as tagging tools. So let’s go to Admin menu > Structure > Content types to attach the Cooking Methods vocabulary to our Book page content type: 1. 1 Once on the Content Types Manager, click the Book page manage fields link Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 68 Taxonomy: Ex. 09 Vocabulary Use – Attach Vocabulary – Add New Field To connect the Cooking Methods vocabulary, we need to add a new field in the content type: 2 1 3 1. 4 2. 3. 5 4. 5. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 69 Add new field field = Cooking Methods Field name field = cooking_methods Data Type field = Term reference Form element field = Select List Click the Save button Taxonomy: Ex. 09 Vocabulary Use – Attach Vocabulary – Configure New Field To configure the new field: 1 1. 2. 3. 4. Help text field = Select the cooking method that best applies Number of values field = Unlimited Vocabulary field = Cooking Methods Click the Save settings button 2 Now let’s go tag our Book pages… 3 4 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 70 Taxonomy: Ex. 09 Vocabulary Use – Tag Book Page It’s time to start putting our vocabulary to work. From within the Book navigation menu, go to Cooking Companion > Methods > Cooking > B-B-Q & A and open the page in Edit mode. Note that there’s a new feature there that wasn’t present before: 1 1. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 71 Cooking Methods field = Dry Heat Cooking, Grill Taxonomy: Ex. 09 Vocabulary Use – Tag Book Page – Now You Do It Tag the other child pages of Cooking. Title field = Baker’s Dozen Title field = Get the Skinny Title field = Joe’s Diner Cooking Methods field = Cooking Methods field = Cooking Methods field = – Dry Heat Cooking – Dry Heat Cooking – Dry Heat Cooking – Bake – Bake – Grill – Grill – Oil-Based Cooking – Water-Based Cooking – Deep Fry – Blanch – Roast Click the Save button – Poach Click the Save button Click the Save button Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 72 Taxonomy: Ex. 09 Vocabulary Use – Tag Book Page – Completed When you click on a term… …it brings up a list of all the other content that is also tagged with that term – this is called related content Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 73 Pathauto: Overview Pathauto is a contributed module that provides the ability to automatically generate aliases based on token values. A token value is, basically, a “fill in the blank” value. As a very simple example, if you had a data field called “name”, you could then use that data field to inject a specific name value. So, theoretically, you could configure the automatic alias of a node type to be something like “my-site.drupalgardens/content/[name]” which, upon saving a node with a name field containing the value “John Doe”, would automatically inject that value into the path to yield the resulting “my-site.drupalgardens/content/johndoe”. It’s actually easier (and cooler) than it sounds, and can be used to do interesting things, such as automatically sectionalizing your site out. Let’s play with this a bit… Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 74 Pathauto: Ex. 10 Configure Aliases Let’s begin by taking a look at the default URL alias pattern. We’ll use our Cooking Companion book as an example. The default alias pattern inserts the word “content” before the node title on all content types in the system. We can make this even more granular… Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 75 Pathauto: Ex. 10 Configure Aliases – Patterns Tab Let’s take a look at Pathauto, now. Go to Admin menu > Configuration > URL aliases: 1. 2. 3. 4. 1 2 3 When the overlay loads, click on the Patterns tab For the purpose of this exercise, we’re only interested in the fields within the Content Paths fieldset on this page Note the top field contains the default pattern to use for all nodes unless otherwise specified Also note that there are available fields for all content types Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 4 76 Pathauto: Ex. 10 Configure Aliases – Replacement Patterns Now let’s take a look at the available token values: 1 1. 2. 2 Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 77 Click on the Replacement Patterns fieldset within the Content Paths group – the list is pretty huge For our purposes today, we’re going to use node-based tokens Pathauto: Ex. 10 Configure Aliases – Add Replacement Patterns There are a couple of ways to apply a token. You can click into the field you want to enter the value into, then click on the value in the replacement list that you wish to enter there or You can just copy and paste the value in. Basic page paths field = [node:title] Blog entry paths field = blog/[node:author]/[node:title] Book page paths field = book/[node:title] FAQ item paths field = faq/[node:title] Gallery paths field = gallery/[node:title] News item paths field = news/[node:title] Poll paths field = poll/[node:title] We’re going to keep it pretty simple. Enter the token values as shown at right, then click the Save configuration button at the bottom of the screen. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 78 Pathauto: Ex. 10 Configure Aliases – Bulk Update Aliases Now is when things start to get pretty cool. We’re going to update all of the aliases in one fell swoop. Go to Shortcut bar > Find content: 1. 2. 3. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 79 1 Once your Content list loads, click the checkbox in the header at the to of the content list – this will select everything on the page In the Update Options field, select Update URL Alias Click the Update button 2 3 4 5 Pathauto: Ex. 10 Configure Aliases – Alias Update Confirmation Once all nodes are processed, you’ll get a confirmation message Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 80 Pathauto: Ex. 10 Configure Aliases – Completed Now go to any page in your Cooking Companion and you’ll see the change in the address bar. Go to any other node in the system and you’ll see it’s been changed as well. You’ll probably agree that this is pretty cool. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 81 Summary We’ve come quite a ways! Here’s what we covered in this workshop: Installation and initial set-up of a Drupal Gardens site Home & About page creation The structuring of a 17 node book Initial vocabulary creation and tagging Automatic alias configuration and bulk URL updates We’re at a point in the development of this site where all of the work that we’ve done isn’t always immediately obvious. It will become increasingly apparent, though, as we move into more advanced concepts such as custom content types and views. What we’ve done is created a very solid foundation upon which we can build an optimized and highly usable website that contains many user-friendly features. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 82 Conclusion This completes our Diggin’ Drupal Gardens tutorial. For additional tutorials please visit CWS Training at: http://oregonstate.edu/cws/training/view/training-materials Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cws 83