Pages

Tuesday, September 11, 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

How to convert your Drupal 6 theme to a Drupal 7 theme


When migrating your Drupal 6 to Drupal 7, one of the most important issues is the theme. Luckily, the base of the themes in Drupal 7 haven't changed that much, so the conversion is pretty straight-forward. Here are some tips for converting your theme, divided on different files in the theme.

 

.info File

All CSS and JavaScript files have to be included in the .info file. Before, you didn't need to include style.css and and script.js, since the theme engine automatically included them. This is not the case any more, so here is how to include them in your .info file:
stylesheets[all][] = style.css
scripts[] = script.js
PHPTemplate is the default theme engine.  In Drupal 6, it was necessary to include this line in the .info file:
engine = phptemplate
Since PHPTemplate is already the default theme engine in Drupal 7, this line can be safely removed.

Page.tpl.php

"Primary Links" is now "Main menu" and "Secondary Links" is "Secondary Menu".  This means at all the variables need to be renamed regarding "Primary Links" and "Secondary Links".
$primary_links => $primary_menu
$secondary_links => $secondary_menu
$help, $mission and $closure are now regions. So this means that the default regions ($left, $right, $content, $header, $footer) have three additional regions. $mission is also renamed to $highlighted and $closure is $page_bottom. And also, since we now have $page_bottom, we also have $page_top, which should be put right after <body>-tag. Like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
 "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
  ...
  <body>
      <?php print $page_top; ?>
      ...
      <?php print $page_bottom; ?>
   </body>
</html>
$content is a block, not a region. In other words, like in Drupal 6 you could only put blocks after the actual page content, now you can assign the $content as usual in page.tpl.php, but in the Blocks-page, you can change the actual page content position in the Content-region. This allows you to put blocks before and after the actual page content.
$left and $right are renamed, now they are called $sidebar_first and $sidebar_second.
Two new classes for hiding content in page, .element-hidden and .element-invisible..element-hidden completely hides the element, but can be shown with f.ex. jQuery fadeIn() function. .element-invisible hides the element visually, but is still available for example screen readers.
$search_box is no more, instead it is a block.

 

Template.php

Function names in template.php have to have the relevant theme's name. So that means no more phptemplate-prefixed functions, they all need to converted to use the theme's name.
Alter hooks can now be used in themes. This includes: 
  • hook_page_alter
  • hook_form_alter
  • hook_js_alter
  • hook_css_alter

These are the main things that have changed in the new Drupal 7. By all means it's not all, there's A LOT more things that have changed, you can see them in Drupal.org: Converting 6.x themes to 7.x, but these should be enough for most themes to become usable in Drupal 7.

How to use Facebook Connect in Drupal


Let's face it, everybody and their mother are using Facebooknowadays. So having Facebook Connect as an login option would be really beneficial on your Drupal site.
Some of the reasons for this are:
  • Users don't need to register on your website.
  • Users can use the same username, no need to remember usernames & passwords.

It is also fairly easy to setup. Let's begin!

Requirements


Step 1: Downloading all the necessary files

  1. Install Drupal 7 and set it up.
  2. Download "Drupal for Facebook" -module
  3. Go to "PHP SDK for the Facebook API"-page on GitHub and download the latest PHP SDK for Facebook.
  4. Extract the files to "sites/all/libraries/facebook-php-sdk"

Step 2: Creating a new Facebook Application

  1. Go to "Facebook Developers"-page and select "Create new application"
  2. Write your "App Display Name" and accept the "Facebook Platform Policies"
  3. Keep the page open, we will need the APP ID & Secret later. You can also setup the icon for the Application on this page. Users when see it when logging in on your website

Step 3: Enabling the Facebook module

  1. Login as Admin to your Drupal site and go to "Modules" (admin/modules)
  2. Under "Drupal for Facebook"-fieldset, choose "Facebook API", "Facebook App" and "Facebook Connect" and click "Save".
  3. Go to "Drupal for Facebook"-settings (admin/structure/fb) and click "Add App"
  4. On "Label", write a name for this App, like "fblogin1". On "Facebook App ID" and "Secret" write the info from the Facebook page before.
  5. Select "Primary" under "Facebook Connect" and click "Save".

And you are all done! In "Blocks", there should now be a new block "Facebook Connect Login". Apply that to the region you want hit "Save".