Using Views module to create a "listing" of Articles

In this second section of the guide, you will be introduced to the powerful Views module.

You will create an Articles View, which will be used to show a full page listing of all the Article content you've created (the /articles page referred to in the preceding section), as well as a smaller listing of the latest Articles in the form of a Block, which you can include in the sidebar of your site, on your home page, or anywhere else you can imagine.

After completing this section of the guide you will have gained experience working with the Views 2 module for Drupal 6, and will be able to apply the knowledge you gain towards creating custom Views for a nearly unlimited number of purposes on your site. Once you have learned to use both CCK and Views, your outlook on developing websites will never be the same.

Set up the "Articles" View

The next step is to set up a new View using Views module, to generate a list of the latest Articles, making use of the fields that were set up in the Article content type. Of course, Views module can export/import Views, but going through the full process below will help you learn how Views works so you will be able to work with it and create your own custom Views.

Initial setup/configuration of your "Articles" View

  1. Go to Administer > Site Building > Views (admin/build/views) and click "Add" at the top.
  2. For View name enter: articles. Optionally add a short View description for your own reference, and a View tag of article to help you find the View in the future. Leave View type set to Node. Press "Next" to continue.

Configure the "Default" settings

Views version 2 now offers the ability to define multiple "Displays" for a single View, each of which can present the same View in a different way.

The first thing to do when creating a new View is to set up the Defaults configuration. The options you set for Defaults apply to all other custom Displays you create later. However, all of the options set for Defaults can be overridden with your own custom settings by each Display. This saves you time by defining some or all of the settings that will be shared by every Display.

Views configuration for "Defaults": Basic settings

  1. Begin by clicking the link for Basic settings > Title, and in the field that dynamically appears, enter Articles. Press the "Update" button to save the new setting.
  2. Next click the link for Basic settings > Use pager, select the Full pager option, and press the "Update" button.

Views configuration for "Defaults": Fields

  1. Next, on the Fields configuration block, press the + icon to bring up the option to begin adding new Fields to the View. Scroll down the list and add a check for the following items:
    • Content: Text: Article Teaser (field_article_teaser_text)
    • Node: Post date
    • Node: Title
    • Note: Add only the above fields... you may notice a field called "Node: Teaser" but that is not the one you need to add. Also be sure not to add the other custom field that you created earlier, field_article_subtitle, since it is not needed in the View.
  2. Click the "Add" button and you will then be presented with a sequence of configuration screens (one after the next) allowing you to customize the settings for each individual field you just added. After configuring each field, press the "Update" button to proceed to the next field's configuration:
    • For Content: Text: Article Teaser change the Label option to None.
    • For Node: Post date delete the text from the Label field so that it is blank and adjust the Date format option if you wish to. For instance, if you'd like the date displayed similar to July 4, 2008 (leaving out the time of day), set the Date format to Custom and enter the Custom date format as F jS, Y.
    • For Node: Title delete the text from the Label field so that it is blank and check the Link this field to its node option.
  3. Again on the Fields configuration block, click the up/down arrow icon, which allows you to rearrange the order of the fields. Simply drag the fields into the correct order (e.g. Title, Post date, and Article Teaser), and press "Update".

Views configuration for "Defaults": Sort criteria

  1. Click the + icon in the Sort criteria configuration block. Scroll down the list and add the Node: Post date item. In the following screen choose Descending for the Sort order and press the "Update" button.

Views configuration for "Defaults": Filters

  1. Click the + icon in the Filters configuration block. Scroll down the list and add the following filters:
    • Node: Published
    • Node: Type
  2. Click the "Add" button and customize the settings for each field. After configuring each field, press the "Update" button to proceed to the next field's configuration:
    • For Node: Published check Published (which ensures only content that is marked as Published will be shown).
    • For Node: Type put a check next to Article under "Node type".

Create the "Page" Display

You will be creating two custom Displays: the first, a "Page" Display, which will be a full-size listing of the articles, and a second "Block" Display, which will be a small sub-listing of article teasers which will be placed in the sidebar of the site (or on your home page). So let's begin first with the "Page" Display:

  1. Near the top left, with the dropdown menu set to Page, click on the "Add Display" button. A new tab with the name "Page" will appear below the Default Display.

