Drupal Training Series
Foundations for OSU Drupal 6
206: Intermediate Views
This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License
What We’ll Be Covering…
Intermediate Views Application
Views Reuse
• Importing Views
– Ex. 01 Import Employee List View
• Cloning Views
– Ex. 02 Create Employee List Clone View
• Exporting Views
– Ex. 03 Export Simple Equipment List View
Multiple Displays
• Overrides
–
–
–
–
–
–
–
Ex. 04 Import Base Recipes View
Ex. 05 Create All Recipes Page Display
Ex. 06 Create Dieter's Delight Page Display
Ex. 07 Create Minute Minder Page Display
Ex. 08 Create Test Recipe
Ex. 09 Add All Override Displays to Primary Links Menu
Ex. 10 Embellish Displays
Exposed Filters
– Ex. 11 Create Exposed Filter Display
Clean Up
• Update Aliases
– Ex. 12 Update Aliases
• Create ImageCache Preset
– Ex. 13 Create ImageCache Preset
Summary
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
Getting Started
As a reminder, to get to your personal development site go to:
http://drupaldev.cws.oregonstate.edu/training/<yourONIDname>/login
From there, log in with your ONID information.
After logging in, please open a second tab in your browser and go
to CWS Training at
http://oregonstate.edu/cws/training
Locate the name of this workshop in the list and click it. This will
take you to a page describing the course with download links at
the bottom of the page.
Download the lab materials to your desktop and unzip them.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
Intermediate Views Application
In the OSU Drupal 6 How to Use Views workshop we began our
exploration of the Views module.
This intermediate level workshop will build upon concepts
introduced in the previous workshop and will add additional
layers of functionality that Views provides.
A major focus in today’s workshop is increasing efficiency through
the utilization of a few key features that Views possesses.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
To This Point…
Prior to starting, for best results, you’ll want to complete the
following:
• Ensure the Cuisine, Course, Food Group, and Meal vocabularies are
created. These vocabularies can be added via import. Please review the
Developing Site Structures slide set for how to do this. All import files
are in the lab materials.
• Rearrange Recipe content type fields as demonstrated in the Generating
Custom Content Types slide set.
• Ensure all Recipe nodes are added and appropriately tagged with
vocabulary terms. The content for this is located in the Generating
Custom Content Types lab materials.
If these elements have not been completed, there may be exercises
that you will not be able to fully process or results that are less than
optimal.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Views Reuse: Overview
We touched lightly on the subject of reuse in the OSU Drupal 6
Generating Custom Content Types workshop. Now, we’ll extend
that same line of thinking over to Views.
The Views module provides the ability to:
• Import
• Clone
• Export
Each of these features can help speed up Views development in
their own way.
Let’s explore these different functions.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
Views Reuse: Import Overview
Importing a view is very similar to importing a custom content
type. Something special needs to be taken into consideration,
though.
If the view you are importing happens to use custom fields in its
query, and if you do not have those custom fields available in
your site, the query will not work as expected.
If the view you are importing is based off of a custom content
type, you will want to also import the corresponding content type
and ensure that nodes have been created using that custom
content type.
Views that use only default system fields such as Title, Body, User,
etc, will integrate seamlessly.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
Views Reuse: Import – Ex. 01 Import People List View
1
To import a view, do the following:
1. Go to Admin menu > Site building >
Views > Import.
2. From your lab materials, copy the
code in the ex-01.txt file and paste
it into Paste view code here field.
2
3. Click the Import button.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
Views Reuse: Import – Ex. 01 Import People List View - Completed
Upon a successful import, the view will
automatically open up into the Views UI.
1. Click on the Preview button to preview the
output.
2. Click the Save button.
This view should work out of the gate. If you have not
created the FFT People content type, though, your
Node:Type filter will display as “in Unknown” and will
have to be reset.
2
1
Note that the three fields used in this view: Node: Title,
Node: Nid, and User: Name, are standard Drupal fields
that exist on all node types – even custom ones such as
the Employee content type that we are filtering on.
If you wanted to use this particular view for another
content type, you could easily do so just by changing the
Filter.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Views Reuse: Clone Overview
A clone is just a copy of something.
Where computer applications are concerned, cloning is often
used when a particular object contains a structure, or other
attributes, that you would like for new objects to also possess.
By using a clone function, an original object can be used as a
template – an object that serves as a pattern for other objects.
Cloning views – and then making any necessary minor
adjustments in the clones – can dramatically increase the
efficiency in which a views collection is developed.
Let’s take a look at how to clone a view…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Views Reuse: Clone – Ex. 02 Create an Equipment List Clone
To create a view clone, do the following:
1
1. From within your People List view, click on
the Clone link in the upper right corner –
this will open up an edit screen for the
new view.
2
2. View name field = equipment_list
3
3. View description field = A simple list of
equipment
4
4. View tag field = Equipment
5. Click the Next button.
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – View To Date
The new view will display in the
Views UI. Note, though, that there
are a few items we’ll have to
change:
• Title
• Filter
• Page Name
• Path
…as all of these items still reference
the original information.
Click the Save button to save what
currently exists.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – Change Title
To change the Title, do the following:
1. In the Basic settings group, click on the
People List link.
1
2. In the Defaults: The title of this view field
enter Equipment List.
3. Click the Update button.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – Change Filter
1
To change the Filter, do the
following:
1. In the Filters group, click on the
Node:Type link.
2. In the Node:Type option group,
uncheck FFT People and check
Equipment.
3. Click the Update button.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – View To Date
Note how the Live Preview output
automatically changes when you
filter for the Equipment node
type.
This is good progress so far. Now
let’s change the rest of our items.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – Change Page Name
To change the Page Name, do the
following:
1. Click on the People List Page tab in the
display list at the left side of the screen to
view the Page display.
1
2
2. In the Basic settings group, click on the
Name: People List Page link.
3. In the People List Page: The name of this
display field enter Equipment List.
4. Click the Update button.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – Change Page Path
To change the Path, do the following:
1. In the Page settings group, click on
the Path link.
2. In the Equipment List Page: The menu
path or URL field enter
view/equipment-list.
3. Click the Update button.
4. Click the Save button.
1
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
Views Reuse: Clone – Ex. 02 Create A Simple Equipment List Clone – Completed
Open another tab in your
browser and test the new path
out.
Note that the fields used in this
view are standard Drupal system
fields: Title, Node ID, and User.
This particular view could be
imported into any Drupal site.
Title field
Node ID (or NID) field
Since our filter is set for a
custom content type, though, if
that custom content type is not
present, the filter will reset itself
to say “Filter in Unknown” and a
new filter would have to be
applied.
User field
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Views Reuse: Export Overview
In addition to importing views, the Views module also allows a
user to export views. This can be a useful time-saver.
Please note, though, that a view created in Drupal 5 will not
properly import into a Drupal 6 site and vice-versa. This is due to
some necessary programming changes in the Drupal core system
that were implemented in Drupal 6.
On a positive note, though, exporting a view is even easier than
importing one.
So let’s get to exporting…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Views Reuse: Export – Ex. 03 Export Equipment List Simple View
To export a view, do the
following:
1. Within the Views UI, click on
the Export link in the upper
right section of the screen.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
20
Views Reuse: Export – Ex. 03 Export Equipment List Simple View - Completed
The export code will appear in a large
text field.
Copy the code, paste it into a plain text
editor such as Microsoft Notepad, and
save the file.
That’s all there is to it.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Multiple Displays: Overview
There may come a time when you would like to create multiple
views based off of the same information source.
A good example of this is a calendar. In a nutshell, a typical
Gregorian calendar is just a collection of 365 days. This collection
of 365 days can be a view itself – Year.
You are probably familiar with other calendar views as well such
as:
• Month – a collection of 28 – 31 days
• Week – a collection of 7 days
• Day – a collection of 24 hours
Creating a brand new view for each of these, and managing that
view collection, could prove to be cumbersome.
Fortunately the Views module allows you to create multiple
displays within the same view using something known as an
override.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Multiple Displays: Recipes View
Our Recipe content has been patiently sitting, waiting for us to
get in and make something of it.
Now is the time.
The Recipe content type contains a substantial variety and
amount of information. With the fields that exist on this content
type, we can already create many different displays including, but
not limited to, the following:
•
•
•
•
•
Meal (breakfast, lunch, or dinner)
Course (appetizer, entrée, dessert, etc.)
Calories
Preparation Time
Cuisine
There are also different things that people in your audience could
be looking for. Let’s experiment with some different displays…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Multiple Displays: Recipes View – Ex. 04 Import Recipes Default View
Since we’ll be creating several overriding
displays, we’ll save a little time and get a bit
more practice importing by using a provided
Recipes default. As a refresher, to import,
do the following:
1
2
1. Click the Import tab on your Views UI.
2. From your lab materials, open the ex-04.txt
file, select it all, copy it, and paste it into the
Paste view code here field on the import
screen.
3. Click the Import button.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Multiple Displays: Recipes View – Recipes Default Overview
Let’s take a quick look at the Recipes default view in the Live
Preview.
1
2
4
5
3
1
2
3
4
5
6
7
8
9
Click the Save button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
6
8
7
9
Multiple Displays: Recipes View – Overrides
An override, in Drupal terms, is when a setting, or a group of
settings, on a view is changed while all other elements still retain
the original settings.
On the following exercises, we’ll override different elements of
the Recipes default view to achieve the following:
1. An All Recipes display that shows a paginated list of all available
recipes on the site.
2. A Dieter's Delight display that only returns dishes containing less
than 200 calories per serving
3. A Minute Minder display that only returns dishes requiring less than
1 hour to prepare and cook.
4. A Recipe Box view with an Exposed Filter which allows users to filter
content based on ethnic dishes and, optionally, meals and courses.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – Create Page Display
1
To create the All Recipes
display, first we’ll need to
create a Page Display based
off of the Default settings and
and give it a Name:
2
1. In the upper left, click the
Add display button.
2. In the Basic settings group,
click on the Page link.
3. In the Name of this display
field enter All Recipes Page.
3
4. Click the Update button.
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – Define Page Path
Now define the All Recipes page
path:
1. In the Page settings group, click
on the None link.
2. In the Menu path field enter
view/recipes-all.
3. Click the Update button.
1
4. Click the Save button.
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – View Settings to Date
Note that after a save, the view
resets to the Defaults tab.
Take a look at the settings on the
Defaults tab, then click on the All
Recipes tab and compare the
settings
Defaults = Normal Text
Page Display = Italic Text
You’ll notice that the Default
settings have normal text while
the All Recipes page display has
mostly italicized text
This is one of the first visual clues
to keep in mind when working
with overridden displays
Now let’s work with some
pagination settings…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – Update Default Pager Settings
Sometimes while making overriding
displays, you may encounter a time
when it’s a good idea to apply a
change in your display to the Default
display. Let’s do this with the Use
pager settings, in the Basic settings
group:
1
1. Click the Use pager item No link.
2. Check the Use a pager item’s Full
pager option.
3. Click the Update default display
button.
2
Upon doing this, the Default
display’s Use pager settings will also
update.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
30
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – Update Default Items Per Page
Let’s update the Items per page,
for both All Recipes and the
Default also:
1
1. For the Items per page element
click the 10 link.
2. In the Items per page field enter 5.
3. Click the Update default display
button.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – Completed
Change in the view won’t be immediately evident –
scroll down to the bottom of the page to see the pager.
There should also only be 5 items displaying per page.
To get a good idea of how this would look on a typical
page in your site, click the Save button and then, in
another tab in your browser, visit the URL using your
view/all-recipes path.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – View Page Display
Our All Recipes Page display is starting to look pretty good. Now let’s
return back to the Views UI tab and add some additional displays.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
Multiple Displays: Recipes View – Ex. 05 All Recipes Display – All Recipe Display Settings
It’s helpful to note that as pieces of
the Defaults view are overridden in
new displays, the overrides are
indicated as normal, non-italicized
text in the overriding display’s
settings.
Clicking on the All Recipes tab, it
can be seen that the Name and
Page settings elements contain
non-italicized text. All of these
settings are respective to the All
Recipes display only.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
Multiple Displays: Recipes View – Ex. 06 Dieter's Delight Display – Add Page Display
Now it’s time to create the Dieter's
Delight display, which will limit the
returned content to those that
contain less than 200 calories per
serving.
To create this display, first we’ll
1
need to create another Page Display
:
2
1. In the upper left, click the Add
display button
2. In the Basic settings group, Name
element, click on the Page link
3. In the Name of this display field
enter Dieter's Delight Page.
4. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
4
35
Multiple Displays: Recipes View – Ex. 06 Dieter's Delight Display – Define Path
Now define the Dieter's
Delight page path:
1. In the Page settings group,
click on the None link.
2. In the Menu path field enter
view/recipes-diet.
3. Click the Update button.
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
Multiple Displays: Recipes View – Ex. 06 Dieter's Delight Display – Add Filter Override
We will override this entire
group…
1. In the Filters group, click the
Filters header.
2. Click the Update and override
button.
1
3. Note the text style change in
the Filters group. This is
important as it indicates an
override is in effect for all
filters on this display.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
Multiple Displays: Recipes View – Ex. 06 Dieter's Delight Display – Add Filter
To achieve our desired result, we’ll
have to filter based on the amount in
the Total Calories field – it needs to be
200 calories or less per serving. To
apply this filter, do the following from
within the Dieter's Delight display:
1
1. Filters group = click + button
2. Groups filter box = Content
3. Content option = Total Calories
2
4. Click the Add button
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
Multiple Displays: Recipes View – Ex. 06 Dieter's Delight Display – Configure Filter
To configure the filter field so it filters
only those items containing 200
calories or less, do the following:
1. From the Operator drop-down,
select Is less than or equal to.
2. In the Value field enter 200.
3. Click the Update button.
2
1
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
Multiple Displays: Recipes View – Ex. 06 Dieter's Delight Display – Completed Display
In Live preview, the result set
will display only those items
containing 200 calories or less.
Click the Save button to save
this display.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Add Page Display
Next comes the Minute Minder display,
which will limit the returned content to
those items that take less than 15
minutes to prepare and 45 minutes to
cook.
To create this display, first we’ll need
to create a Page Display based off of
the Default settings and give it a Name:
2
1
1. In the upper left, click the Add display
button.
2. In the Basic settings group, Name
element, click on the Page link.
3. In the Name of this display field enter
Minute Minder Page.
4. Click the Update button.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Define Path
Now define the Minute
Minder page path:
1. In the Page settings group,
click on the None link.
2. In the Menu path field enter
view/recipes-minute-minder.
3. Click the Update button.
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Add Filter Override
We will override the entire
Filters group…
1. In the Filters group, click the
Filters header.
2. Click the Update and override
button.
1
3. Note the text style change in
the Filters group. This is
important as it indicates an
override is in effect for all
filters on this display.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Add Prep Time Filter Override
1
To achieve our desired result, we’ll
have to filter based on the fields Prep
Time (<=15 mins) and the Cook Time
(<=45 mins). We’ll start with the Prep
Time. From within the Minute Minder
display:
1. In the Filters group click the + button.
2. In the Groups filter box select
Content.
2
3. Check the Content option Prep Time.
3
4. Click the Add button.
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Configure Filter
To configure the filter field so it filters
only those items containing a Prep
Time of 15 minutes or less, do the
following:
1. In the Operator drop-down select Is
less than or equal to.
2. In the Value field enter 15.
3. Click the Update button.
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Preview to Date
In Live preview, the result set will display
only those items requiring 15 minutes or
less to prepare.
If you have created all recipe nodes and
entered the data correctly, you should see
5 items in your result list.
We still have one more filter to add,
though.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
Multiple Displays: Recipes View – Ex. 07 Minute Minder Display – Now You Do It
The Cook Time field now needs to be added
and configured.
Filters group
Click the + button
Groups filter field = Content
Content option = check Content:Cook Time
Click the Add button
Operator field = Is less than or equal to
Value field = 45
Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
Multiple Displays: Recipes View – Ex. 08 Add Test Recipe – Now You Do It
The result set didn’t change because all of the Cook Time values in the first result set
already fell within the Cook Time filter criteria. So let’s create a test recipe with a 15
minute Prep Time and a Cook Time of 45 minutes to double-check this display.
Test Recipe
Open another tab in your browser and enter your
training site URL in the address bar
Click Create Content > Recipe
Add a Recipe node using text from Section Ex. 08 and the
ex-08.png image from your lab materials
Once the node is created, return to your Minute Minder
display in Views, click the Preview button in Live preview
again, and see if the new recipe shows in the display
It should display – if the recipe doesn’t display, double
check your values in the Cook Time filter and on your
node and correct as needed.
Make sure to Save your view after checking.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Multiple Displays: Recipes View – Ex. 09 Add Displays to Primary Links Menu
Remember how to add views to Menus
through the Views UI? Let’s refresh, starting
with the All Recipes display:
1. Click on the All Recipes tab.
2. In the Page settings group, click on the No
Menu link.
3. For the Type option check Normal menu
entry.
4. In the Title field enter Browse All Recipes.
5. In the Description field enter Browse all
recipes on Food for Thought.
6. In the Menu drop-down select Primary links.
7. In the Weight field enter -47.
8. Click the Update button.
1
2
3
4
5
6
7
Using the information on the following page, repeat this
process for the Dieter's Delight and Minute Minder displays
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
8
Multiple Displays: Recipes View – Ex. 09 Add Displays to Primary Links Menu – Now You Do It
Use the following information to add the Dieter's Delight and Minute Minder displays to
the Primary links menu.
Dieter's Delight display
Minute Minder display
Click the Dieter’s Delight tab.
Click the No Menu link
Type option = Normal menu entry
Title field = Dieter's Delight
Description field = Check out our delicious, diet
friendly recipes
Menu field = Primary links
Weight field = -46
Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Click the Minute Minder tab.
Click the No Menu link
Type option = Normal menu entry
Title field = Minute Minder
Description field = On the run? Sample one of
our quick and easy selections.
Menu field = Primary links
Weight field = -45
Click the Update button
Click the Save button
50
Multiple Displays: Recipes View – Results to Date
In a different browser tab, enter
the URL of your site, and test
any of the new menu links.
You may notice that all of the
views have the title Food for
Thought Recipes. This could
prove to be misleading and
some introductory text for each
view might be in order.
Return to your tab containing
Views and let’s embellish each
display a bit to more uniquely
convey their purposes.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51
Multiple Displays: Recipes View – Ex. 10 Embellish Displays – Override All Recipes Title
To override the All Recipes display
default title, do the following:
1. Click on the All Recipes display
tab.
1
2
2. In the Basic settings group, click
on the Food for Thought Recipes
link
3. In the Title of this view field enter
Browse All Recipes.
4. Click the Update and override
button.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
Multiple Displays: Recipes View – Ex. 10 Embellish Displays – Override All Recipes Header
To override the All Recipes display header:
1. In the Basic settings group, click on the
Header: None link.
2. In the All Recipes: Header field paste the
code from Section Ex. 10a.
3. For the Input format option select Full
HTML.
4. Click the Update button.
5. Click the Save button.
1
2
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
53
Multiple Displays: Recipes View – Ex. 10 Embellish Displays – Display to Date
In another tab in your browser, check
the Browse All Recipes display.
The title and header are now more
suited to the content, but the footer
could use a little bit of work.
Since all of our displays use the same
pager, it might be good to go in and add
a default footer to help dress up the
appearance at the bottom of the view.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
54
Multiple Displays: Recipes View – Ex. 10 Embellish Displays – Add Default Footer
We won’t be performing any overrides
here - instead we’ll be working directly in
the Defaults display, which will add a
footer to all of the displays. To add a
default footer:
1. In the Defaults tab Basic settings group,
click on the Footer:None link.
1
2. In the Defaults: Footer field paste in the
code from Section Ex.10b.
2
3. For the Input format option select Full
HTML.
4. Click the Update button.
3
5. Click the Save button.
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
Multiple Displays: Recipes View – Ex. 10 Embellish Displays – Completed All Recipes Display
Go to your results tab and refresh your
browser to examine the updated All
Recipes display.
The new title and header not only
better describe this particular display,
but also help to flesh out the top.
The new footer adds a little extra visual
effect to the bottom of the page and
makes it consistent with our other
views.
Now it’s time to head back to Views to
adjust the titles and headers of the
other two displays.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
56
Multiple Displays: Recipes View – Ex. 10 Embellish Displays – Now You Do It
Use the following information to change the titles and header information for the
Dieter's Delight and Minute Minder displays.
Dieter's Delight display - Basic settings group
Title Override
Click the Food for Thought Recipes link
Title of this view field = Dieter's Delight
Click the Update and override button
Header Override
Click the Header: None link
Dieter’s Delight:Header field = paste code from
Section Ex. 10c
Input format option = Full HTML
Click the Update and override button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Minute Minder display - Basic settings group
Title Override
Click the Food for Thought Recipes link
Title of this view field = Minute Minder
Click the Update and override button
Header Override
Click the Header: None link
Minute Minder:Header field = paste in code from
Section Ex. 10d
Input format option = Full HTML
Click the Update and override button
Click the Save button
57
Multiple Displays: Completed Overridden Display Assortment
There now exist three new “sections” in the site, making the site
deeper – with only three added navigation links.
Additionally, there is a big advantage gained in the fact that the
content in each view display is self-populating - for each new
recipe that is added to the site, it will show (or not show) in each
view as specified.
Now it’s time to take things a step further and put the power of
filtering into your audience’s hands.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
58
Exposed Filters: Overview
Exposed filters, in Views, is a tool that allows a Drupal site builder
the ability to provide a faceted search feature to the audience at
large by utilizing multiple filtering tools.
We’ve already actually experienced exposed filters quite a bit.
Here are some examples, within the Drupal environment itself,
where we’ve been the “audience” using the exposed filter.
Now it’s time to learn how to provide our audience with these
tools so they can search for content based upon their own criteria.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
59
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Create Page Display
The exposed filter display can be
created as an override display from
within the existing Recipes view as
well. As with the other overrides
that we’ve done, we’ll need to first
create a Page Display:
2
1. In the upper left, click the Add
display button.
2. In the Basic settings group Name
element click on the Page link.
1
3. In the Name of this display field
enter Recipe Box Page.
4. Click the Update button.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
60
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Override Title
To override the Title:
1. In the Title element, click on the
Food for Thought Recipes link.
1
2. In The title of this view field
enter Recipe Box.
3. Click the Update and override
button.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
61
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Add Header
To override the Recipe Box display default
header:
1. In the Basic settings group, click on the
Header: None link.
2. In the RecipeBox: Header field paste in the
code from Section Ex. 11a.
3. For the Input format option select Full
HTML.
4. Click the Update and override button.
1
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
62
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Add Path
Now add the Path:
1. In the Page Settings group
Path element, click on the
None link.
2. In The menu path field
enter view/recipe-box.
3. Click the Update button.
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
63
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Add Filter Override
We will override this entire
Filters group…
1. In the Filters group, click the
Filters header.
2. Click the Update and override
button.
1
3. Note the text style change in
the Filters group. This is
important as it indicates an
override is in effect for all
filters on this display.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
64
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Add New Filter
To add an exposed filter, do the following
within the Recipe Box display:
1. In the Filters group click the + button.
2. In the Groups dropdown box select
Taxonomy.
3. For the Taxonomy option select Taxonomy:
Term with ID in the description.
4. Click the Add button.
5. For the Vocabulary option select Cuisine.
6. For the Selection type option select
Dropdown.
7. Click the Update button.
1
2
3
6
5
4
7
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Override, Expose & Configure Filter
1
To finish the exposed filter addition, do
the following in the configuration
panel that appears:
1. Click the Expose button.
2. In the Label field enter Cuisine.
3. Click the Update button
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Preview to Date
Now when using Live
Preview to look at the
Recipe Box display, note
the Cuisine dropdown box
that appears at the top of
the display.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Now You Do It
Use the following information to add the Course and Meal filter overrides to the Recipe
Box display.
Course filter
Meal filter
Add Filter
Add Filter
Filters group = click the + button
Groups dropdown box = Taxonomy
Taxonomy option = Taxonomy: Term with ID in
the description
Click the Add button
Vocabulary option = Course
Selection type option = Dropdown
Click the Update button
Filters group = click the + button
Groups dropdown box = Taxonomy
Taxonomy option = Taxonomy: Term with ID
in the description
Click the Add button
Vocabulary option = Meal
Selection type option = Dropdown
Click the Update button
Configure Filter
Configure Filter
Click the Expose button
Label field = Course
Click the Add button
Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Click the Expose button
Label field = Meal
Click the Add button
Force single option = unchecked
Click the Update button
68
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Preview to Date
When previewing in Live
Preview, note the new
filters that are being added
to the top of the display.
Items that have a Forced
single configuration will
appear as dropdown boxes
– only one choice can be
selected from them
Items that do not have a
Forced single configuration
will show as a list box –
here, multiple selections
can be made
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
69
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Add Term ID Filter
1
The final filter we’ll add to our
display is a little bit different in that
the Food Groups vocabulary list we
will be using is hierarchical – so we’ll
use a different type of Taxonomy
filter which will traverse down the
vocabulary’s hierarchy for a search:
1. In the Filters group click the +
button.
2
2. In the Groups filter field select
Taxonomy.
3
3. For the Taxonomy option select
Taxonomy:Term ID (with depth).
4. Click the Add button.
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Configure Term ID Filter Extra Settings
The first round of configurations
that must be made for the Term
ID filter must be set:
1. For the Vocabulary option
select Food Groups.
3
1
2. For the Selection type option
select Dropdown.
3. Check the Show hierarchy.
5
4. For the Depth field select 5.
5. Click the Update button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
2
71
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Expose & Configure Term ID Filter
A second set of configurations must
be completed regarding how the
exposed filter should function:
1
1. Click the Expose button.
2. In the Label field enter Ingredients.
3. Uncheck the Force single option.
4. Click the Update button.
3
2
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
72
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Preview to Date
Take a look at the Recipe Box
display down in Live Preview.
The full collection of filters
should now show.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
73
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Exposed Form in Block Override
The final part of this display
configuration involves putting the
exposed filters into a block. To do
this:
1. In the Basic settings group, Exposed
form in block element, click on the
No link.
2. For the Exposed form in block
option check Yes.
3. Click the Update and override
button.
4. Click the Save button.
1
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
74
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Configure Block
1
Exposing the filter form in a block will result in
the generation of a block containing the filters
for this display. To configure and enable the
filter block, do the following in another tab:
2
1. Go to Admin menu > Site building > Blocks >
Exposed form: recipes-page_4 configure link.
2. In the Block title field enter Recipe Box.
3. For the Page Specific Visibility Settings option
select Show on only the list page.
4. In the Pages field enter <front>, recipes* and
view/recipe*.
5. Click the Save block button.
3
Enable the block by putting it at third position
down in the right sidebar region and clicking
Save blocks on the Blocks main page.
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
75
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – View & Test Exposed Block
Go to your Home page to view and
test the new Recipe Box filter tool.
Experiment with the different filters –
all have been set as optional.
Once you’ve decided upon a group of
search terms, click the Apply button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
76
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Empty Result Set
In the course of your experimentation
you may discover an empty result set.
This is something that should be
addressed.
While it is fine for your site to not have
any matching results in a filter, your
audience should never just pull up a
blank page with no instruction or
explanation.
A quick trip back to Views will fix this.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
77
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Empty Result Set
Returning back to the Recipes view, the
final addition to be made is within the
Empty text element – this should actually
be done in Defaults:
1. In the Default tab Basic settings group,
Empty text element, click on the None
link.
1
2. In the Empty text field paste in code
from Section Ex. 11b.
2
3. For the Input format option select Full
HTML.
3
4. Click the Update button.
5. Click the Save button.
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
78
Exposed Filters: Recipes View – Ex. 11 Exposed Filter Display – Completed
Return to the tab with your empty result set in and reapply the filter.
You should now see your message in the empty result set.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
79
Clean-Up: Ex. 12 Alias Update – Overview
If you click on an image in your Recipe Box view, you will be taken
to that node. You’ll note that the Recipe Box filter block goes away
– which isn’t very convenient.
It does this because we configured it to only show on the front
page, on all pages with where the path starts with view/recipe, and
on all pages that have recipes as a prefix to the rest of the URL, such
as recipes/quick-lasagna.
But none of our recipe paths start with the word recipes, right?
Does this mean we need to go into each node and change the
path?
No.
We can do some configurations in Pathauto, the module that
controls our aliasing, set it up so that all our recipes start with the
word recipes, and bulk update all of the current ones.
Let’s check this out…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
80
Clean-Up: Ex. 12 Alias Update – Pathauto Configuration – General Settings
To configure your alias paths, in a spare tab
in your browser, go to Admin menu > Site
building > URL aliases > Automated alias
settings and do the following:
1
1. Click on the General settings fieldset to
open it.
2. In the Update actions group, select the
Create a new alias. Redirect from old alias
option.
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
81
Clean-Up: Ex. 12 Alias Update – Pathauto Configuration – Node Path Settings
The node path settings allow you to
automate aliases based on the node
type. We’re going to set up this alias
just for our Recipe node type:
1
1. Click on the Node paths fieldset to
open it.
2. In the Pattern for all Recipe paths field
enter recipes/[title]. This will put the
title of the node after the word
recipes in the URL path for all Recipe
content.
3. Click the Save configuration button.
2
Now we just need to update our the
aliases for our nodes…
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
82
Clean-Up: Ex. 12 Alias Update – Pathauto Configuration – Bulk Update
To perform a bulk alias update, go
to Admin menu > Content
management > Content and do the
following:
1
1. Filter all your Recipe content by
checking the type radio button,
selecting Recipe from the
corresponding drop-down, and
then clicking the Filter button.
3
2. Select all of the Recipe content by
clicking in the topmost checkbox in
the table header.
4
3. In the Update options drop down,
select Update URL alias.
2
4. Click the Update button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
83
Clean-Up: Ex. 12 Alias Update – Pathauto Configuration – Result
Checking back on a recipe node, you should now see an updated
alias as well as the Recipe Box filter block.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
84
Clean-Up: Ex. 13 Create ImageCache Preset – Overview
Remember our friend ImageCache? We’re going to revisit this
module to add a new preset that will shrink our Recipe images down
just a bit so they fit better in the condensed space that we have.
The current size of these images is 300 pixels x 200 pixels. We want
to keep the rectangular shape, but decrease the width by 50 pixels.
To keep our aspect ratio, this means we want to resize the image to
250 pixels x 167 pixels.
We also want to ensure that any images that are uploaded in the
future are displayed within these dimensions.
So let’s create a preset using a Scale and Crop action and then apply
it in our view defaults…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
85
Clean-Up: Ex. 13 Create ImageCache Preset – Add Preset Name
To create our ImageCache preset,
we first need to give it a name, so
go to Admin menu > Site building >
ImageCache > Add new preset and
do the following:
1. In the Preset Namespace field
enter the name 250x167-scalecrop.
1
2
2. Click the Save Preset button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
86
Clean-Up: Ex. 13 Create ImageCache Preset – Add Scale and Crop Action
You will be redirected to the Actions
list:
1. Select the Scale and Crop action.
2. You will be redirected into the
settings panel for the Scale and Crop
action for this preset.
2
3. In the Width field, enter 250.
3
4. In the Height field, enter 167.
1
4
5. Click the Create Action button.
5
6. You will be redirected back to the
Actions page.
6
7. Click the Save Preset button.
Now we just need to apply the preset
to the image field in our Recipes view.
7
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
87
Clean-Up: Ex. 13 Create ImageCache Preset – Apply ImageCache Preset
Return to the tab with your Views UI in it.
We’re going to apply our change to the
Defaults, so all of our views are treated with
the same change:
1. In the Defaults tab, Fields group, click on the
Content:Photo link to open its configuration
panel.
1
2. In the Format drop-down at the bottom of
the configuration panel, select 250x167scale-crop image linked to node.
3. Click the Update button.
4. Click the Save button.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
88
2
Clean-Up: Ex. 14 Create Recipe Environment – Adjust Region & Page Visibility for Recipe Box Block – Now You Do It
The Recipe Box block is a little ugly, on the front page. Let’s make it so the block no
longer shows on the front page, and is in the middle sidebar region.
Go to Admin menu > Site building > Blocks
to do the following:
Block Configuration
Locate the Exposed form: recipes-page_4 block
and click its configure link
Page specific visibility settings field = erase
<front>
Click the Save block button
Configure Filter
Locate the Exposed form: recipes-page_4 block
and put it in the middle sidebar region
Click the Save blocks button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
89
Clean-Up: Ex. 13 Create ImageCache Preset – Completed
Now, visit any view in your site. You’ll see that all images have been
updated to the smaller ImageCache preset.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
90
Summary
It’s been a busy day in Views. During the course of this workshop
we covered quite a bit of ground:
•
•
•
•
•
Importing
Cloning
Exporting
Overrides
Exposed Filters
Believe it or not, we still haven’t covered everything that Views
can do.
The best way to get a full grasp of Views capabilities is to get in
and experiment with it. Use your training sites as a sandbox to
experiment in and remember that, with the power of importing
and exporting, your experiments won’t be a waste of time.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
91
Conclusion
This completes the OSU Drupal 6 Intermediate Views tutorial. For
additional tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training
To view and register for all OSU Drupal 6 Workshops, visit the
Professional Development Central Registration site at:
http://oregonstate.edu/cws/register
To submit a Help Ticket or make a Site Request on-line, go to:
http://oregonstate.edu/cws/contact
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
92