Theming Drupal 5 Views Recipes

From ThemesWiki

Jump to: navigation, search
Theming Drupal 5 Views Recipes
Official Page
Project Documentation
Download
Source Book
200px-1847196969.jpg
ISBN 978-1-847196-96-5
Publisher Packt Publishing
Author(s) Marjorie Roswell

Contents

[edit] Themeable functions reference

Ingredients

No additional module are required

One of the great powers of Drupal is "themeable functions" default functions which output HTML, which can be overridden by the theme. The following API page contains a list of selected themeable functions that come with Drupal core.


http://api.drupal.org/api/group/themeable/5

This recipe generates a much more comprehensive list of themeable functions from your site, including functions from contributed modules, and a link to an API page. The link will not be valid for all functions (since the contributed modules API site does not include all Drupal files), but it's an overridingly helpful block of code.

Place the following code into a block or a story. Be sure to remember to change the Input format to PHP Code. 

 <?php
  print '<ol>';
  $functions = get_defined_functions();
  foreach($functions['user'] as $function) {
  if(substr($function, 0,6)=='theme_')
  print "<li><a href='http://api.freestylesystems.co.uk/api/ function/$function/5' target='_blank'>$function</li>";
  }
  print '</ol>';
 ?>

If it's a block, place the block in a region, at admin/build/blocks, and visit a page containing the block. If the code is a content item, view the content. The number of themeable functions will vary according to your site.


Click on some of the links, and explore the theme functions.

Recipe notes

The code above selects all the defined functions that start with theme_, and then prints them with a link to the Contributed Module API site. Each API page displays the function signatures and code, along with parameter definitions, and a link to other places where the function is called.

The Devel module also includes a similar function reference (not just theme functions) at http://YOURSITE.com/devel/reference. The links, however, lead to the Drupal API page. Since this does not contain contributed modules, any contributed modules functions will lead to Page not found.

The Drupal handtutorial uses the spelling themeable with an "e". Many people prefer themable. When doing web searches on this topic, try both spellings. In fact, you may try even five variations! Theming function, themeing function, theme function, and themable function are all sometimes used as a synonym for themeable function. Just to add to the fun: there is an actual function named theme(). We'll see how the theme() function is used to call themeable functions.

[edit] Displaying Themeable function names in Source Code

Recipe 68 provided a reference to all of the site's themeable functions. Yet even with a comprehensive list of available functions, it can sometimes be a little tricky to determine exactly where in the site the functions are used. This recipe will make these functions easier to track down. This temporary change to core Drupal code should only be used on a development site, not on a live site.

1. Make a backup of theme.inclocated in the Drupal includes directory.

2. Edit the themefunction found on line 162 of theme.inc Replace this line: 

 $output = call_user_func_array($functions[$function], $args);
 with the following two lines:
 $output = call_user_func_array($functions[$function], $args);
 return "<!-- BEGIN theme_$function -->\n$output\n<!--END theme_$function -->\n";

3. View the source code of a page a browser (in Firefox or Chrome, press Ctrl+U, or right-click the page, and choose View Page Source). Then do a find (Ctrl+F in most browsers) for the word "BEGIN". Or, if you know what function you're looking for, search for that.


  • This code, while it works beautifully, may also issue a warning message. Make a copy of the code, so you can use it when needed, and always restore the original file especially before making updates to the live site.

Recipe notes

While talking about source code for themers, three terrific Firefox add-ons are worthy of mention.

  • Firebug cheap wicked tickets is widely known, and essential.
  • The Web Developer Toolbar cheap justin bieber tickets offers a set of features with some overlap of Firebug, but most themers will be happy to have both.
  • The View Source Chart add-on cheap lady gaga tickets offers friendly visualization of nested blocks, and other HTML markup, including the associated IDs and classes.

[edit] Using Panels with SimpleFeed

Ingredients

  • Enable the Panels, Panel pages, and View panes modules
  • Enable the SimpleFeed and SimpleFeed Item modules
  • Unzip utility

