Content tagged with: theme

Implementing visual search results with search lucene and lightbox2

Submitted by Eric on Sat, 08/28/2010 - 00:24

I created a Drupal site to host my photography in CCK Imagefield nodes and used Lucene to enhance my search functionality. By default Drupal's search results are text-based so I decided to add some code to show image thumbnails in my search results. I checked out Drupal Lucene's hooks and decided to implement a hook_luceneapi_result_alter() function in my existing module.

<?php
function MYMODULE_luceneapi_result_alter(&$result, $module, $type = NULL) {
  
  // check for node results
  if ($type == 'node') {
  
    // check node type
    if ($result['node']->type == 'image') {
    
      // define an imagecache image path for image thumbnail
      $imagecache_path_thumbnail = file_directory_path() . '/imagecache/thumbnail' . str_replace(file_directory_path(),'',$result['node']->field_image[0]['filepath']);      
      
      // define an imagecache image path for image (large)
      $imagecache_path_large = file_directory_path() . '/imagecache/large' . str_replace(file_directory_path(),'',$result['node']->field_image[0]['filepath']);
    
      // define theme_image() variables
      $alt = check_plain($result['node']->title);
      $title = check_plain($result['node']->title);
      // add rel=lightbox to enable lightbox2 module
      $attributes = array(
        'rel' => 'lightbox',
      );
      // let imagecache define the size
      $getsize = FALSE;
      // generate the image hml
      $image_html = theme('image', $imagecache_path_thumbnail, $alt, $title, $attributes, $getsize);      
    
      if ($image_html) {
                
        // define lightbox link
        $image_link = l(
          $image_html,
          $imagecache_path_large,
          array(
            'html' => true,
            'attributes' => array(
              'rel' => 'lightbox',
            )
          )
        );

        // add data to the result variable, passed by reference
        $result['image_thumbnail'] = $image_link;
        
      }
    
    }
  
  }

}
?>

The above code adds additional data to my search results variables. I then implemented a hook_preprocess_search_result() function in my theme's template.php file to pass this data to the search-result.tpl.php template file.

<?php
function MYTHEME_preprocess_search_result(&$variables) {

  // ...snip...

  // check for lucene node search results
  if ($variables['type']=='luceneapi_node') {

    // check for image
    if ($variables['result']['image_thumbnail']) {    

      // pass additional data to theme template file
      $variables['image_thumbnail'] = $variables['result']['image_thumbnail'];

    }
    
  }

}
?>

And in my theme's search-result.tpl.php template file, I added the following PHP to show the new variable.

<div class="search-result <?php print $search_zebra; ?>">

  <?php if($image_thumbnail): ?>
    <?php print $image_thumbnail; ?>
  <?php endif; ?>

  <!-- ...snip... -->

I also added a few lines of CSS in my theme's style.css file to tidy up the layout.

.search-results.luceneapi_node-results .search-result {
  clear: both;
}

.search-results.luceneapi_node-results .search-result img {
  float: left;
  margin: 0px 20px 20px 0px;
}

The visual results can be seen here on my photo gallery.

3 comments

How to conditionally show regions based on client browser using jQuery

Submitted by Eric on Tue, 09/01/2009 - 22:19

I recently signed up for Google AdSense and I thought it would be fun to show ads for Internet Explorer users. Of course, you could use this tutorial for more productive purposes. Here is how I integrated this functionality into my theme.

I added 2 regions to THEME.info file:

regions[ad_left] = Ad Left
regions[ad_right] = Ad Right

I then included the regions in my theme by adding some code to my theme's page.tpl.php file:

<?php if ($ad_left): ?>
  <div id='ad_left' class='google_ads'>
    <?php print $ad_left; ?>
  </div>
<?php endif; ?>

<?php if ($ad_right): ?>
  <div id='ad_right' class='google_ads'>
    <?php print $ad_right; ?>
  </div>
<?php endif; ?>

Next, I added some CSS in my style.css theme file to absolutely position the regions in a fixed position:

.google_ads {
  position: absolute;
  bottom: 10px;
  width: 120px;
  height: 600px;
  display: none;	
}

.google_ads .block {
  padding: 0;
  margin: 0;
}

body > .google_ads {
  position: fixed;
}

#ad_left {
  left: 10px;  
}

#ad_right {
  right: 10px; 
}

Now that my regions were setup, I added 2 blocks containing the Google AdSense code and assigned the blocks to my new regions. You'll need to make sure the input filter you choose allows for javascript to be included.

