In the second geeky thing today, I FINALLY realized the best use for the weird kiosk PC I inherited from the museum: to watch Netflix movies on demand. As a Mac/Linux user — this is amazing! And I can mount the whole beast on the wall and watch whatever I want. Maybe we DON’T need cable after all….

Though I didn’t do the drawings (that was Dylan, Michelle & Jasmine), I did all the layout and design in Indesign, dropping in all the locations we exported from the google map in the Drupal site. I traced all the bike routes, which nearly gave me carpal tunnel.

Check out the website: atlas.arisebookstore.org to make additions for next year!

First, make sure your site (or page) is very stripped down. Take out anything that might make it complicated — like javascript or anything dynamic. You can add functions back in later.

We’ll start with a page that looks like this as an example:

http://www.pinkslipmedia.org/ideacoop

It’s pretty simple. You have two menus (one won’t be dynamic since it is image-based and the other in a sidebar that can readily expand with other blocks) content title, content, images, and a footer.

Take out the content (the title text, the body content–including image, and anything in the sidebar and footer). This is what we have left.

Let’s switch gears and look at how a Drupal theme is put together.

Drupal themes can be created using a variety of theme engines, such as Smarty, XTemplate, PHPTAL, and, the favored Drupal engine, PHPTemplate. They control the PHP syntax used in the template files. We’re going to build our’s using PHPTemplate.

So what does the theme look like? A Drupal theme is made up of a series of files that can be super simple or extend with surprising granularity. Bluemarine’s theme might be the simplest you can find:

In there you have: an image file for your logo, a screenshot (which is used by Drupal to identify the theme on your theme selection page), a stylesheet and about five php template files.

As you could surmise, block.tpl.php controls how blocks look and comment.tpl.php, comments. Box.tpl.php controls how boxes around element look, the most common example being around comment forms. Node.tpl.php controls the actual content of a page, the node itself.

Page.tpl.php is the main one we are concerned about today. This is the skeleton of your site, the bones of it. Let’s open one up and see what it looks like.

Bluemarine’s is simple, but it is made with tables. Let’s use a different one. “Clean” theme has a basic page.tpl.php.

It actually looks quite a bit like our original file, with a few differences. The main one you will see is little snippets of php code. You don’t need to know very much php to make this work.

Here are some of the basic ones to take note of in here (don’t copy these directly because I had to put spaces in the code to make it show!):

• < title >< ?php print $head_title ? >< /title >
This dynamically pulls your page title from the database.

• < ?php print $styles ? >
This pulls in all your stylesheets — many modules come with their own stylesheets.

• < ?php print $search_box ? >
Search box

• You will notice a few have “if” statements. This will check your database to see if there is something to fill that element first — and not print otherwise. For example:

< ?php if ($title): ? >
< h2 class="page-title" >< ?php print $title ? >< /h2 >
< ?php endif; ? >

This checks to see if there is a title. If there isn’t one, it won’t print any of it, not even the html. If there is, it will print it, with h2 tags around it.

• < ?php print $breadcrumbs ?>
Prints your breadcrumbs

• < ?php print $right; ? >
This is a region. Regions are areas you can stick blocks. You can add more… but right now there are five regions in here: left, content, right, header and footer.

• < ?php print $closure ? >
The last thing that drupal prints on a page. Always have this snippet at the end of your page.tpl.php file.

You can check out the list of other PHP variables that can be passed to page.tpl.php.

Now we can start plopping in the variables we need into our theme. I’m going to use the “Clean” page.tpl.php file as a starting point and bring the PHP snippets over to my stripped down web page.

Also bring over your images and your style sheet. I’d rename your original page.tpl.php and style.css files so you can save them, just in case!

Upload your new folder (renamed of course) to the sites/all/themes folder. Enable it in your themes section and make it your default. It will probably look very, very ugly… but that’s OK!

In all likelihood, your images are all broken. That’s because the path to that images folder has changed. It was once just images/. Now the path needs to be absolute, and go to: /sites/all/themes//images. Change all instances of that in your page.tpl.php and style.css files.

There will probably be some other kinks. I often run into this one, in which a div doesn’t clear the sidebar float. (And the formatting on the menu is not correct.)

The easiest way to narrow down what styles are conflicting or causing the problem is to pop open your CSS preview pane in the Firefox web developer toolbar and start deleting chunks. This one can be remedied by adding .node-form .standard { clear: none; } to your style.css file. Your theme’s style.css file should be the last stylesheet called, so you can use it to override styles from modules or drupal.

