theming

Introducing Writer: A Drupal blogging theme for developers

Writer Theme
My friend and co-acquian, Bryan Braun, recently released a new, beautiful, minimalist blogging theme on Drupal.org called Writer. I'll let Bryan make the official introduction:

"The story is quite simple. I am a front-end developer who blogs. I searched the Drupal theme repository, but I was unable to find a blogging theme designed specifically for developers. So I made one.

This theme was designed using three driving principles:

  • Brutally simple design
  • Fantastic typography
  • Support for code snippets

These principles guided me through the tradeoffs and helped me make various design decisions. Let's get into the details..."

Field API - Creating your own field formatters

Drupal 7's Field API is amazing—it allows us to easily add fields to any type of entity, and customize those fields with various widgets and display formats. I'm going to walk you through two examples of how you can leverage the Field API to create your own custom field formats.

Example use cases:

  1. You're using the phone field to display phone numbers, but you'd like to customize the HTML output to make it mobile-compatible (click to call).
  2. Your nodes display full addresses via the addressfield module, but you'd like to render those addresses as google maps links.

Let's start at the beginning: you're going to be creating a custom module. Let's call is grasmash.module for vanity's (and sanity's?) sake.

We'll start by letting the Field API know that we have a new field format for it to play with.

Adding first and last classes to your field items

By default, Drupal's core field.module with add 'odd' and 'even' classes to your field items, but it won't add 'first' and 'last' classes! This can quickly be remedied by overriding the core field.tpl.php file with your own custom one.

I'd recommend first copying /modules/field/theme/field.tpl.php into your site's theme folder. For me, the destination was /sites/all/themes/grasmash/templates/field.tpl.php. Then clear your caches. This will force Drupal to check for new template files in your theme's directory, and select the new field.tpl.php as the prioritized template for generating fields.

Here's the business part of my customized field.tpl.php file:

Creating a full screen, resizable slideshow in Drupal

The Views Slideshow module makes the process of creating a slideshow in Drupal extremely easy, but I've always found one important feature to be missing: a fullscreen setting.

Here is a script that take a slide image (or any HTML element for that matter) and set it to be the size of the viewer's browser window (preserving the aspect ratio). This works with single elements or a set of elements. It's particularly useful if you'd like to set an image to be the background of a given page-- this will ensure that the image always covers the entire viewport.

I'd recommend dropping this code into a resize.js file located in your Drupal theme's folder. From there, just add the filename to your theme's .info file, and it will be loaded into every page of your site (if that's what you're going for).

Theming Faceted Search result

The Faceted Search module produces a result set that looks almost exactly like Drupal's core search results. However, it does not use the search-results.tpl.php file. Rather, it uses it's own theming function: theme_faceted_search_ui_search_item().

You can, of course, set your own theme function to override this.

Here's a quick example of how I modified the way that users are displayed in the results:

Drupal - overriding filefield theming

Drupal's default 'Generic File' format can be a bit ugly. Luckily, it's not too hard to override. If you'd like to change the default filefield theming for 'Generic File', try using the theme_filefield_item() function in your template.php file.

Note: You may also be interested in checking out my post on customizing the filefield format in views.

In the example below, I overrode the default theming for all cck fieldfields belonging to node type 'publication'.

Drupal: Add body classes based on user permissions

This one is a little bit more esoteric. I found the need change the page style (via CSS) based on whether the current user had permission to update the current node. Drupal preprocess_page to the rescue!

Just add this snippet to the yourTheme_preprocess_page function in your template.php file. It will add body classes (e.g., user-node-update, user-node-delete) to your page depending on the current user's permission to access the node being viewed.

Drupal: Add current user's role to body classes

If you'd like to change your site's appearance based on the current user's role, you can easily add the current user's role to the $body_classes array.

Just add this snippet to the yourTheme_preprocess_page function in your template.php file.

Drupal 6:

Add a Drupal template suggestion for Panels: page-panel.tpl.php

Drupal has a standard array of template suggestions that let you specify which TPL file should be used according to node type, node id, etc. However, there is no default template suggestion for pages generated by Panels.

You can easily fix that by adding a little snippet to your template.php files' preprocess_page() function.

Pages