Slides from my Drupal Design Camp Boston 2010 session!

1. Theming Search Results
How to Make Your Search Results Rock
Aubrey Sambor - Drupal Design Camp Boston 2010

2. Who am I?
• Aubrey Sambor
• Developer, Themer, Designer
• Have been working with Drupal for a little
over a year

3. What is Covered Here
• Brief overview of search result theming in D5
• Changes in D6
• Display search results in two ways: grid and
table views
• Pull CCK fields into search results
• Search in Drupal 7

4. What Won’t Be Covered
• How search actually works - this session is
about making search look pretty, not the nuts
and bolts behind it
• Flashy, fancy pants theming; my test site is
using the awesome Omega theme (http://
drupal.org/project/omega) without any CSS
styling.
• Creating sortable table views

5. Search Theming in Drupal 5
• Two main functions for theming search results:
• theme_search_page
function theme_search_page($results, $type) {
$output = '<dl class="search-results">';
foreach ($results as $entry) {
$output .= theme('search_item', $entry,
$type);
}
$output .= '</dl>';
$output .= theme('pager', NULL, 10, 0);
return $output;
}

6. Search Theming in Drupal 5
• theme_search_item
function theme_search_item($item, $type) {
$output = ' <dt class="title"><a href="'. check_url($item['link']) .'">'.
check_plain($item['title']) .'</a></dt>';
$info = array();
if ($item['type']) {
$info[] = check_plain($item['type']);
}
if ($item['user']) {
$info[] = $item['user'];
}
if ($item['date']) {
$info[] = format_date($item['date'], 'small');
}
if (is_array($item['extra'])) {
$info = array_merge($info, $item['extra']);
}
$output .= ' <dd>'. ($item['snippet'] ? '<p>'. $item['snippet'] .'</p>' :
'') .'<p class="search-info">'. implode(' - ', $info) .'</p></dd>';
return $output;
}

7. Search Theming in Drupal 5
• HTML and logic in these functions - BAD!
• D6 did this much better...

8. Search Theming in Drupal 6!
• Introduction of two new functions
• theme_search_result
• themes each individual result
• theme_search_results
• themes the entire search results page

9. Search Theming in Drupal 6!
• Override these functions in your theme’s
template.php file for maximum awesomeness
• themename_preprocess_search_result
• themename_preprocess_search_results

10. Search Theming in Drupal 6!
• Use the corresponding tpl.php files to style
search results
• search-result.tpl.php
• search-results.tpl.php

11. Search Theming Example
• Default search is boring!

12. Search Theming Example
• Client wants search results to be displayed in
two different ways; table view, and grid view.
• Can this be done?
• Short answer: yes!

13. Search Theming Example
• Table view
• Display results in columns
• Columns can be sortable, this takes a little bit of work

14. Search Theming Example
• Grid view
• Display results as a grid on the page
• Specify columns in template.php (there has to be a better way!)

15. How do we make this work?
• Use a query string to switch between the two
search types
• Table view - http://site.com/search/node/x?display=table
• Grid view - http://site.com/search/node
• Grid view is the default view in this example!

16. On to the code!
• template.php is your friend!
• We’ll be creating 3 new templates
• search-results.tpl.php
• search-result-grid.tpl.php
• search-result-table.tpl.php

17. Preprocess functions are
awesome
• In your template.php, create
• function themename_preprocess_search_results()
• Why not use themename_preprocess_search_result()?
• We want to have more control of how the individual items
are styled, so we’re doing it this way.

18. Preprocess functions are
awesome
• Pass variable by reference so the values are saved
• These are basic node fields to include in search results...
you can add any field created by cck to search results
(more on that later)

19. Building Results
• foreach() to iterate through results and add new variables
to the $vars[‘results’] array
• Get query string from url to determine if the page is grid
view or table view.
• Grid view is default (with no query string); query string of
‘table’ means the page is table view

