Creating a Custom Home Page in Drupal Using Views

One of the most useful module for Drupal to create a site is the Views module, in addition, it is also one of the most complex, and probably the largest (Drupal 6-12 archive weighs about megabytes, Views 6.x-2.6 archive weighs 1.5 megabytes).

Getting Started with Views

The point of the module is simple – it displays data in the form we need, the output can be customized according to many parameters, and various transformations. First, the module should be downloaded and installed (this was discussed in the previous lessons). It is necessary to activate 2 modules (they are in the archive Views) Views and Views UI, the first gets the lists from the base, and the second is a visual shell, through which Views are created.

After activation, the menu “Administer → Site building” will have a tab Views. Going in.

Here we see the views that are already created by default, there may be more depending on the modules installed. These views are inactive, you can turn them on with the link “Enable”, and use them for your own purposes. But, !!!WE!! as true “Jedi” will try to make our own (even if it will be small, unsightly and not working). Click on the button “Add”.
The first menu of view creation view.

There are two mandatory fields:

  • the title (the name of the view, enter English letters in lowercase),
  • and the view type (View type – this is where we will take the information for the output).

Let’s write in the title first (after all it is our first-born, right?), and the type of view put “Material” (Node), we will display the materials. Press “Next“, and we get to the page where we will set output parameters, initially it looks terrible, but this is only the first time.

Here you can create several displays (the most common are block and page). One display already exists – default, if you want to create several similar displays, you can specify the basic settings in default, the created displays will inherit these settings. If you want the display settings to be different from the default settings, you need to reassign them, for this use the Override button.

Let’s add a block.

Consider the Fields block, it is one of the main blocks, because it is where we choose which fields (Fields) will be displayed in our view.

On the block you see two buttons, the first is used to add a field, the second is used to set the fields in the order you want.
When you click on add field button, you will see fields that can be added at the bottom, and a dropdown sorting list. If we want to add headers to the output, we need to select Node: title, and click Add.

The Configure field menu will appear, where we can set the Name of the field with which it will be displayed and check the checkboxes:

  • Exclude from display: load the field, but do not display it.
  • Rewrite the output of this field: replace the output of this field with its own text.
  • Output this field as a link: The output text can be turned into a link.
  • Trim this field to a maximum length: you can specify a maximum text size, the rest will be trimmed.
  • Link this field to its node: the entry will be a link, depending on the field, the link address changes.

Let’s dwell on the “Basic settings” block, where the basic properties of our view are collected. When you click on any of the properties, an editing panel appears at the bottom.

Let’s discuss the main properties:
Name: the name of the display, you don’t have to change it, but when there are a lot of displays, it helps not to get confused.
Title: The title of the display (in our case, the default title of the block).
Style: Output style. A very important property, determines how your view will be rendered. There are 4 variants in total (if you do not add modules):
Grid – the data are displayed in a “grid”, you can set the number of columns, alignment (horizontally/vertically) and whether they should be grouped by any field.

HTML list: regular HTML list, from the Grouping field (similar to the one in Greed), and List type (Unordered – regular, Ordered – numbered)

Table: fields are displayed in the columns of the table, you can sort by any field.

Use AJAX: whether to use AJAX to output the view. If, for example, paginated output is used, then the transition between pages will happen without reloading the page.
Use pager: whether to display data paginated, pages can be shown in 2 ways: Full (1 2 3 4 next ‘ last ‘) and Mini (1 of 4 ‘), the Pager element property you need when using multiple pagers in one view.
Items per page: How many entries per page.
Distinct: if enabled, only unique entries will be displayed.
Access: sets access to the view, Role – only for users with a certain role, Permission – only for users with a certain right of access (User management → Permission).
Caching: whether the block will be cached or not.
Header, Footer: this is where we can insert text before and after our block, we can also insert HTML.
Empty text: this text will be rendered in case the view returns no entries.
Theme: you can specify the style of the theme our block will correspond to.

Sort criteria: any field can be sorted in ascending or descending order.

The Filters block is used for specifying the output filters. For example, you can display only those entries, whose id is less than 5, or Node: Type is “Blog entry”.

Practice

The module Views is very extensive, we have considered the basics, the rest I hope you can figure out on your own. Now, let’s move from theory to practice, do a few tasks (below I will give the solution, but it is desirable that you do it yourself):

Custom Drupal Home Page: the Simple Way (Without Views)

The simple way to customize Drupal offers the least flexibility but is, of course, easier. For people who need only a static page this will work well. Those looking for more complicated, dynamic content on their front page (summaries of most popular content, most recent articles etc.) should skip to the section showing the complicated way (it’s complicated but, thanks to step-by-step instructions, not difficult!).

  1. Create a New PageSelect Create Content -> Page in the Drupal administrator menu (in the side bar of a default installation).Enter at least a Title, e.g. ‘Home Page’. Text in the Body is optional (and can be added later).Click to drop-down URL path settings, then enter ‘home’ in the text box. Also drop-down Publishing options and ensure Published is checked but Promoted to Front Page is not.
  2. Make Drupal Use the New Page as its Front PageUnder the administrator menu, select Administer -> Site configuration -> Site information.Change Default home page to ‘home‘, then click Save configuration.Finished! Click the site logo (or type in the URL) to go to the newly created home page. To edit the text on the home page simply click the Edit link, when logged in as an administrator.

Custom Drupal Home Page: the Complicated Way (With Views)

