Pages

11 Sept 2012

Drupal 7 Useful Theme Snippets


Theming a Drupal 7 site can be quite tricky at times. Drupal has a powerful engine for themes and tons of different settings in it. Here's a couple of different code snippets to ease your theme development.

Load different page.tpl.php depending on node type

function ThemeName_preprocess_page(&$vars, $hook) {
if (isset($vars['node'])) {
$vars['theme_hook_suggestions'][] = 'page_'. $vars['node']->type;
}
}
This goes in your theme's template.php. Replace ThemeName with your theme's name. What this does, is that it takes the current node type's machine name and appends it to the filename of page.tpl.php. As in, if you have node type called blog, it appends that to the filename so it will look for page-blog.tpl.php. Note that this is only a suggestion, if it can't find that file, it will use the regular page.tpl.php.

Load a block to your page.tpl.php or node.tpl.php

$block = block_load('block', '5');
$output = drupal_render(_block_get_renderable_array(_block_render_blocks(array($block))));
print $output;
With this snippet, you can load a block straight to your theme. The first line loads the block information, in this case it loads a normal block with id of 5. If you want to f.ex. load the search module, you can type:
$block = block_load('search', '0');
And this will the search form.
The second line renders the block and third line prints it to the theme.

Add Javascript file to your theme

Currently there is two ways to do this. More standard way to do it is to add this line to your .info -file in theme.
scripts[] = name_of_script.js
This will automatically load name_of_script.js in your theme in all pages. To add more scripts, just create a new line just like before.
The other way to add it is to write this in your template.php:
function ThemeName_preprocess_html(&$variables) {
$options = array(
'group' => JS_THEME,
);
drupal_add_js(drupal_get_path('theme', 'ThemeName'). '/name_of_script.js', $options);
}

Target theme's frontpage

Sometimes you don't want to make page-front.tpl.php just for small style changes. Instead, you can try doing this in your page.tpl.php:
if (drupal_is_front_page()) {
$class = "front";
} else {
$class = "";
}

print "<body class='".$class."'>";
This adds a class to your body, so now in CSS, you can target stuff like:
#header {
background: blue;
}

.front #header {
background: lightBlue;
}

Comparison of Lightbox-modules for Drupal 7


Drupal has many modules available for displaying Lightbox-type content. Unfortunately for Drupal 7, there is only a few. Here's some of them reviewed.

What is a Lightbox?

Lightbox is a JavaScript application, that is used to show large images or other content in modal windows. 

Shadowbox

Shadowbox
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
Current version: 7.x-3.0-beta5

Colorbox

Colorbox
Colorbox is a lightweight customizable lightbox plugin for jQuery 1.3 and 1.4. This module allows for integration of Colorbox into Drupal. Images, iframed or inline content etc. can be displayed in a overlay above the current page.
Current version: 7.x-1.0-beta4

YoxView

YoxView
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich.
Current version: 7.x-1.2