20. Building Table View Results
• Begin building an array of all table rows
• The $row[] array will be used in theme_table,
which is called later on in the function
• Each item in the ‘data’ part of the array will be a column in
the generated table
• What is this theme_render_template() thing?
More on that in a second!

21. Building Grid View Results
• No built in way to theme a grid like there is to
theme a table
• Variables are set in code for this example, but
this could possibly be rewritten to be set on
the search settings page
• theme_render_template renders each cell in
the grid

22. Template Rendering
Goodness
• theme_render_template() is used to define
custom tpl.php files
• arguments are url to the template file, and an
array of variables
• These variables were created in the foreach()
loop earlier in the function

23. Template Rendering
Goodness
• theme_render_template() in the table view is
rendering the description column
• additional items that you may not want to be sortable can go
here; if you want them sortable, add them as a different
column in the $row[] array earlier in the function
• search-result-table.tpl.php

24. Template Rendering
Goodness
• theme_render_template() in the grid view is
rendering each grid cell
• Grid structure is constructed in the tpl file
• I know this is not ideal, and I hate putting php code in the
tpl file. It’s not hacking core level of bad, but it’s still bad. I
feel dirty doing this.
• search-result-grid.tpl.php

25. Table View - Final Step
• If you’re viewing as a grid, everything’s all set.
but what if you’re viewing as a table?
• theme_table to the rescue!
• takes a few parameters: header, an array of data (the $row[]
array in our case), an array of attributes
• Create your header array, then theme away and
pass the rendered template to $vars

26. Creating View Links
• We have the two views built, now how to
switch between them?
• Create the links by using the l() function
• to the ‘table_view’ variable, add an attribute to
the l() function called ‘query’ and put
‘display=table’ to pass the query string to the
link
• Add these links to $vars

27. Putting it all together
• Where does all this stuff display??
• search-results.tpl.php!

28. Putting it all together!
• Print view links at the top of the page
• Here is where things get ugly...
• There isn’t a nice way to theme a grid view without
implementing some logic in the tpl.php file. (Yeah, I know.
Bad.)
• Table view code much simpler
• Just print the $search_view variable, and that’s it!

29. Adding CCK fields to results
• So far we’ve talked about displaying basic
information about the node in results.
• What if you want to display any other field
information?
• Easy! Get the information from the node!

30. Adding CCK fields to results
• Create a content type, add a few fields
• My example? (Of course) Beer!
• My beer content type contains:
• Text field for brewer
• Text field for rating
• Imagefield for image
• Taxonomy term for beer style

31. Adding CCK fields to results
• Adding fields is easy!
• Text examples are straightforward
• Just find field in node, add to $r variable
• Image example:
• Can use theme_image or theme_imagecache
• Taxonomy
• Allows for multiple terms
• taxonomy_link function is awesome

32. Adding CCK fields to results
• To add to grid view, just add variables created
• To add to table view:
• Can add variables either as new columns or in the
description field
• Add header title to the $header variable

33. Voila!
• You can add as many fields as you’d like to your
results and have them display wherever you
want.
• But wait! What if I want to make the table
headers sortable?
• This can be done, a tutorial is here: http://fightingcrane.com/
main/node/8... I haven’t done this, but I want to :)
• tablesort_sql is the function to use here

34. The Future?
• Views 3 and search integration
• Apache Solr: http://acquia.com/blog/views-3-apache-solr-
acquia-drupal-future-search
• There IS supposedly a way to style search results using Views
2... but using views for search results seems inefficient and
slow (complicated queries can bog down huge sites, etc)
• as far as I can see, right now, search theming seems to be the
same in Drupal 7 as in 6. Perhaps there will be more Views 3
integration down the road
• Display Suite - another way to theme search results

35. That’s All!
• Aubrey Sambor
• Follow me on Twitter: @starshaped
• starshaped on drupal.org
• Blog: http://star-shaped.org
• Slides and example code will be available on my site soon!