Drupal 6: Attachment Views, Page Views, and Theming

Exclusive offer: get 50% off this eBook here
Drupal 6 Attachment Views

Drupal 6 Attachment Views — Save 50%

Use multiple-display views to add functionality and value to your site!

$26.99    $13.50
by J. Ayen Green | February 2010 | MySQL Content Management Drupal PHP Web Development

This article by J.Ayen Green, author of Drupal 6 Attachment Views, gives us an introduction to Attachment Views in Drupal.

Here's what we'll do in this article:

  • Learn what an Attachment view is
  • Learn what you can do with an Attachment view
  • Consider in what situations an Attachment view can be useful
  • Cover basic view theming
  • Create a Page view
  • Create an Attachment view
  • Theme the view

Looking at just about anything worth doing, a question will often arise beginning with the words, "How do I." Often the challenge can seem daunting. Then, one finally intuits, discovers or otherwise stumbles upon the answer and simultaneously is offered several alternative opinions, each being offered as the best way to accomplish the same goal. This is the case whether planning a vacation route, taking a photograph, or creating part or all of an application.

There are a number of ways to accomplish what we will be doing in the article. If you spend any time on the Drupal IRC (Internet Relay Chat) channels, you will most likely receive varying opinions as to the best approach and, perhaps, come away more confused than when you started. Sometimes, there is no clear answer. One approach would be to write custom code. Another might be to use the Panels module. Each approach is valid, and has different pros and cons in terms of features, effort, learning curve, and time. Here, we're going to face each challenge in the same way, with attachment views, which means less coding, less time, and a smaller learning curve.

A view is originally a relational database term, referring to a temporary arrangement of information in the database so that it can be presented in a meaningful way which is different than the underlying table layout. The Views module accomplishes the same thing, and provides the glue to tie itself in to the rest of Drupal and, especially, the ability to theme the result with templates. In other words, it gives you the ability to look at Drupal content in a way you would otherwise be unable to (without custom code).

What is an Attachment view?

A view is the dynamic display of one or more pieces of related content based on one or more criterion.

What does that mean in practice? Let's consider a simple example. Let's say we have created a number of nodes of the content type 'Story' and assign one or more taxonomy terms to each. Having done that, we want to be presented with a list of teasers for each Story that has 'travel' as one of its taxonomy terms.

It's a fairly common requirement. If you're familiar with Joomla!, for example, it could be accomplished by means of a Section or Category Blog page. The fact, though, is that the architecture that makes Drupal so extensible results in there being no manner in which to accomplish this using a core module. Enter the Views module, which will allow us to specify that we want a page on which we want to view x number of nodes, their selection based on certain criteria, which in this case will be nodes containing the taxonomy term 'travel'.

That, in a nutshell, describes views at their simplest. Now, how about Attachment views? Well, to continue using the same example, let's say that our requirement has changed, and we don't always want a page based on every node having to do with travel, but want to be able to select destinations from a list of regions shown on the same page, as illustrated in the following figure.

Drupal 6 Attachment Views

The box on the left shows the available travel regions, each of which is a taxonomy term, with Asia having been chosen. The boxes on the right are node teasers, each of which has Asia among its taxonomy terms.

How can we accomplish this? One method would be to code a custom page in PHP and display it. That would work, but it would also set the page in stone to some extent, bypassing the flexibility that Drupal provides. We could also create a menu of destination regions and put it in the sidebar as a block. That would work too, but the menu would not be dynamic, and would have to be edited each time a region was added, changed, or removed. One further option would be to have two separate views. How can we have two views though? We could create one as a block, but let's say that the design calls for the selection choices to be in the content area of the page. So, that means we need to find a way to have both views as content. Enter Attachment views.

Reviewing the view requirements

The business for which our website is being built is a commercial builder's. As with most construction businesses, subcontractors represent the major source of labor. On this site, Subcontractors will be the user type that will need to register, in order to subsequently review jobs and bid for them. There will be other authenticated user types, such as management, job supervisors and admin, but they will have user records created for them and will not need to register. Customers will be anonymous users.

