-
Maintaining Lightbox2 Templating
Lightbox2 is a very popular and powerful Drupal module. One of the helpful features is that you can render a Drupal node in a lightbox rather easily in either PHP or HTML. View detailed explanation. The issue is that when you click a link within that lightboxed content, you will lose the lightbox2 templating (e.g., if your lightbox template hides sidebars, they’ll only be hidden when the node loads. If you click a link within the lightbox, the new node will load and sidebars will appear). Read on for a quick fix.
-
Lightbox2 Slideshows with Multiple-value Imagefields
This is a pretty simple example that illustrates the use of Lightbox2’s slideshow feature. In the example, we have an imagefield that allows an unlimited number of images. We only want to render an imagecache version of the first image that, when clicked, will provide a slideshow with the rest of the images in the field. In the example, our field is called “field_product_images”.
The two files I’m showing are both within the theme for the site.
There are a few other options for achieving the same end result, but this seemed easier to explain and execute. Depending on your needs, you may need to make this happen at a deeper level (module) or in a field template/function override. If you have another approach, please post a comment!
12345678910111213141516171819202122232425262728/*** Override or insert variables into the node templates.** @param $vars* An array of variables to pass to the theme template.* @param $hook* The name of the template being rendered ("node" in this case.)*/function yourthemename_preprocess_node(&$vars, $hook) {if ($vars['node']->type == 'product') {// Loop through images for the product. Show the first image, and build the lightbox links to the other// images (more efficient than rendering the entire image and hiding it)// The field is configured to be a lightbox slideshow via Display Settings on the content type.if ($vars['node']->field_product_images[0]) {$vars['image_html'] = '';foreach($vars['node']->field_product_images as $key => $item) {if ($key == 0) {$vars['image_html'] .= $item['view'];}else {$vars['image_html'] .= '<div class="for-lightbox" style="display:none;">';$vars['image_html'] .= "<a href='/{$item['filepath']}' rel='lightshow[field_product_images][{$item['data']['title']}]'>Img</a>";$vars['image_html'] .= '</div>';}}}}}Now, one last thing. If you want to render many of these imagelink slideshows on a single page, you’ll need to give each lightshow group a unique name. In this project I had a views block that rendered many of these products in “node” teaser view. So, I added three more lines to my template.php code to append the node ID onto the end of the group name. I added this code just under (outside of) the foreach loop above.12345<?php if (isset($image_html)): ?><div class="field product-thumb"><?php print $image_html; ?></div><?php endif; ?>
12345// Because we may be showing multiple slideshows on a page (the store view// renders many products) let's add a unique identifier to the end of the group$orig_group = 'lightshow[field_product_images]';$new_group = "lightshow[field_product_images_{$vars['node']->nid}]";$vars['image_html'] = str_replace($orig_group, $new_group, $vars['image_html']); -
Showing a nodeasblock block as full content instead of teaser
By default, the Node As Block module displays a node in teaser mode. If you wish to show the full content, add the following to your template.php file. (note I’ve also added an edit link for good measure)
123456789function mytheme_preprocess_nodeasblock(&$vars) {$node = $vars['node'];$vars['content'] = node_view(node_load($node->nid), FALSE, TRUE, TRUE);// Add an edit linkif (node_access('update', $node)) {$vars['edit_link'] = l('['. t('edit') .']', 'node/'. $node->nid .'/edit', array('title' => t('Edit')));}} -
Using the path_to_theme() function
When we build Drupal sites we typically have a lot of custom design elements. It is important to be able to display images from the filesystem in a dynamic fashion (non-absolute paths). Should you need to move the site, you wouldn’t want to have to reset image paths everywhere. The base_path() and path_to_theme() functions do all of the dirty work for you.
12$theme_dir = base_path() . path_to_theme();print "<img src="{$theme_dir}/_images-base/myimg.png" alt="This is my image">";You may also want to check out the $directory variable that is part of the theme system in Drupal.
-
Add Javascript to a Specific Page
There are several ways to add javascript code to a page in Drupal. The method outlined below involves a modification to your theme’s template.php file. You’ll be editing (and un-commenting if necessary) your theme’s preprocess_page function. This basically lets you modify the variables that are available in your page.tpl.php file(s).
In the example below, I’ve checked if the page’s “is_front” property is true. You can use anything available in the $vars variable within the function. I suggest using the devel module to determine what variables are available. This can be done with: dpm($vars);
1234567891011121314/*** Override or insert variables into the page templates.** @param $vars* An array of variables to pass to the theme template.* @param $hook* The name of the template being rendered ("page" in this case.)*/function themename_preprocess_page(&$vars, $hook) {if ($vars['is_front']) {drupal_add_js(path_to_theme() . '/_javascript/homepage_rotate_bg.js', 'core');}$vars['scripts'] = drupal_get_js();} -
Dynamic and AJAX-driven Select Lists in Webform
This example is a two-for-one deal! I’m going to demonstrate how to
- dynamically populate a webform select list on page load
- dynamically populate a webform select list based upon the value chosen in another webform select list
For both parts of this example, the demo form I’ll be using is a “Get Started” form.
-
Altering the basic properties of a Drupal textarea
The following example, when placed in your theme’s template.php file, will shrink the size of all of the “body” textareas on your site to 5 rows, and set the textarea as resizable. The function we’re using to alter the textareas is theme_textarea().
1234567891011/*** Resize the body field in all edit forms**/function mytheme_textarea($element) {if ($element['#name'] =='body') {$element['#rows'] = 5;$element['#resizable'] = true;}return theme_textarea($element);}I could have named the function either mytheme_textarea() or phptemplate_textarea (though the first is preferred). Here is a blurb from the “Default theme implementations” page on api.drupal.org. I encourage you to read that page in its entirety!
…the standard set by phptemplate is that theme functions should be named either phptemplate_HOOK or THEMENAME_HOOK. For example, for Drupal’s default theme (Garland) to implement the ‘table’ hook, the phptemplate.engine would find phptemplate_table() or garland_table(). The ENGINE_HOOK() syntax is preferred, as this can be used by sub-themes (which are themes that share code but use different stylesheets).
Your ability to alter Drupal form elements doesn’t stop here! Check out similar functions (theme_xxxxx()) on the form_api page on api.drupal.org!
