Step by Step

This page is a detailed list of the steps followed in the class, during the hands-on portion. See Agenda for an overview of the entire agenda.

Getting Started with Drupal

  • Enable Administration Menu module
    Learn: Basic module administration
    • Log in to your site with your administrative user name and password.
    • If you do not already have the administration menu bar on the top of your screen (black bar), go to Site Building / Modules, and enable the Administration Menu module (check box, save configuration).
  • Enable other modules we will need
    Practice: Basic module administration
    • Visit Site Building / Modules, and check off the modules we will need:
      • Under CCK - Content, Content Copy, FileField, ImageField, Option Widgets, Text
      • Under Core - enable Path and disable Comment
      • Under ImageCache - ImageAPI, ImageAPI GD2, ImageCache, ImageCache UI
      • Under Other - Advanced Help, Pathauto
      • Under Views - Views, Views UI
    • Click submit. You should see a message about needing the Token module. Click Continue to install the Token module as well.
    • Two step process: If you do not have an Acquia support account, to disable the message on the top of your screen, you will need to disable the Acquia modules. This takes two steps (because one of the modules depends on the other): (a) Disable the Acquia Site Information module and save. (b) Disable the Acquia Agent module and save.
  • Change the theme to Acquia Marina at Site Building / Themes and configure the new theme.
    Learn: Basic theme administration
    Try out settings for displaying the logo and breadcrumb, and for the Page Titles (under SEO settings).
  • Set up Path Auto (automatic URL aliases)
    Learn: Path Auto module administration
    • Visit Content Management / Content Types to see what content types (AKA node types) are available
    • Visit Site Building / URL Aliases / Automated Alias Settings
    • Under Node Path Settings, set the path to be just [title-raw]
  • Create a Home page
    Learn:
    Content editing, how to set site home page
    • Visit Content Management / Create Content / Page
    • Create a page with title "Home" with some content in the body.
    • Save the page and note the URL (should be something like example.com/home)
    • Change the site's default home page to URL "home" on Site Configuration / Site Information and save (you might also want to change the site name and footer text settings)
    • Click the banner and verify you get to the Home page
  • Edit Primary Links menu
    Learn:
    Basic menu management
    • Go to Site Building / Menus, and click on "Primary Links" to edit the built-in Primary Links menu
    • Click Add Item. Enter path "home" and title "Home".
    • When you save this menu item, you should see it appear in the top nav area of the site (depending on your theme and its configuration - if it doesn't appear, go back to Site Configuration / Theme, click on Configure for the theme you are using, and make sure it is set up to display primary links. Acquia Marina should be by default.)
    • Click on this menu item and verify it takes you to the home page.
  • Add an About page
    Practice:
    Content editing
    Learn: Alternate method to add item to a menu
    • Visit Content Management / Create Content / Page
    • Enter title "About", and enter some content in the body.
    • Under Menu settings, enter title "About" and choose menu Primary Links
    • Save the page and note that About is now in the menu - but in the wrong position (alphabetical)!
    • Edit the page (click on the Edit tab). Change the weight under Menu Settings to 5 and save, and the menu order will be fixed.
    • Click on your two menu items and verify they are working.
  • Change the Date settings for the site at Site Configuration / Date and Time / Formats

Content types, CCK, and ImageCache

  • Create a custom content type "Photo"
    Learn: CCK module basics: creating a content type, adding field, controlling display options.
    Practice: Path Auto administration
    • Visit Content Management / Content Types / Add Content Type
    • Enter "Photo" as the human-readable name, and "photo" as the machine-readable name for the new content type. Put in a description, such as "Photo for the gallery".
    • Under Submission Form settings, make the name of the Body field blank, so there is no body field.
    • Under Workflow settings, uncheck "Promoted to front page".
    • Save the content type. Note where these fields are displayed on the Content Types page.
    • Click "Manage fields" next to the new Photo content type.
    • Add a "File" type field -- label it Photo, use "Image" as the entry widget, and name it field_photo. After submitting, enable custom Alt text, make the field Required, and save.
    • Add a "Text" type field -- label it Description, use "Text area" as the entry widget, and name it field_description.
    • Drag the Photo and Description fields up to right under Title, drag Menu settings down under Path settings, and save.
    • Click on "Display Fields". Make the label for the Photo and Description fields "Hidden", hide the Description field in Teaser view, and save.
    • Visit Site Building / URL Aliases / Automated alias settings. Under Node path settings, make the URL for Photo be photo/[title-raw]

    Note: The Notes and Resources page has an export of this content type.

  • Add Taxonomy (categories) to Photo type
    Learn: Basic taxonomy management
    • Visit Content Management / Taxonomy
    • Click on "Add vocabulary" to add a new Vocabulary. Call it "Photo gallery", and assign it to content type Photo.
    • Click on "Add terms" to add some terms to this vocabulary, such as "Friends", "Scenery", and "Around town"
    • When done adding terms, click "List" to see the list.
  • Create Photo content
    Practice: Content editing
    • Visit Content Management / Create content / Photo
    • Create a couple of photo content items. If you don't have any photos handy, there are samples on the Notes and Resources page. You will need to first download them to your laptop.
    • For each photo item you create, note the URL created, and how the photo item is displayed.
    • Visit Content Management / Content to see your photo items listed.
  • Set up ImageCache presets
    Learn: How to make images display in different sizes
    • Visit Site Building / ImageCache / Add New Preset
    • Enter "large_image" as the name.
    • Click "Add Scale", and set the maximum size to 500px wide. Leave the Height setting blank.
    • Repeat this process to make a "gallery_thumb" preset that will scale and crop to 100x100 pixels.
    • Visit Content Management / Content Types, and click Manage Fields for the Photo content type.
    • Set the display for the Photo field to "gallery_thumb image linked to node" for the teaser, and "large_image image" for the full node view. Save the configuration.
    • Visit the Content Management / Content page. Find one of the photo items you created. Click the link to see how the display has changed.

Views and Blocks

  • Make a photo gallery page
    Learn: Creating views
    Practice: Menu editing
    • Visit the Views administration page at Site building / Views
    • Click "Add" to add a new view. Give it a name of "gallery" and a description of "Photo gallery". Make sure it is a "node" type view, and click "Next".
    • Click the + sign next to Filters. Check the "Node: Published" and "Node: Type" boxes, and submit. On Published, choose "Yes", and click "Update". On Type, choose "Photo" and click "Update".
    • Note the error message saying "Display 'Defaults' uses fields but there are none defined for it or all are excluded." Click on the "Fields" row style in the basic settings box, change it to "Node", and click "Update". Uncheck "Show links" and click "Update". At this point, you should have a preview of your photo gallery.
    • Click on the "Unformatted" Style in the basic settings box, and change it to Grid. Your preview display should change.
    • Click the 10 next to "Items to display", and change it to 12 (since the grid has 4 columns).
    • Click on "None" next to Title in basic settings, and enter a title of "Photo Gallery".
    • Click the + sign next to Sort criteria, and choose "Node: Post date". Choose Descending (to get the most recent photo first), and click "Update".
    • Click "Save" to save the view at this point.
    • Add a "Page" display (make sure Page is selected in the display drop-down in the left column, and click Add Display). Under Page Settings, enter a path of "gallery".
    • Under Basic Settings, click on "No" next to "Use pager". Click the "Override" button. Choose "Full pager", and click "Update".
    • Click "Save" to save the view at this point.
    • Use the "View page" link at the top to navigate to your gallery page and see how it looks.
    • Visit Site Building / Menus, and click on the Primary Links menu.
    • Click "Add item" and add path "gallery", menu link title "Photo Gallery", weight 3. You should see it appear in the top naviagation. If you're not happy with the order, drag to the desired order and click Save configuration.

    Note: The Notes and Resources page has an export of this view.

  • Make a latest photo block
    Learn: Blocks system
    Practice: Editing views
    • Visit Site Building / Views, and click "Edit" for your gallery view.
    • Add a "Block" display (make sure Block is selected in the display drop-down in the left column, and click Add Display). Under Block Settings, enter an admin description of "Latest photo".
    • Click on "Photo Gallery" next to Title in the Basic Settings area. Click "Override", and enter a title of "Latest Photo".
    • Click Grid next to Style, click Override, and change it to Unformatted.
    • Click 10 next to Items to display, click Override, and change it to 1.
    • You should now see just your latest photo in the preview below.
    • Click "Save" to save the view at this point.
    • Visit Site Building / Blocks.
    • Drag the Navigation block down to the Disabled section, or choose "None" in the drop-down to disable it. Drag the Latest Photo and Who's Online blocks up to the Sidebar First section (or Left Sidebar if you are using a different theme), or use the drop-down. Change the order of blocks as desired, by dragging. Click "Save Blocks".
    • Now click Configure next to the Latest Photo block. Under "Page specific visibility settings", enter "gallery", so that the latest photo will not show on the gallery page. Save.
    • Click on the Home or About page in the top navigation and verify the blocks are shown. Click on the Photo Gallery page and verify the latest photo block is not shown.

    Note: The Notes and Resources page has an export of this view.