At this point, the ads are included for every browser, but they will not be shown due to the "display: none" property I added to the "google_ads" CSS class. I added a few lines of jQuery in my theme's script.js file to show the regions for IE users:

$(document).ready(function(){
  // per IE ads
  if ($.browser.msie) {
    $('.google_ads').show();	  
  }
});

If you view this page in IE, you'll see my code in action ^_^

My additional thoughts... this code executes the Google AdSense javascript regardless of your browser, but it is only shown to IE users. A more efficient method would be to use AJAX to include the javascript ONLY if the browser is IE, or of course, by implementing a server side browser detection library.

Add new comment

Adding functionality to allow users to select different profile themes

Submitted by Eric on Wed, 08/19/2009 - 11:13

In this blog entry, I'll show you how you can add some module code to allow users to select different themes for their profile page. I decided to use the standard user-profile.tpl.php as the base template. I copied this file into my theme folder and replicated it a few times. I named the files:

user-profile-version-1.tpl.php
user-profile-version-2.tpl.php

For my example, I simply added the text "Version 1" and "Version 2" to the top of these files to show it's working, but you could revise the layout, add CSS, etc.

Next, I created a module to contain all the following code. I defined a hook_perm() and hook_menu() function to add a menu local task (tab) to the user page.

<?php
function MYMODULE_perm() {
  return array(
    'choose profile theme'
  );
}

function MYMODULE_menu() {
  
  $items = array();
  
  $items['user/%user/choose-profile-them'] = array(
    'title' => 'Choose Profile Theme',
    'page callback' => '_MYMODULE_callback_choose_profile_theme',
    'page arguments' => array(1),
    'access callback' => 'user_access',
    'access arguments' => array('choose profile theme'),
    'type' => MENU_LOCAL_TASK,
  );
  
  return $items;
  
}
?>

Next, I defined the page callback to create a list of available templates for the user to choose from.

<?php
function _MYMODULE_callback_choose_profile_theme($user) {

  // create an empty strong variable for page html
  $html = "";

  // define a list of available profile templates
  $profileTemplates = array(
    'user-profile-version-1' => 'Version 1',
    'user-profile-version-2' => 'Version 2'
  );
  
  // loop through templates and ensure they exist
  foreach ($profileTemplates as $template => $name) {
    if (!file_exists(path_to_theme() . '/' . $template . '.tpl.php')) {
      unset($profileTemplates[$name]);  
    }
  }
  
  if (count($profileTemplates)) {
    $html .= drupal_get_form('_MYMODULE_callback_choose_profile_theme_form', $user, $profileTemplates);
  } else {
    $html .= "No profile themes currently exist.";
  }
  
  return $html;
  
}
?>

The following functions define the form array, and validation and submit handlers. When the form is submitted, the template option is saved to the user account variables using the user_save() function.

<?php
function _MYMODULE_callback_choose_profile_theme_form($form_state, $user, $profileTemplates) {

  $form = array();
  
  // add a select input element
  $form['profileTemplate'] = array(
    '#type' => 'select',
    '#title' => t('Profile Template'),
    '#options' => $profileTemplates,
    '#default_value' => $GLOBALS['user']->profileTemplate
  );
  
  // add a submit button
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit')
  );
  
  // add hidden element for userID
  $form['userID'] = array(
    '#type' => 'hidden',
    '#value' => $user->uid
  );
  
  return $form;
}

function _MYMODULE_callback_choose_profile_theme_form_validate($form, &$form_state) {
  // TODO: add your additional form validation here
  
  // ensure userID submitted matches current user
  if ($form_state['values']['userID']!=$GLOBALS['user']->uid) {
    form_set_error('', t('Error processing form.'));  
  }
  
}

function _MYMODULE_callback_choose_profile_theme_form_submit($form, &$form_state) {

  // load user object
  $user = user_load($form_state['values']['userID']);
  
  // save profile template to user variables
  user_save($user, array('profileTemplate' => $form_state['values']['profileTemplate'])); 
  
  // set a message
  drupal_set_message('Your profile template has been set.');
  
}
?>

Last, I defined the preprocess function to see if a template has been set in the user variables, and add the templates suggestion to change the user profile template.

<?php
function MYMODULE_preprocess_user_profile(&$variables) {

  // ensure the template file exists, and is set in the user object
  if (file_exists(path_to_theme() . '/' . $variables['user']->profileTemplate . '.tpl.php') && $variables['user']->profileTemplate) {

    // set a templates suggestion
    $variables['template_files'][] = $variables['user']->profileTemplate;
  }
  
}
?>

As you can see below, when I choose the "Version 2" template option, the file "user-profile-version-2.tpl.php" is being loaded, and the text "Version 2" is displayed at the top of the page.

4 comments

Displaying the total number of results on the search page and how many are being shown on the current page

Submitted by Eric on Fri, 05/22/2009 - 16:10

Back in March I wrote this article: Displaying the total number of results in a view and how many are being shown on the current page. This code snippet will show you how you can add the same functionality on the search results page and improve usability by showing the following text:

Displaying ### - ### of ### results

First I added a preprocess_search_results function in my theme's template.php file to generate the html to show on the search results page:

<?php
function MYTHEME_preprocess_search_results(&$variables) {

  // define the number of results being shown on a page
  $itemsPerPage = 10;

  // get the current page
  $currentPage = $_REQUEST['page']+1;

  // get the total number of results from the $GLOBALS
  $total = $GLOBALS['pager_total_items'][0];
    
  // perform calculation
  $start = 10*$currentPage-9;
  $end = $itemsPerPage * $currentPage;
  if ($end>$total) $end = $total;
    
  // set this html to the $variables
  $variables['MYTHEME_search_totals'] = "Displaying $start - $end of $total results";

}
?>

Now, you can show this variable on the search results page by copying the search results template file (modules/search/search-results.tpl.php) into your theme folder and editing it.

Here is the new contents of my modified file (minus the comments at the top):

<!-- NEW SEARCH RESULTS TOTALS: -->
<?php print $MYTHEME_search_totals; ?>

<!-- ORIG CONTENTS: -->
<dl class="search-results <?php print $type; ?>-results">
  <?php print $search_results; ?>
</dl>
<?php print $pager; ?>

4 comments

Integrating Open Flash Charts into a Drupal View

Submitted by Eric on Wed, 05/06/2009 - 21:41

In this tutorial I'll show how I integrated Open Flash Charts into a Drupal view to create a fancy flash based chart from CCK node data.

Let's start by creating a new CCK node type to contain the data. I called mine "graph_data".

I added an integer field called "field_data".

I created a bunch of nodes, populating them with a random integer from 0 to 100.

I added a view called "Graph" to show all of my data. I filtered by node type and published, added sort criteria, chose "Unformatted" for Style, chose how many items to show (100), and added a page view.

At this point, you'll need to download and incorporate the Open Flash Charts library. You can download the library here or by visiting their website and clicking on Downloads in the top right. Uncompress the download and copy the entire directory (version-2-ichor) into your theme directory.

Sample directory structure:

/sites/all/themes/YOURTHEME/version-2-ichor

I created a new file in my theme directory called "views-view-unformatted--Graph.tpl.php" (see: Theme Information section on the View edit page) to override it's output. I put the guts of my code in this file:

<?php
// loop through the view results and populate a numeric array
$values = array();
foreach ($view->result as $k => $v) {
  $values[] = intval($v->node_data_field_data_field_data_value);
}

// include OFC PHP library
require_once(path_to_theme() . '/version-2-ichor/php-ofc-library/open-flash-chart.php');

// create a new line object
$line = new line();

// set the view values to the line object
$line->set_values( $values );

// create a new flash object
$chart = new open_flash_chart();

// add the line object to the chart object
$chart->add_element( $line );

// create a new x_axis object
$x = new x_axis();

// set the number of steps
$x->set_steps(10);

// add the x_axis object to the chart
$chart->set_x_axis($x);

// create a new y_axis object
$y = new y_axis();

// set the range of the y axis, based on the min/max view values
$y->set_range(min($values),max($values));

// set the number of steps
$y->set_steps(10);

// add the y_axis object to the chart
$chart->set_y_axis($y);
?>

<!-- Include Javascript libraries -->
<script type="text/javascript" src="<?php print base_path() . path_to_theme(); ?>/version-2-ichor/js/json/json2.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme(); ?>/version-2-ichor/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("<?php print base_path() . path_to_theme(); ?>/version-2-ichor/open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<!-- Add Javascript to initialize the chart and load its data -->
<script type='text/javascript'>

function open_flash_chart_data() {
  return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}

// output the graph data into a javascript variable
var data = <?php echo $chart->toPrettyString(); ?>;
</script>

<!-- Output a container div for the chart -->
<div id="my_chart"></div>

Here's a screenshot of my new flash integrated view

2 comments