Drupal 6 Attachment Views

To that end, a custom profile has been created for subcontractors, to capture the necessary information. We're using the content_profile module so that each subcontractor profile will be a node. We are going to have a menu from which the user will select a contractor for which the details will be displayed. For a given view, we can create various displays. A view to be displayed like a node will have a Page display—'Page' can be thought of as a web page—and one that is to be displayed as a block will have a Block display.

Considering our menu of subcontractors, and the display of a subcontractor's details, in conjunction with the terms 'Page display' and 'Attachment display', the reasonable inference is that the Attachment view will be the menu-style list of subcontractors, and the Page display will be the subcontractor details, the page being larger than an attachment, and the details being larger than the menu. However, that's not necessarily the case, and in subsequent examples we'll invert that assignment of content to display.

The description of the subcontractor list may bring the thought 'Block' to mind. Often a block can be used in place of an Attachment display, and in fact, the option to create a Block display in the view is just one selection away from the Attachment type. We're using Attachment displays rather than Block displays because Attachments are not as entity-like in their construction, and are easier to place anywhere within the page content than Blocks, which are more easily placed in regions adjacent to the content area. Attachment views do not include paging as do Page views. We are only going to be showing one subcontractor's details at a time, so there is no paging issue there.

However, when we list the subcontractors to select from, there could be dozens, or even hundreds, and that will require us to have paging available for that display, so the Page display for our view will be the subcontractor list. We'll build that first.

Activity 2-1–Subcontractor page view

The Subcontractor page will allow the user to view the details of a subcontractor chosen from a dynamic list. That is, the list of subcontractors will not be something separate that requires editing whenever a subcontractor is added or removed, and the list will be in the content area of the page and not in a navigational menu.

  1. Let's create a new view. We're going to create a node view named subs, as shown in the following screenshot:
  2. Drupal 6 Attachment Views
  3. Click Next and the Views panel is presented. The panel will allow us to customize the view settings. We'll start by creating a Page display for the view.
  4. The Views page will always attempt to provide you with a real-time preview based on your settings. Often, the settings are being established in an order that is not conducive to creating the preview, because some information is missing. In that event, you will see a pink warning about this, for example, Fields is the display type but no fields have been chosen. Use the warnings as a way to tweak your memory about what you have left to do, but don't worry about them, as long as there are none remaining when you think you're done.

    Drupal 6 Attachment Views

  5. We'll click on Title and change the view title, as shown in the following screenshot. Click Update default display when you are finished.
  6. Drupal 6 Attachment Views

  7. Let's look at some of the other configuration options in Basic Settings. Leave the style settings as it is. A style plugin isn't needed, because the view will eventually be themed, and since it will only be showing one record it doesn't require a table or grid. We'll also leave the Row style set as Fields, as we want the profile data to be displayed as a vertical list of fields. Again, changes can be made when the view is themed. We won't use AJAX at this time. We do want to use paging with this display. It's likely that the subcontractor list will be large, and so we'll only want a small amount being shown at one time. We'll change the Use pager setting to "yes", and from the config options choose Mini pager.
  8. Drupal 6 Attachment Views

  9. Leave the More link setting at no, we don't need a More link, and likewise, since each record is a separate subcontractor node, we're not concerned about unique records.
  10. As this view is meant only for use by the management of Guild Builders, we'll want to restrict access to it. Change the Access setting to restrict access to a specific role.
  11. Drupal 6 Attachment Views

  12. A role called management has already been created for use by the management staff of Guild Builders. There will probably be more roles added later, such as one for staff and another for the subcontractors themselves.
  13. We'll assign access to the management role.

Drupal 6 Attachment Views

We won't be caching the view, nor exposing the form in a block, so we'll leave the settings caching at one and expose form in block at no. There will be a page header and footer, but they can be added later. Empty text won't be an issue, because the node selection will come from a list based on existing nodes. That takes us to the end of the Basic Settings pane. Let's move on to Sort criteria.

