Friday, March 29, 2024

Creating ‘Old-School’ Web Page Indexes in Drupal

If you are coming from a web design background, whether it be designing from scratch and hand-coding, or using WordPress or a similar CMS, you are probably going to have trouble getting up to speed with Drupal. The documentation and most of the tutorials and how-to articles assume that you know at least something about Drupal and quite often leave out a critical step or some setup information that the total newbie with no programming experience desperately needs. This is not intentional but often developers are so familiar with what they’re trying to explain that the little things slip by them un-noticed.

One such issue, that many Drupal newbies struggle with, is creating a simple directory listing or ‘index’ page of articles. The solution to this problem is as simple as understanding that Drupal handles content differently. Instead of a directory that contains web pages and an index page, everything goes into /content/. If you have a thousand web pages, you might think that this isn’t a very effective way to manage those pages, but not to worry; Drupal has you covered.

To create your index pages, you have to stop thinking like a web designer and begin to think like a Drupal developer. In Drupal, content types correlate to old-school website sections or categories. Many web designers interpret ‘content type’ as different types of content, i.e. articles, images, or polls rather than different types of article subjects. Yes, content types can also be images, polls or anything that is not an article, but it can also be a group of articles on a particular subject, or different ways of presenting groups of articles.

Getting Started

To get started, we first need to set up a section, aka content type, by going to Administer > Content Management> Content Types, to create a new content type (your category).

Click on Content type and then click on Add content type. Since I plan to take notes on how I’ve accomplished something in Drupal, I’ve named my new content type ‘Drupal Notes’. In the Add content type window, fill in the following values:

  1. Name: Drupal Notes
  2. Type: drupal_notes
  3. Description: Tutorials and how-to articles on working with Drupal.
  4. Image Attach Settings: Allow uploading of images if you plan to include images.
  5. Save

Now go to Administer > Site Building > Views and click on Add.

  1. View name: This is a machine readable name. I used drupal_notes
  2. View description: A description for your view. I used Tutorials and how-to articles on working with Drupal.
  3. View tag: Add a view tag, which will be used to sort the views in the administration page. (This is an important step. Remember, all of your pages/stories are going to land in /content/. Skip this step and you won’t be able to filter for a specific article section/category later.)
  4. View type: Select a View Type of Node. (radio button)
  5. Click Next

In the Filters section, click the plus sign. Select Node from the drop down list; this filters the Node items from the full menu so that you don’t have to scroll through the entire list. Put a check next to Node: Type and click Add.

A Configure filter Node: Type dropdown will open underneath the View Default Settings. The Operator should already be set to “Is one of”. If it’s not, click the radio button to select it. In the Node Type: list, select your node.

Click Update.

You’ll get a warning message, ‘Display “Defaults” uses fields but there are none defined for it or all are excluded.’ Don’t worry about it.

Move on to the Sort criteria section of the view’s default settings area. Click the plus sign. Again, select Node from the drop down list. Check Node: Post Date and click Add.

In the Configure sort criterion Node: Post date dropdown, select Sort Order: descending and Granularity: Second. Click Update.

In the Fields section, click on the plus sign. In the dropdown that opens, check ‘Node: Post Date’, ‘Node: Title’ and ‘Node: Teaser,’ and click Add. A series of three dropdown boxes will appear, one at a time. Do the following in each dropdown and click Update to move to the next.

On the Configure field Node: Post date, remove ‘Post date’ from the Label box and click Update. No other changes are necessary.

In the Configure field Node: Teaser, delete the word ‘Teaser’ in the Label text box. Click update.

In the Configure field Node: Title, delete the Label field, scroll all the way to the bottom and check ‘Link this field to its node’. Click Update.

In the Basic settings box, click on the word ‘None’ next to Title. Type in Drupal Notes (or whatever you have named your view). Click Update.

That’s it for the default settings. Now we need to set up the specific page settings.

Page will already be displayed in the drop down menu, so just click Add display. You’ll notice a new Page tab is now displayed directly beneath the Defaults item and above the drop down menu. When Page is highlighted, you’re working on the page settings, which can be different from the default settings.

Under Basic settings, click on ‘No’ next to Use pager. Click the radio button next to Mini Pager, click Override (to override the default settings), and click Update.

Mini pager inserts (1 of [total number of pages] ») at the bottom of the page when the number of items displayed exceeds the number specified for the page. Full pager inserts the individual page numbers (1 2 3 4 next » last ») at the bottom of the page.

In the Page settings box, click on ‘None’ next to Path. Type ‘ drupal_notes’ (or whatever your mechanical read name for your view is) into the path box. Click Update.

As a precaution, and to save yourself some possible, future grief, click the plus sign on the Filters section again. In the ‘Page: Add filters’ window that opens, select Node: Published and click Add to open Page: Configure filter Node: Published. Under Published, select yes, click the Override button to override the default settings, and then click Update. Setting a filter with a value of published will prevent unpublished articles from turning up unexpectedly on your website.

Now click on ‘No menu’ in the Page settings box. Choose ‘Normal menu entry,’ which opens a form where you can enter a Title, Description, Menu, and Weight. Enter your title. This will be the text that is used for your menu item. Enter a description if you desire. In the Menu dropdown, select Primary Links. Click Update.

Time to click Save. We’re done! You should have a new item in your top navigation bar (if you have your menus set up, but that’s a topic for another day). and an ‘index’ page is automatically generated. At this point, this is an empty page with just a header title. Go add some content and watch it fill up automatically!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured