Your SlideShare is downloading. ×
0
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Theming Search Results - How to Make Your Search Results Rock
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Theming Search Results - How to Make Your Search Results Rock

12,592

Published on

Slides from my Drupal Design Camp Boston 2010 session!

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
12,592
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
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!

    ×