Views configuration for "Page": Basic settings

  1. Since you can have as many different Displays as you want, it's a good habit to always add a custom name to each Display you make so that you can keep them organized (these names are for your own reference and are not displayed publicly). Begin by clicking the link for Basic settings > Name, and in the field that dynamically appears, change the name to Page: Articles. Press the "Update" button, and then press the "Save" button at the bottom of the Views interface to save the View - you should now see that the Page Display is now named Page: Articles (Display name changes aren't updated until you save the View). Click on the new Page: Articles tab to make it the active tab again.

Views configuration for "Page": Page settings

  1. Click the link for Page settings > Path, and enter the URL you want the full article listing page to have (e.g. enter articles if you want the URL to be example.com/articles). Press the "Update" button.
  2. Optional step:
    If you'd like to add the Articles page to your site's menu, click the link for Page settings > Menu. Select the Normal menu entry option, enter the menu item title in the field (e.g. Articles), and press the "Update" button. Menu items generated by Views modules appear by default in Drupal's Navigation menu. You can adjust this (e.g. to move it to your Primary Links menu) though you MUST first save your View before navigating away from it. Go to Administer > Site building > Menus > Navigation (admin/build/menu-customize/navigation), locate the name of your menu item, click edit, and choose the Primary links menu under the "Parent item" option.

Create the "Block" Display

Now you'll create the second Display, this time as a "Block" type, which will be a small sub-listing of article teasers which will be placed in the sidebar of the site (or on your home page):

  1. Near the top left of the page, change the dropdown menu setting to Block, and click on the "Add Display" button. A new tab with the name "Block" will appear below the Default and Page: Articles Displays.

Views configuration for "Block": Basic settings

  1. Again, it's wise to give every Display a unique name. Click the link for Basic settings > Name, and in the field that dynamically appears, change the name to Block: Articles. Press the "Update" button, and then press the "Save" button at the bottom of the Views interface to save the View. Click on the new Block: Articles tab to make it the active tab again.
  2. Click the link for Basic settings > More link, and click on the "Override" button, which makes this setting apply to this Display only and none of the others (if you intend to Override a setting, always click the "Override" button immediately before you make any changes to the settings). Check the option for Create more link, and press the "Update" button.

    Note: Since the "More link" option only applies to Block Displays, you could turn this setting on in the Defaults Display - however it's included in this way here as at least one example of using the Override feature of Views Displays. You can use this feature to do all kinds of interesting things within a single View, including adding specific fields, filters, and arguments to one Display of the View, and completely different ones to a different Display (thereby creating a separate Display that is based on the same underlying Default values, but otherwise an entirely different View).

Your View is now complete

The View and its Displays are now complete. However, you can return to edit and adjust the View at any time.

Ensure that you click the "Save" button for the View (make sure you see the "The view has been saved" message at the top of the screen). Pay a visit to http://www.example.com/articles to see the output of the Page: Articles Display you've created.

When you're ready proceed to the next section of the guide, where you will activate the Block: Articles Display to be used in the sidebar of your site.

Enable the new "Articles" block

The Block: Articles Display you just created has now become automatically available to the rest of Drupal as a "Block" at Administer > Site building > Blocks (admin/build/block).

  1. Go to the Blocks administration page and locate articles in the list of "Disabled" blocks (until you enable them, Blocks are disabled by default).
  2. Click on the Region drop down menu to the right of articles, and choose one of your theme's available Regions (for instance, Right sidebar). The articles block will immediately move out of the Disabled category and up into the Right sidebar category higher up on the page. You can adjust its position relative to the other blocks in that Region using the move icon at the far left.
  3. Scroll to the bottom of the page and press the "Save blocks" button. The new Views-generated Block should now appear in the Region you selected.

More info to add...
- You are not limited to only the blocks that are pre-defined for your theme.
- Short mention of the possibility of adding blocks to your front page (and link to article on making front pages).