Drupal 6 Attachment Views Use multiple-display views to add functionality and value to your site!
Published: February 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
  1. We want the subcontractors to be shown in alphabetical order, so sort on Node title, which is the subcontractor name.

    Drupal 6 Attachment Views

    The sort order will be set to ascending.

    Drupal 6 Attachment Views

  2. Next, we will look to the Filters pane. We only want to select Subcontractor nodes, so filter based on node type.
  3. Drupal 6 Attachment Views

    Drupal 6 Attachment Views

  4. We need something to be shown in this view display, so select Node: Title in the Fields settings.
  5. Drupal 6 Attachment Views

  6. In the subsequent dialog, specify that the value of the field will be output as a link, and point that link at the view path, with the contractor being used as ID. We'll use subs/ as part of the path for two reasons: to associate the content with the subs content type, and to make it easier to identify the intent of the path if we ever need to write module code to act based on the path. That is, the path makes it easy for the code to identify it as being subcontractor content.
  7. Drupal 6 Attachment Views

  8. The final thing to do in this display is to define the path.
  9. Drupal 6 Attachment Views

  10. With our view display complete, save it, and then test it. First, we'll run a quick check on it to make sure there aren't any configuration errors, by clicking the Analyze button.

    Drupal 6 Attachment Views

    The View analysis returns good news.

    Drupal 6 Attachment Views

  11. With no errors discernible, we're ready to preview. Looking at the Live preview section, we might already see preview output from our view, but we want to ensure that the expected output will appear for the Page display. But the preview normally shows the default display output unless changed.
  12. Drupal 6 Attachment Views

We'll need to theme this display later, so that it appears where we want it to on the page, but it's fine for now. We had created two test subcontractor records in advance, and both are listed. There's no sense clicking the links at this point, since what we need them to load is the display we're about to create. Next!

Activity 2-2–Subcontractor Attachment view

  1. Let us begin by creating the Attachment display for our current view.
  2. Drupal 6 Attachment Views

    Drupal 6 Attachment Views

    Remember to click the Override button when changing any settings for this display, so that they are only applied to this display and not the others!

    Drupal 6 Attachment Views

  3. In the Basic Settings pane, the only change to make is to set Items to display to 1, as we will be showing only one subcontractor record at a time.
  4. Drupal 6 Attachment Views

  5. Move on to the Arguments pane. We want to be able to supply this display with an argument, so that it will show us a specific subcontractor profile. Click on the + icon, and scroll down through the field list to add Node: Title. Remember, we're using the content_profile module, so each subcontractor profile will be a node.
  6. Drupal 6 Attachment Views

    Titles in custom content types
    In our custom content type, subcontractor, the label of the title field of the node creation form was changed from Title to Company. However, that doesn't change the internal field name, so when using that field as an argument or filter in a view, the field will still be selected as Node: Title.

    The way an argument works is that it is appended to the URL when requesting the page. So, for example, the URL for our view, when live, will be http://guildbuildersinc.com/subs. To request the view showing the subcontractor Acme, the URL would be http://guildbuildersinc.com/subs/acme. Drupal will separate the argument from the rest of the URL, and pass it to the view processor as an argument array, $args. Key 0 of that array will be the argument count, and key 1 will be acme. This way, the view subs will know that it was called with the argument 'acme.'

  7. Adding the argument brings up a subsequent dialog. We want the title of the view to show as the subcontractor company name. Since that is the first (and only) argument, and thus is in position 1 in our argument list, put '%1' in the Title field to indicate that argument 1 will be used as the title. Remember, argument 0 is always a value indicating how many arguments are present in the URL. The fi rst true argument in the second position, but we count from 0. So, for example, if our view took two arguments, first and last name, Joe Smith, the array received in the view would contain a 2 in array subscript 0, indicating two arguments are present. Subscript 1 would contain Joe, and subscript 2 would contain Smith. Specify that an empty page be displayed if either the argument is omitted or does not validate.

    Check the transform spaces to dashes in URL box, so that when the page URL is produced Acme Contracting becomes acme-contracting instead of the acme%20contracting we'd see if spaces remained in the name.

  8. Drupal 6 Attachment Views

  9. We had left the Row style as Fields, and now we need to identify which fields we want. Click the + in the Fields pane, and then check the boxes of the fields we want. Select all the Content fields (these are the custom CCK fields created for the Subcontractor content type), as well as the user e-mail field.
  10. We're asked whether we want to change the way the field data is handled. For most fields we won't want to make any changes, so just click Update for each one.
  11. Drupal 6 Attachment Views

  12. We have a website field (field_website), which gives the URL for the subcontractor's website. Set this field to be displayed as a link, and enter a token, from the list of tokens presented, to use this field's contents for the link destination.
  13. Drupal 6 Attachment Views

  14. Next, we'll move on to the Attachment settings pane that we need to change, which is the Attachment settings pane. Specify that our Attachment display should be attached to the Page display.

    Drupal 6 Attachment Views

    The last thing we'll do to this display is reorder the fields. Right now they're in the same order that they were in when we checked the boxes, which is not the order in which we want them displayed. Click the up/down arrow icon next to Fields, and drag each field into the position we want, and then click Update.

    Drupal 6 Attachment Views

  15. That completes the construction of our primary view. In the following screenshot, we can see the changes we made reflected in the view summary pane.
  16. Drupal 6 Attachment Views

  17. We're ready to preview the view and make sure the display is what we're expecting. First, enter the name of the test subcontractor into the preview argument field and make sure the Page display is selected.
  18. Drupal 6 Attachment Views

  19. Lastly, enter the URL into our browser and check the view with the theme.
  20. Drupal 6 Attachment Views