In this recipe, we feed bicycle sale listings from craigslist into Drupal content items, and then use the Views and Panels modules to lay them out on the page. If you implement this recipe, please become familiar with the craigslist Terms of Use [http://www.craigslist.org/about/terms.of.use http://www.craigslist.org/about/terms.of.use].

[edit] Setup

1. Install 70-53670-29070-291646-204 and enable the Panels and SimpleFeed modules. Check the Ingredients for the five modules that need to be enabled for this recipe. The SimpleFeed module creates two content types: feed and feed_item.

2. Download the SimplePie program from SimplePie.org, and extract the simplepie.inc file into the <DRUPALROOT>/sites/all/modules/simplefeed directory.

3. We don't want our site to allow comments on craigslist posts. Set the Default comment setting to Disabled at both admin/content/types/feedand admin/content/types/feed-item.


4. There are more than a dozen permissions among the various Panels and SimpleFeed modules that we have installed. Become familiar with them at admin/user/access.

[edit] Creating Feed Content

5. Go to http://baltimore.craigslist.org/and click on the bikeslink in the for sale section.

6. Search for tandem.

7. Click on the RSS feed icon at the bottom of the page, and copy the URL from the browser into the clipboard. In this case, the URL is http://baltimore.craigslist.org/search/bik?query=tandem&minAsk=min&maxAsk=max&format=rss.

8. Go back to the Drupal site and create a feed at node/add/feed.

It's tempting to try to create a feed at admin/settings/simplefeed, but there's no feed "add" link on the settings page (we'll leave all the settings as the default, for now). It's also tempting to try to create a feed at admin/content/feed, but there's no "add" button there either. A feed is a special content type.

Enter a name, a description, and paste the RSS URL.

9. Once the feed has been submitted, the RSS feed node will include new links at the top: Refresh Feed and Empty Feed (if the SimpleFeed Statistics module is enabled, there will also be a Feed log link).

Click on Refresh Feed.

Now we've got new content! The content is found in another content type, called Feed Item.

10. Repeat Steps 4 to 8 once or twice more. Try, for instance, search terms such as Recumbent, or Folding|Folder (that last search term will find Folding or Folder bikes).

[edit] Create Views

We're going to take a simple approach and create two separate views, one for Tandems, and one for Folding Bikes.

11. First, we'll make note of the node IDs of the Testking 642-873 feeds. Visit the Content page at admin/content/node and click the type radio button. Select Feed, and press the Filter button. Move the cursor over the Tandem and Folding Bike feeds and make note of the Node ID in the browser's status bar (usually in the lower left). It is helpful to actually write down the ID numbers and their feed names.

12. Create two separate Testking 642-504 views. The easiest way to do this is to create the view first, clone it, and then make the necessary changes in the second view (don't forget to change the Parent Feed Node ID, along with the other Testking 70-648 settings, in the cloned view). For the most part, this is a basic view.

The item Testking 1Y0-A09 requiring special attention is the Parent Feed Node ID. Use the Node IDs determined in the previous step.

Name


tandem


folding


Description


Tandem bikes from craigslist


Folding bikes from craigslist Testking 350-018


ProvidePage View


Checked


Checked


URL


tandem


folding


View Type


Teaser List


Teaser List


Title


Tandem Bikes


Folding Bikes


Use Pager


Checked


Checked


Nodes Per Page


5


5


Filters

Node: Published Equals Yes

Node: Type Is One Of Feed Item

SimpleFeed Feed Item: Parent Feed Node ID is All of (Select the correct Parent Feed Node ID)

Node: Published Equals Yes

Node: Type Is One Of Feed Item

SimpleFeed Feed Item: Parent Feed Node ID is All of (Select the correct Parent Feed Node ID)

Sort Criteria


Node: Created Time Descending


Node: Created Time Descending


[edit] Enabling specific Views for Panels

13. In Panels Version 1, all views are available to panels by default. In Panels 2, the Views Pane module must be configured to enable specific views. Go to admin/panels/views and add both the tandem and folding views panes (for both views panes, click the Create panel view button, review the settings, and click on Save).

[edit] Panels setup

14. Go to admin/panels/panel-page/add. Review the available options, and choose Two column stacked.

15. This takes you to the Add Panel page. Enter the name, title, CSS ID, and Path.

Panel Name


bikes_for_sale


Page Title


Bikes for Sale


CSS ID


bikes-for-sale


Path


bikes-for-sale


Note that all four panes (Top, Left side, Right side, and Bottom) are described on the right portion of the screen as Empty.

16. Click on the Save and proceed button.

17. The Panels interface includes eight tabs.

The Preview will be empty until we fill the panels with content. Layout and Settings contain the options that we have already set.

Let's start in the Content tab where we'll enter content for the Top, Left side, and Right side (we'll leave the Bottom pane empty). Click on the Plus (+) sign in the Top pane.

18. The Add Content to Top popup appears. Explore the available options and choose New Custom Content.

19. Enter a Title and a Body and click on the Add pane button.

Title: Bikes for Sale

Body: Bikehon.org is pleased to bring you sale listings from baltimore.craigslist.com.

20. In the left pane, click on the plus button, and, add the Folding Bikes view (only the views specified in Step 12 are available to this list).

21. In the Right pane, click on the plus button, and add the Tandem Bikes view.

22. Click on the Save button.

23. Click on the Preview tab and note that we now have two Bikes for Sale headings.

24. To rectify this, go to Layout Settings tab and check Hide title. While there, change the Default Panel Style to Rounded corners. Press the Save button.

25. Go back to the Preview tab, and click on the link to the Real panel URL, bikes-for-sale (note that the panels page provides helpful mouseover links for editing views).

26. If you wish to limit how many items display in each pane, return to the views panes settings at admin/panels/views. Edit each pane and set the Items to display to a small number, such as 3 or 4 (you may even place just one node into a pane).

Each views pane defaults at first to the number of nodes that we set up in the source View definition. However, the Items to display setting determines the number of nodes that display in the pane. Modifying the View's Nodes per page after the pane was created will not modify the Items to display pane setting after it's been created.

27. This is a good time to read the other pane options, as well, before clicking on Save.

[edit] Placing Panels on the Front Page

28.We could add our panels URL to a standard menu. In this case, we will move our panels to the site's home page. Go to admin/settings/site-information and set the Default front page to bikes-for-sale.

Recipe notes

  • Given the variety of feed formats, expect to spend some time in the issue queue to successfully import your feeds. Some issues are not feed-specific. For instance, several people have reported issues with SimpleFeed and Poormanscron.

A patch at http://drupal.org/node/372498 prevents the need to remember the Parent Feed Node ID. If this gets incorporated into the module, Step 11 will not be required.

An alternative to SimpleFeed is FeedAPI. The two modules do not work together. You must entirely uninstall one module set to get the other to work. Disable the modules and then uninstall them at admin/build/modules/uninstall.

  • There's a nice comparison of six different feed modules at http://groups.drupal.org/node/4547. The content is somewhat dated, but the page is a wiki, so you may update it with your wisdom.
  • Brief Panels 2 documentation comes with the module at admin/panels. Additional helpful screencasts are available at http://blip.tv/file/600413/ and http://blip.tv/file/735666/ and http://blip.tv/file/1004793/.
  • The best way to understand panels is to experiment. Try dragging panes to different locations. Try various offset settings in separate Views panes. Using offsets, a single view could be the source for Top, Left, Middle, and Right panes.Website design servicesWeb 2.0 Design
  • Coders will want to look at the two Views include files that come with the simplefeed module: simplefeed_item_views.inc and simplefeed_views.inc. Here you will find implementations of hook_views_tables, hook_views_arguments, and good old hook_views_default_views.

[edit] Format the Pager with CSS-only modifications

Ingredients

A view with a pager

Over the next several recipes we will look at ways to customize the output of theme functions. In this recipe, we use CSS to alter the style of the site's pagers. The pagers are generated by the theme_pager function in the includes/pager.inc file.


In the standard default Garland theme, the pager looks like this (for a two-page view). The screenshot includes the pop up title that appears when mousing over a page number.

We will modify the pager to look like this:

1. Load a view that has a pager and examine the underlying source code in the browser. Note that in this example, page 1 is enclosed by the tag, which has a CSS class of pager-current 

 <div class="pager">
  <span class="pager-list">
  <strong class="pager-current">1</strong>
  <a title="Go to page 2" class="pager-last active" href="/frontpage?page=1">2</a>
  </span>
  <a class="pager-last active" href="/frontpage?page=1">next </a>
  <a class="pager-last active" href="/frontpage?page=1">last </a>
 </div>

2. Set the administrative theme to Garland at admin/settings/admin.

3. Download and untar a theme such as hunchbaque http://drupal.org/project/hunchbaque into <DRUPALROOT>/sites/all/themes/ (do not install themes into the core /themes directory). Enable the theme, and set it as the default at http://YOURSITE.com/admin/build/themes.

4. Add the following CSS to the theme's style.css file (for the hunchbaque theme, this file is located in <DRUPALROOT>/sites/all/themes/hunchbaque). 

 
.pager {
  margin: 1em 0;
 }
 .pager a:link, .pager a:visited, .pager strong.pager-current {
  background-color:#f5f5f5; /* Light gray */
  border: 1px solid #ccc; /* Medium Dark Gray */
  color: #2f4f4f; /* Slate Gray */
  font-size: .85em;
  font-weight: bold;
  margin: .3em .2em;
  padding: .3em .5em;
  text-decoration: none; /* Removes link underlines */
 }
 .pager a:hover, .pager a:active {
  border: 1px solid #3f5f99; /*Blue */
 }
 .pager strong.pager-current {
  background-color: #3f5f99; /*Blue */
  border: 1px solid #3f5f99; /*Blue */
  color: #fff; /*White */
 }

5. Go to a multi-page view on the site, and try out the newly styled pager.

Recipe notes

  • Good web search terms include:

CSS syllabus CSS cheatsheet CSS cheat sheet CSS hack CSS tricks CSS tips

A particularly helpful "Cheat Sheet" is the Visibone.com unlaminated Designer's Tutorial (for additional PHP, MySQL, and JavaScript information, get Visibone's The Everything Tutorial).

  • Consider also installing the Colorzilla add-on http://colorzilla.com/firefox/ to help with color selection.
  • An addition to the CSS that we placed in the theme, Drupal core contains some default CSS. For the pager classes, this code copied below from the /modules/system/system.css file ensures that the pager is centered on a line by itself, with a half em of padding. Default CSS rules may be overridden in your theme. 
.pager {
  clear: both;
  text-align: center;
 }
 .pager a, .pager strong.pager-current {
  padding: 0.5em;
 }
  • The Zen theme (http://drupal.org/project/zen) offers a helpful reference file which includes all of Drupal's core CSS. Look for drupal5-reference.css in the theme's main directory (this file will be helpful whether or not you use the Zen theme for your site).

[edit] Overriding the theme_pager function

Ingredients

A custom theme (or copy Garland into sites/all/themes directory)

In Recipe 74, we styled the pager but we could not change the HTML markup with CSS. In this recipe we perform an override of the theme_pager function to capitalize the words First, Previous, Next, and Last.

1. Optional step: If you're using the good-old default Garland theme, be sure to copy the whole garland directory from <DRUPALROOT>/sites/themes/garland to a subdirectory of <DRUPALROOT>/sites/all/themes/. 

cd <DRUPALROOT>/sites/all/themes/

cp -r ../../../themes/garland/ ./garland-new

Enable and make this new theme the default at http://YOURSITE.com/admin/build/themes.

2. Open the <DRUPALROOT>/include/pager.inc file, and locate the theme_pager function. Copy the function to the clipboard (an alternative location from which to copy the file is http://api.drupal.org/api/5/function/theme_pager).

3. Paste the function at the bottom of the theme's template.php file (this file is usually found in the <DRUPALROOT>/sites/all/themes/<THEMENAME> directory).

4. Change the function name from theme_pager to phptemplate_pager.

5. Review the function, and note that it is actually concatenating the output of five other related theme functions (pager_first, pager_previous, and so on). The concatenation is performed using the dot equals ('.=') assignment operator. Locate the words first, previous, next, and last. Change them to the proper case, i.e. change the first letter to a capital letter.

6. Visit a multi-page view on the site. The pager now uses capital letters (the appearance, of course, will depend on the style sheet).

7. It's good practice to place documentation above any theme override, including the API page. If the function you are overriding is not part of the core, mcitp see if you can find it on the Contributed Modules API page instead at http://api.freestylesystems.co.uk/. See Recipe 92 for details. Go back to the template.php file and add the following above the function. 

 /**
 * Override theme_pager
 * [http://api.drupal.org/api/5/function/theme_pager http://api.drupal.org/api/5/function/theme_pager]
 *
 */

Recipe notes

  • The steps above can be summarized as follows: to override a theme function, copy the theme function to template.php, rename it (change theme_ to phptemplate_), and modify.

When copying and pasting text on your computer, special characters can sometimes display in an odd and annoying way. For instance, a period or even a character might appear where the character to the left of the Previous text belongs in the pager. Changing to the UTF-8 character set will usually help. For instance, someone using the vim editor with the putty ssh client would implement the following settings: ccnp

In vim:set encoding=utf-8 In putty: Right-click the Title Bar | Change Settings | Window | Translation | Received data assumed to be in which character set | utf-8

  • The theme function may be used for view-specific code. Add global $current_view;to the top of the function to provide access to all the views variables. Then you may perform logic such as: 
 // sample view_name: frontpage
 if($current_view->name == 'view_name' {
  Do something;
  }

There's a relatively new Pager Reference module available: http://drupal.org/project/pager_preference which allows users to selectively Show 25 / 50 / 100. This is a nice usability enhancement. The module requires the patching of pager.inc, and comes with a theme function so that you may override the page count settings.

[edit] Understanding how Theme functions are called

As our theme_pager function demonstrates, it is not unusual to find themeable functions calling other themeable functions. Being able to detect these building blocks is a good step toward deeper Drupal understanding.

Themeable functions are called by modules and themes using the theme() function. Some examples will be helpful:

General Example

theme_function_name is called using the following syntax: 

theme('function_name', parameter, parameter )

Specific Example #1

1. Visit http://api.freestylesystems.co.uk/api/function/theme_views_view/5

This is an excerpt of the views.module, containing the theme_views_view function. Each time a view is built this function is run.

2. Locate the spot in the code where the theme_view_more function is called.

theme('views_more', $view->real_url);

(In the full code, the function result is assigned to the $output variable.)

Make note of the surrounding "if statement" controlling the theme_views_more output. 

  if ($type == 'block' && $view->block_more && $num_nodes >= $view->nodes_per_block) {
  $output .= theme('views_more', $view->real_url);
  }

The logic ensures that the more link appears only when the view type is a block, and only if the [More] Link? box is checked and the view has more items than the number of items already displayed in the block.

Specific Example #2: Calling themeable functions with multiple parameters

3. theme_views_view also calls the theme_pager function that we looked at in the three previous recipes. This places the pager at the bottom of every paged view. On the API page from Step 1, locate the spot in the theme_views_view code where the pager theme function is called. Most non-coders will give this code a puzzled look, so don't worry if you feel puzzled. We will next look at steps you can take to help you to decode the detail.

4. Remember the first parameter (in this case, pager). Make a mental note that the theme function you'll be looking for is theme_pager.

5. Click on the theme link.

6. On the API page, click on the List References link. This brings you to http://api.freestylesystems.co.uk/api/function/theme/5/references and shows every theme function available (limited to the modules installed on freestylesystems.co.uk site).

Alternatively, if you're at http://api.drupal.org/api/function/theme/5 on the API site for core Drupal scroll down to the link named 201 functions call theme(), and click on it.

7. Do a Find (Ctrl+F in many browsers) on the page for theme_pager.

8. Scroll down, and click on the theme_pager link, and read up on the four parameters.

Recipe notes

The figure below shows how the calling function in an excerpt of theme_views_view maps to the theme_pager function:

  • See Recipe 92 for a browser Search Plugin for the Contributions API site.

One attitude to adopt when looking at API detail pages can be "that's interesting, but I don't need to use that now". For instance, it may be interesting to note that an $element parameter is available which is "an optional integer to distinguish between multiple pagers on one page". We were able to override this theme function without knowing this, but it's good to keep in the back of your mind for the time when a use case might arise for multiple pagers.

This table lists selected theme functions that call other theme functions:

This theme function


calls this or these theme function(s)


theme_blocks


theme_block


theme_comment

theme_mark

theme_username

theme_links

theme_feed_icon

theme_image

theme_node

theme_username

theme_links

theme_node_list

theme_item_list

theme_page

theme_blocks

theme_breadcrumb

theme_menu_local_tasks

theme_help

theme_status_messages

theme_closure

theme_pager

theme_pager_first

theme_pager_previous

theme_pager_list

theme_pager_next

theme_pager_last

theme_table_sort_image theme_image


theme_user_picture


theme_image


theme_views_bonus_export_doc


theme_views_view_table


theme_views_bonus_export_text


theme_views_bonus_export_txt_separator


theme_views_edit_view


theme_fieldset


theme_views_filters


theme_table


theme_views_view_list


theme_item_list


theme_views_summary


theme_item_list


theme_views_view_table


theme_table


theme_xml_icon


theme_image
themes_views_view theme_pager>

theme_views_more

[edit] Override theme_views_view

We've taken a look at some sections of the theme_views_view function in the previous recipe. Now let's take a closer look, to give us more power to control our view.

The theme_views_view function may be roughly divided into six sections:

1. Title and Breadcrumb (for pages).

2. Header.

3. Exposed Filters (for pages, not blocks).

4. Content, or Summary view, plus the Footer. Also, for blocks only: the More link (alternatively, if there's no output, print the empty text).

5. Pager (pagers are only available for page views).

6. The final section that prints the view to the page.

Our recipe steps now begin:

1. Go to http://api.freestylesystems.co.uk/api/function/theme_views_view/5 and print out the theme_views_view function (alternatively, you may print the function directly from the views.module file).

2. Using the following pages as a guide, identify the six different sections, and label them.

3. Once these separate sections are delineated, they may be shuffled around. Some common applications:

Add an additional pager above the header

Move the exposed filters above the header, so that people can see the filter search options near the top of the page

Move the header above the title (perhaps the header contains a link to a pretty picture)

For now we will just add a second pager above the header. Copy the theme_views_view function to the template.php file. We know by now to change the name from theme_views_view to phptemplate_views_view. Additionally, we may target a specific view by appending a view name, for instance: phptemplate_views_view_workshops

4. Copy the fifth section, the pager. Be sure to include the closing bracket. Paste just above the header section.

Recipe notes

  • Be sure to always leave the sixth section as the last one.
  • Programmers are not limited to shuffling the sections around, of course. Code within the sections may be modified as well.
  • Just as we appended a specific view name to the theme_views_view, we may do the same for the style plugin (view type) theme functions: For instance, phptemplate_views_view_table-<VIEWNAME> overrides theme_views_view_table, and phptemplate_views_view_list-<VIEWNAME> overrides theme_views_view_list. We'll see the latter approach used by the Views Theme Wizard.

If you get a white screen (sometimes referred to as the White Screen of Death or WSOD) when editing template.php, check that for each beginning bracket there is an end bracket, check the site error log, or restore your backup copy.

[edit] Additional References

  • For instructions on Building Drupal themes, click here
  • For instructions on Customizing Drupal Theme, click here
  • For Theming Drupal, click here
  • For instructions on Setting Up The Development Environment for Drupal 6, click here
  • For instructions on Troubleshooting Drupal, click here
  • For instructions on Customizing Drupal 6 Themes , click here
  • For instructions on Advanced Theming on Drupal Multimedia , click here
  • For instructions on Creating and Customizing Drupal 6 Themes, click here
  • For instructions on Theming Drupal6, click here
  • For instructions on Setting up Drupal for web services, click here
  • For instructions on Drupal , click here
  • For instructions on Installing Drupal Views Module , click here

[edit] Source

The source of this content is Chapter 7: Theming Drupal 5 Views Recipes of Drupal 5 Views Recipes by Marjorie Roswell Term Papers


[edit] External Links

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

And Like The Global Information Network and Global Information Network

Retrieved from "http://www.themeswiki.com/Theming_Drupal_5_Views_Recipes"
Personal tools