Drupal 7 View Modes: Consistently themeing content across your site

Introduction: What's a 'view mode', and why do I care?

Here at Jaypan, we have begun using a powerful new feature in Drupal 7, 'view modes', to ensure consistent presentation of data across the site. View modes actually existed in Drupal 6, however there were only two available modes, full and teaser (more on this later). And since Drupal 6 only had one Entity type, Node, these view modes only related to nodes, as there was nothing else to relate to. Drupal 7 came along and opened up an API for other modules to register Entity types other than Node. Many things have been turned into Entities as a result; Taxonomy, User, and Comment are all entities in D7, and at Jaypan we utilize custom Entity types for each project. This means that the same types of things can be done with these Entities, as used to be done with nodes. For example, taxonomy terms have image fields attached to them in D7.

Cross-browser image masking using javascript, VML and the HTLM5 canvas element

On the top page of the rebuild of jaypan.com is a slideshow that splits images diagonally, and moves them off screen. In actuality, the images themselves are not split, rather I have layered two of the same image over top of each other, with the right side of the left image being transparent, and the left side of the right image being transparent. Then, when these two images are animated outwards, it appears that the image is split.

Migrating (not updating) comments (or other core types) from Drupal 6 to Drupal 7


In the process of rebuilding my site, I decided to build from scratch, rather than attempting to upgrade my installation. With my old installation, I had tried out multiple modules, changed themes multiple times, and played around with the database when I didn't fully know what I was doing, leaving me with a system that worked, but at times was buggy. For this reason, I thought it better to build fresh and import.

As such, I needed to import the comments from my Drupal 6 installation to my new Drupal 7 installation. This is easier said than done - comments have received a major restructuring, and use different database tables in Drupal 6 than they did in Drupal 7, and the column names the comment system uses has also changed.

JavaScript - Passing Arguments to Anonymous Functions Without Firing the Function

I recently had a situation where, within a loop, I needed to create an onload function for an image I was creating on the fly. Here is an simplified outline of what I was trying to do:

var i, img;
for(i = 0; i < imagePaths.length; i++)
  img = new Image();
  img.onload = function()
  img.src = imagePaths[i];

Ubercart - overriding the cart contents table on the checkout page

I have run across situations where I have needed to override the table on the checkout page of ubercart. An example is bilingual e-commerce site that I have created, in which the title is different between languages. The English title is shown by default on the checkout page, but I needed to swap that in with a Japanese title.

Doing this is a tricky process, as Ubercart bypasses a lot of Drupal APIs. I eventually figured out how to do this in a module, by overriding the cart pane theme using hook_theme_registry_alter(), and swapping out the theme function with a theme function in my own module.

In this example, my module is named belly.

Step 1: Override the default theme function using hook_theme_registry_alter()

function belly_theme_registry_alter(&$themes)
	$themes['cart_review_table']['function'] = 'belly_cart_review_table';

Drupal API Firefox search add-on

I regularly search the Drupal API for code. Anyone using Drupal does this. I previously used a Firefox add-on called 'add to search bar' that allowed any search on pretty much any page on the web to be added to the firefox browser toolbar.

However, bukem has created two addons that create this functionality, and do it well. Add to search bar, while it worked, never worked the first time, and had no autocomplete. The two search engines bukem has created both work every time, and also have autocomplete, just to make things a little easier.

Themeing Drupal 7 Forms (Including CSS and JS)


Theming forms in Drupal 7 is mostly the same as Drupal 6, however there are some changes in how things are done in Drupal 7, and we will be exploring those changes in this tutorial. We will be working within a module called 'form_theme', and will create a form that looks like this:

My name is [FORM INPUT] [FORM INPUT] and I am [FORM INPUT] years old

The form inputs will initially display the words 'First name', 'Last name' and 'Age', which will then be removed when the user clicks on the input, and added again if the user clicks outside the input without entering a value.

What we will be covering in this tutorial:

  • Themeing a form
  • Attaching jQuery (JavaScript) to the form
  • Attaching CSS to the form

As the main goal of this tutorial is to show how to theme forms, I will not be going in depth into some of the other code that is not relevant to themeing. As such, to understand this tutorial, you will need an understanding of the following:

  • How to create a module in Drupal 7
  • How to create a form in Drupal using drupal_get_form()