Theming Search Results - How to Make Your Search Results Rock

  • 12,216 views
Uploaded on

Slides from my Drupal Design Camp Boston 2010 session!

Slides from my Drupal Design Camp Boston 2010 session!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
12,216
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
60
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide



































Transcript

  • 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!