Drupal 6 Attachment Views Use multiple-display views to add functionality and value to your site!
Published: February 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Theming the subcontractor view

By looking at the previous screenshot, it is apparent that the presentation is far from being user-friendly. The list of subcontractors and the subcontractor details appear to be one large list, and this is with only two subcontractors in the list. Add a few more and the details will be pushed right off the visible page. We'll need to improve on this, and we can do it by theming our View.

The thought of theming gives many people the shakes. While it is certainly a complex topic, we don't need to consume it in its entirety. Let's just work with small pieces for now.

The makeup of a theme

A full theme is basically a combination of some or all of the following:

  • One or more template files
  • A CSS file, or several
  • A set of functions
  • Supporting files

We won't be creating a full theme. We will just be adjusting the existing view theme somewhat. We need to simply create one template file, not even from scratch, and a few entries in one of our theme's CSS files.

Selecting a template file

One of the most confusing aspects of theming to most people is the selection of (and naming of) the appropriate template file. I'll try and remove some of the mystery and headache for you.

There are essentially four layers of output in our Node View. The specifics will vary based on selections made when defining the View, such as whether the style is Rows, Table, Grid, and so on. Let's focus on this view, but keep in mind that some of the following information will vary in subsequent views:

  1. Fields: Things such as the subcontractor name, phone number, and so on.
  2. Rows: Each node can be displayed as a 'row' of one or more fields.
  3. Styles: The output prior to styling being applied to it.
  4. Display: The complete view, already formatted in sections, such as the Attachment, Page, Pager, More link, and so on.

In deciding a name for the template file, the first step is to identify at what point we need to 'interrupt' the process and insert our requirements. We need to alter the formatting of one field, but only one, and we will do that via CSS. We don't need a template file for that. So, what do we need a template file for? We have two displays: the Page display containing the subcontractor list and the Attachment display containing the subcontractor details. We need to separate the two displays.

The format of each display is acceptable as it is. That is, we don't want to change the way either display looks, we just want to take each en masse, as if it were a block, and affect its positioning in relation to the other. So, we can rule out the Field-layer templates, because we're not doing any formatting at the field layer. Likewise, we can eliminate Row-layer templates. Since we're not concerned with restyling the content of our displays, we will have no need for a Style-layer template. That leaves the Display-layer, and that is what we'll need. Note that you can select more than one template layer. For our current need, we're only working with one layer, but depending on the needs at the time, there could be one or more template files needed for one or more layer.