For a home page with dynamic content (latest article summaries, top ten articles, etc.) it is better to use a view. Views can be used to create both pages and blocks. This section will show both: first a page view will be created, then a block view added to that page, giving an overview of how to create truly customized home pages for Drupal.

  1. Download and Enable the Views ModuleFirstly download the Views module from the Drupal website.Since Drupal 5 the best place to keep modules is drupalinstalldirectory/sites/all/modules (where ‘drupalinstalldirectory’ is the directory Drupal is installed in, e.g. httpdocs or public_html). If the directory does not exist: create it. Storing modules in this location keeps them separate from the ones that come with Drupal. Making upgrades and safely removing modules easier. No more: ‘Was that module part of Drupal?’Upload the whole views directory to the Drupal site, the path of the module should look like: drupalinstalldirectory/sites/all/modules/views. Then enable it under Administer -> Site building -> Modules on the Administrators menu (in the side bar of a default Drupal installation) by finding the Views group, selecting the Views and Views UI check boxes, then clicking Save configuration, at the bottom of the page.Optional Video: Installing the Views ModuleThe embedded video shows how to install the views module. This is in Flash format, which is non-Free and patent enclubered, not all surfers will be able to view it. For these users an OGG video is available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
  2. Create a New Page ViewClick Administer -> Site building -> Views this will show a list of currently available views, the module comes with some ready made ones, but this article will show how to make a new page view from scratch.Click Add at the top of the views page, then enter: ‘first_three_teaser’ as the Name.Drop down the Page group and check the Provide Page View.Under the URL text box enter ‘firstthree’.Select Teaser List from the View Type list. This shows a short summary of the articles/blog posts in the site database, views allow up to 99999 posts per page (should be enough for any site)! In this case three will be shown, with no pager (widget to move between pages).Make sure Use Pager and Breadcrumb trail should not include “Home” are both not checked, then enter 3 in the Nodes per Page text box.Next Filters are used to ensure the view includes only articles published and promoted to the front page by an administrator. Expand the Filters group by clicking on it.Using the Add Filter drop-down list select Node: Published, then Add Filter. Repeat this with Node: Front Page.The article teasers need to be ordered by the date they were written. Expand the Sort Criteria group. Using the Add criteria drop-down select Node: Created time, then click Add Criteria. Note that the order of the criteria needs to be changed so the articles published last are listed first, to do this change the Order drop-down list to Descending.Lastly click Save. The new view has been created!
  3. Make Drupal Use the New View as its Front PageSelect Administer -> Site configuration -> Site information in the Drupal administrator menu. Enter ‘firstthree’ in the Default front page text box.Click Save configuration. Return to the front page (usually by clicking the site logo) and check the changes are working, if there is no content on the site enter some by clicking Create content -> Story in the administrator menu. Anything can be entered here, silly posts can be deleted later!
  4. Add Blocks to TasteCreating a page View is only the beginning. Views allow almost all the information on a site to be grouped, summarised and ordered in ways visitors might like. Blocks are small bits of content in Drupal, they can be inserted into a page at several predefined places (see Administer -> Site building -> Blocks to configure blocks). This tutorial shows how to create two blocks, the first produces a table of the 10 newest articles, the second a table of the 10 most commented on articles.10 Newest BlockSelect Administer -> Site building -> Views in the Drupal administrator menu, then click Add in the menu at the top of the page.Enter ‘newest10’ as the view Name.Expand the Block group and check the Provide block box.Under the View Type drop-down select Table View, enter ‘10 Newest’ in the Title and ‘10’ in the Nodes per block.Leave the Block group and expand the Fields one. Then—as creating a page view, using the Add field drop-down—add the following fields to the block:
    • Node: Title
    • Node: Author Name
    • Node: Created TimeNext to the Name is a Label field, this is used for column headings in the view generated table. Node: Title should have a Label of ‘Title’, Node: Author Name should be ‘Author’ and Node: Created time should be labelled ‘Date’.Expand the Filters group by clicking on it. Using the Add Filter drop-down list select Node: Published, then Add Filter. Repeat this with Node: Front Page. These are the same filters used on the page view.Lastly the items in the table need to be ordered by the date they were written. Expand the Sort Criteria group. Using the Add criteria drop-down select Node: Created time, then click Add Criteria. Then change the Order drop-down list to Descending. This sort is the same as that on the page view created earlier in this article. Click Save to finish creating the block.10 Most Commented BlockFollow the instructions above, for creating the 10 newest block, with the following changes:
    • For the view Name enter ‘mostcommented10’;
    • Under the block Title enter ‘10 Most Commented On’;
    • Instead of clicking Save when finished, click Save and edit.
    • Visitors may wish to know how many comments are attached to each article in the table. To do this add the field: Comment: Count to the block view (in the same way all other fields were added).Making this into the 10 Most Commented On block is just a case of adding another Sort Criteria. Select Comment: Comment Count in the Add Criteria drop-down list, then click Add Criteria. Notice the Node: Created Time criteria is above the one just created, click the up arrow of the comment count line to move it above this. Change the sort order by selecting Descending in the Order drop-down list.Finally click Save.Showing the Blocks on the Front PageRepeat these steps for each block. The block administration page can be found under Administer -> Site building-> Blocks. Click configure on the block that needs to be moved.Under Page specific visibility settings select the Show on only the listed pages option, then enter ‘<front>’ into the Pages text box. ‘<front>’ is the name of the page where the block should be displayed; more than one page can be listed by pressing return between page names (see the instructions on the block configuration page, underneath the Pages text box for details). Click Save block to complete the changes.When the block is saved Drupal returns to the block listing page, finally the block should be enabled and moved to the content area of the page. Under Region in the block list are a column of drop-down menus: using the drop-down select Content, then click Save blocks.
  5. Optional Video: Creating Page and Block ViewsThe embedded video shows how to carry out the steps above to create both page and block views. Helpful if something some part of this tutorial is difficult to understand, missing something, or Drupal isn’t working the way it should. This is in Flash format, which is non-Free and patent enclubered, not all surfers will be able to view it. For these users an OGG video is available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
Share