Theming Search Results
     How to Make Your Search Results Rock

Aubrey Sambor - Drupal Design Camp Boston 2010
Who am I?
• Aubrey Sambor
• Developer, Themer, Designer
• Have been working with Drupal for a little
 over a year
What is Covered Here
• Brief overview of search result theming in D5
• Changes in D6
• Display search results in two ways:...
What Won’t Be Covered
• How search actually works - this session is
 about making search look pretty, not the nuts
 and bo...
Search Theming in Drupal 5
• Two main functions for theming search results:
• theme_search_page
  function theme_search_pa...
Search Theming in Drupal 5
• theme_search_item
 function theme_search_item($item, $type) {
   $output = ' <dt class="title...
Search Theming in Drupal 5
• HTML and logic in these functions - BAD!
• D6 did this much better...
Search Theming in Drupal 6!
• Introduction of two new functions
• theme_search_result
  • themes each individual result

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

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

• search-result.tpl.php
• searc...
Search Theming Example
• Default search is boring!
Search Theming Example
• Client wants search results to be displayed in
 two different ways; table view, and grid view.

• ...
Search Theming Example
• Table view
  • Display results in columns
  • Columns can be sortable, this takes a little bit of...
Search Theming Example
• Grid view
  • Display results as a grid on the page
  • Specify columns in template.php (there ha...
How do we make this work?
• Use a query string to switch between the two
  search types
• Table view - http://site.com/sea...
On to the code!
• template.php is your friend!
• We’ll be creating 3 new templates
  • search-results.tpl.php
  • search-r...
Preprocess functions are
          awesome
• In your template.php, create
  • function themename_preprocess_search_results...
Preprocess functions are
       awesome
• Pass variable by reference so the values are saved
• These are basic node fields ...
Building Results
• foreach() to iterate through results and add new variables
  to the $vars[‘results’] array

• Get query...
Building Table View Results
• Begin building an array of all table rows
• The $row[] array will be used in theme_table,
 w...
Building Grid View Results
• No built in way to theme a grid like there is to
 theme a table

• Variables are set in code ...
Template Rendering
          Goodness
• theme_render_template() is used to define
 custom tpl.php files

• arguments are url...
Template Rendering
           Goodness
• theme_render_template() in the table view is
 rendering the description column
  ...
Template Rendering
            Goodness
• theme_render_template() in the grid view is
 rendering each grid cell

• Grid st...
Table View - Final Step
• If you’re viewing as a grid, everything’s all set.
  but what if you’re viewing as a table?

• t...
Creating View Links
• We have the two views built, now how to
 switch between them?

• Create the links by using the l() f...
Putting it all together
• Where does all this stuff display??
• search-results.tpl.php!
Putting it all together!
• Print view links at the top of the page
• Here is where things get ugly...
  • There isn’t a ni...
Adding CCK fields to results
• So far we’ve talked about displaying basic
 information about the node in results.

• What i...
Adding CCK fields to results
• Create a content type, add a few fields
• My example? (Of course) Beer!
• My beer content typ...
Adding CCK fields to results
• Adding fields is easy!
• Text examples are straightforward
  • Just find field in node, add to ...
Adding CCK fields to results
• To add to grid view, just add variables created
• To add to table view:
  • Can add variable...
Voila!
• You can add as many fields as you’d like to your
 results and have them display wherever you
 want.

• But wait! W...
The Future?
• Views 3 and search integration
  • Apache Solr: http://acquia.com/blog/views-3-apache-solr-
    acquia-drupa...
That’s All!
• Aubrey Sambor
• Follow me on Twitter: @starshaped
• starshaped on drupal.org
• Blog: http://star-shaped.org
...
Upcoming SlideShare
Loading in …5
×

Theming Search Results - How to Make Your Search Results Rock

13,339 views
13,096 views

Published on

Slides from my Drupal Design Camp Boston 2010 session!

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,339
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
61
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide



































  • Theming Search Results - How to Make Your Search Results Rock

    1. 1. Theming Search Results How to Make Your Search Results Rock Aubrey Sambor - Drupal Design Camp Boston 2010
    2. 2. Who am I? • Aubrey Sambor • Developer, Themer, Designer • Have been working with Drupal for a little over a year
    3. 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. 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. 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. 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. 7. Search Theming in Drupal 5 • HTML and logic in these functions - BAD! • D6 did this much better...
    8. 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. 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. 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. 11. Search Theming Example • Default search is boring!
    12. 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. 13. Search Theming Example • Table view • Display results in columns • Columns can be sortable, this takes a little bit of work
    14. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Putting it all together • Where does all this stuff display?? • search-results.tpl.php!
    28. 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. 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. 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. 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. 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. 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. 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. 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!

    ×