So, we've decided we need a Display-layer template file. What do we do next? Well, here, the View panel can assist us. If we look at the bottom of the Basic settings pane, we will see Theme: Information. Normally, I'd recommend that you make certain you've selected the correct display before clicking the Information link, because the theme information is usually relevant to a specific display, but since we're going to be working at the View level, and not within a certain display, the current display is not a concern.

On clicking the Information link, we are presented with the information shown in the following screenshot.

Drupal 6 Attachment Views

This is usually where people's eyes start to cross or glaze over, followed by the shaking. First, look at the highlighted paragraph headings (which will be blue on your screen). The first is related to Display-layer theming, then Style-layer theming, Row-layer, and then a paragraph for each field in the Field-layer, with the Node Title field (the field that contains our subcontractor name) being the first in the list. At this point we're only concerned with the first paragraph, Display output.

Following that highlighted identification in each paragraph is a series of template file names. If you have not done any theming with the View, the first will probably be bold. The bold filename indicates which file will currently be used to theme that layer. The filenames progress in each paragraph from the least specific to the most specific. That is, in looking for the first time at the initial paragraph, the first file is views-view-tpl.php. This file affects every view in your website. If you were to create your own version of the file and put it in your theme directory, it would then affect every field in every view displayed using that theme.

Now look at the highlighted filename in that paragraph: views-view-Subs--attachment-1.tpl.php. Wow! That's a long one, though the file-layer names are even longer. Ok, let's break it down and clear and uncross those eyes:

  • views: This template is being used with a view
  • view: This template affects views at the individual view level
  • Subs: This template affects only the Subs view that we created
  • attachment: This template affects only the attachment display of the Subs view
  • This template affects only the first attachment display of the Subs view

We're going to create a template file that will affect the Subs view, and therefore, the name will be views-view—Subs.tpl.php. How do we create it? The good news is that we do not have to create the file from scratch. There are example files that we can modify, rename, and save to our theme. The location of these files is in the views module directory, which, depending on your site, will either be located at sites/all/modules/views/theme/ or modules/views/theme/. The following screenshot shows a list of the files available there to be copied.

Drupal 6 Attachment Views

We will choose the file that is listed first in the Theme: Information paragraph that represents the layer we're working with. That will be views-view.tpl.php. Let's get to it!

Activity 2-3–Creating the view template file

Inside the file, we look for mention of attachments and rows, which is the data we need to separate, and find the following:

<?php if ($attachment_before): ?>
<div class="attachment attachment-before">
<?php print $attachment_before; ?>
</div>
<?php endif; ?>
<?php if ($rows): ?>
<div class="view-content">
<?php print $rows; ?>
</div>
<?php elseif ($empty): ?>
<div class="view-empty">
<?php print $empty; ?>
</div>
<?php endif; ?>
<?php if ($pager): ?>
<?php print $pager; ?>
<?php endif; ?>
<?php if ($attachment_after): ?>
<div class="attachment attachment-after">
<?php print $attachment_after; ?>
</div>
<?php endif; ?>
<?php if ($more): ?>
<?php print $more; ?>
<?php endif; ?>

The variable $rows contains the contents of our Page display. $attachment_before or $attachment_after contains the output of our Attachment display, in this case, $attachment_after. What is happening here, with each set of ?php if and ?php endif; statements is that the variable is checked to see if it contains content. If so, the HTML is generated to display that content and wrap it in a div.

We want to separate the Page display and Attachment display. If we leave the template as it is, Attachment displays with a position of Before will appear before the Page display, and those with a position of After will appear after the page display. It's simply the order that items are printed by the template. However, since we're editing the template, we can make the Attachment display appear wherever we want. We are going to have the Attachment display appear prior to the page display, regardless of the position selected in the view template, not for any particular reason other than to show you how to manipulate them. The way we will do this is to insert the following code just prior to the first line of the code shown previously:


<?php if (($attachment_before && $rows)||
($attachment_after && $rows)): ?>
<div class="view-Subs-display-container">
<?php endif; ?>

This block of code checks whether we have a Page display and at least one Attachment display. If so, it creates a container around those displays. We also need to end the container following the block of code that handles the $more link:


<?php if (($attachment_before && $rows)||
($attachment_after && $rows)): ?>
<div style="clear-both"></div>
</div>
<?php endif; ?>

This block of code performs the same test as the first that we inserted, and if it determines the conditions are met, it inserts the instructions to turn off floating, and then closes the container. We need to turn off floating because we will turn it on via CSS in order to have the two displays side-by-side instead of one above the other.

That's it. Now we just save that file in our theme directory, in our website sites/all/themes/acquia_slate/, and name it as we discussed above, views-view--Subs.tpl.php. With that out of the way, we can move on to the CSS changes.

Our theme uses a style.css file to handle positioning and formatting. It also has a local.css file in which overrides to the styles defined in styles.css are placed. In this way, if a newer version of the theme is released, we can update the style.css file without losing the changes we put in local.css.

CSS Files
Each theme comes with its own supporting files, including CSS files, and they are defined in the theme's .info file. The theme being used for this site, Acquia Slate, comes with the local.css file.

The following are the things that we want to accomplish with our CSS changes:

  1. Have the two view displays appear side-by-side.
  2. Provide some demarcation between the two using spacing and a border.
  3. Format the subcontractor name to stand out from the rest of the subcontractor details.

To have our two displays appear side-by-side, we will add the following entry:


.view-id-Subs .view-content,.view-id-Subs .attachment{
float: left
}

The first thing to note is the selectors. The content of our page display is shown in a division with the class view-content. We could have a selector of just .viewcontent, but that would affect every view-content class on every page of the website. We further qualify our selection by specifying that we only want the viewcontent class that is nested within the div with a class of view-id-Subs, which limits this selection to our Subs view. The same is true for the class attachment, which contains the content of our Attachment display. Having selected them, we specify that instead of the normal behavior for a <div>, where a new one begins on a new line, we want the content to float to the left, side-by-side. Having caused the two displays to appear side-by-side, we have the issue of there being no white space between them. Users need white space to imply boundaries, and to give the eyes a moment's rest while reading. Our next entry will add a right margin to the subcontractor list.

.view-id-Subs .view-content {
margin-right: 120px
}

The next entry places a vertical border beside the Attachment display, to set the subcontractor details off from the rest of the page.

.view-id-Subs .attachment {
padding-left: 1em;
border-left: 1px solid #dfa155
}

The remaining two entries are for formatting the subcontractor name. One adds a bottom margin to the <div> that wraps the subcontractor name, and the other increases the text size of that name, makes it bold, and displays it as uppercase.

.view-id-Subs .attachment .views-field-title {
margin-bottom: 6px;
}
.view-id-Subs .attachment .views-field-title .field-content {
font-size: 120%;
font-weight: bold;
text-transform: uppercase;
}

Having made our template and CSS changes, we need to force Drupal to evaluate the new template file. Drupal caches the theme, and would ignore the fact that we've added a template file if cache were not cleared. Whenever a template file is added or deleted, Drupal's cache needs to be cleared. Subsequent edits to the template do not require the clearing of cache. The button to clear the cache can be found at admin/settings/performance, as shown in the following screenshot.

Drupal 6 Attachment Views

The fruits of our labors can be seen as follows:

Drupal 6 Attachment Views

Summary

We learned what an Attachment view is, and how it can be useful. We created a view with a Page display, and added an Attachment display to provide added functionality. We also learned a little about theming a view by creating CSS and a template file.

About the Author :


Douglas Paterson

Douglas Paterson is a full-time acquisition editor and part-time author for Packt Publishing. He is a doctor of Mathematics and has over five years experience of working on programming books across a number of different subjects. He lives in Birmingham, England, with his wife, and his unusually hairy dog, Zak.

Contact Douglas Paterson

Books From Packt

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

Drupal 6 Performance Tips
Drupal 6 Performance Tips

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Grok 1.0 Web Development
Grok 1.0 Web Development

jQuery 1.4 Reference Guide
    jQuery 1.4 Reference Guide

WordPress 2.8 Theme Design
WordPress 2.8 Theme Design

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software