In this case, the clean theme used template.php to pull in a whole slew of css files. I deleted that connection to reset the styles. Also, add: .block ul { padding: 0 0 10px 20px; } to fix the menu formatting.

Cool. So your theme should be up and running, with a little bit of css patching. A good thing to do right now is to check the W3C Validator (which you can do right from the Firefox web dev toolbar). This will help you fix any problems and make sure everything’s neat & clean!

But, you say, what if I want a front page that looks totally different? Because of Drupal theming’s granularity, page.tpl.php can be duplicated and renamed to fit many different configurations. For example, say you want a specific page theme only for node 1. You could duplicate page.tpl.php, rename it page-node-1.tpl.php, edit it, and the new template will ONLY theme that node. The naming structure cascades, so Drupal would look for it in this order:

page-node-edit.tpl.php
page-node-1.tpl.php
page-node.tpl.php
page.tpl.php

Or, if you wanted granularity for the user section of the site, the following order would apply:

page-user-1.tpl.php (themes all pages /user/1/*)
page-user.php (themes all pages /user/*)
page.tpl.php (themes all pages)

So, as I was saying, you can make a template called page-front.tpl.php which will theme your front page. In this case, I’m going to just copy the code of the front page of the existing site and put it in the page-front.tpl.php — but if you do this at home, you can include php snippets that will talk to your database.

Yay!

There’s a lot more to Drupal theming than this; check out Pro Drupal Development for a rich chapter on it. A more advanced topic that we were not able to address today is how to use template.php (a file you can create in your theme folder if it does not exist already) to override theme functions. We’ll save that til next time!

First: a fresh install on Drupal 5.8 (Drupal 6 modules aren’t QUITE there yet, I tried!)

Enable Clean URLs

Required modules

• CCK
• Imagefield
• Image API
• Imagecache
• Views
• View Bonus Pack
• Thickbox

Enable the following on your Modules page:

• Content
• Imagefield
• ImageAPI
• ImageAPI GD2 or ImageAPI ImageMagick
• Imagecache
• Imagecache UI
• Thickbox
• Bonus: grid view
• Views
• Views UI

Make the Imagecache presets

Site building –> Imagecache –> Add New Preset

Make one called “thumbnail.”

And make one called “display.”

Add Image Content Type

Add new content type called “Image” and then click “Add Field.”

Call it “photo” and select Image as the field type.

Click on “Display Fields” and choose “Hidden” for the label, “Thickbox thumbnail” as the teaser and “Thickbox display” as the Full. (This step is not necessary — but would be helpful if you were using this field for Page content that had a teaser block or a teaser on the front page.)

Add Gallery View

Now make a new View called Gallery. Under Page, check Provide Page View. Make the URL “gallery.” Select Bonus: Grid View for the View Type, check Use Pager and enter 24 as the number of Nodes per Page. Go down to Fields and select Image: Photo (field_photo). Select Do not group multiple values and select Thickbox: thumbnail under Option. Under Filters, select Node: Type is one of Image and Node: Published Equals Yes. Click save.

Test!

Go to Create content –> Image to add your first image to the gallery. To make sure it worked, go to yoursite.com/gallery.

If this all goes well, you are ready to use taxonomy to make multiple galleries!

Categories

Adding categories to your content is an easy way to organize it, and is especially powerful when combined with Views. Go to Administer –> Content Management –> Categories and click on “Add Vocabulary.” This is the name of the type of category this is. So, Gallery or Image Gallery would be good fit. Now, you need to add terms to make your different galleries. In my case, I’d like to make a gallery for different photo subjects, like Gardening, Dog and Remodeling. Click Add Terms, and add these in, one at a time.

Let’s try adding a new image and tagging it with a category. It will still show up in your gallery because you have not filtered the galleries yet.

Go to Administer –> Site building –> Views

Next to your Gallery view, click the “Clone” button. This will duplicate your Gallery view and you can edit it to filter ONLY the Images tagged with “Dog.” Change the name, description and url. Under filters, select Taxonomy: Terms for Gallery. Select Dog next to “Is All Of” in the filter and Save. Now check your new URL for this filtered gallery!

If there is time remaining, we will go over adding an image field to Page content.

ADDED AFTER DRUPAL DAZE PRESENTATION

You can also do some really cool stuff by adding an exposed filter to the gallery, letting people select which gallery to view — or by using arguments in your original view to dynamically create your galleries! These came out of our discussion after the presentation, very cool!

** Forgot to note, this show was July 21, the date was corrected before it went to print! **

Please listen to Always Wanting More. You will be.