Panels 3: Using variants to create node layouts.

You can view your nodes in a custom layout using Panels without having to edit a node template file or use modules such as Content template.

The following example will display an artist's album with an album cover and a play list. It will also show a review of the album and a list of other albums by the same artist.
Using Panels we will build the node to display in two columns.

Requirements for this example:

I will asume you have an understanding of the following 3 modules:
CCK
Views
Imagecache

Please ensure that you have to latest stable version of the above modules installed as well as Panels and Ctools. Also remember to do a Drupal update.
(I stress this point because I had incompatability issues between the modules.)

Preparation:

Create a new node type called Album.
Add the following fields:
Artist: For this exercise, make this a text field.
Album cover: Use one of the various CCK image field widgets.
Play list: Text field with unlimited number of entries.
Review: A 5 line text area.

Create a View that will show a list of albums by the same artist.
Create a custom pane called Album pane which is a HTML list of node titles filtered by the artist field created above. (This is a short cut, better practice would be using arguments or node reference.)

Create an Imagecache preset to show the album cover in a suitable size.

Now create some Album content.

Creating a Panel, step by step:

• Go to /admin/build/pages and enable the Node Template panel and click Edit.
• Add a variant.
• Enter a name ('Album'). Click Selection rules and Contexts. (Contexts is optional and is not used in this example.)
• Create variant.
• With Selection Rules you will tell that this variant must only be used for the Album content type.
• Select Node: Type from the drop down list and click add. A new window will appear where you can select the node type. Select Album and Save.
• Select Only one criteria must pass. We only use one anyway.
• Continue.
• Choose a layout. I used the two column stacked in this example.
• Continue.
• Now you can add Panel content. Click the icon on the top left of the Top region and select Add content. A pop-up window will open where you can add blocks and widgets to your Panel. Select Node in the left bar.
• From the list, select the artist field. You are now presented with a new pop-up window where you can configure the field. It is similar to the options you have under the Display fields tab when you created the node type.
• In the Right side region, add the image field. Use the Imagecache preset as the field formatter.
• Under the image, add the Review field.
• In the Left side region, add the playlist field.
• Also in the Left side region, add the Album pane you create in Views. You will find this under Views in the left bar. Select the view you create and then select the Album pane in the Display list. You will now be taken to the configure window. Over ride the title to a more fitting name for instance Other albums. You also have a whole lot of other settings you can use to control the view. In particular I would like to point out the Arguments field which is used to pass an argument into the view. I'm not going to use it here but if you are going to work on Views with arguments, this field is worthwhile to remember to pass an argument from a panel into a view.
• If you want to add comments, in the Bottom region add the node: comment form and node: comments.
• Click create variant.
• You will now see an overview where you can edit the content. Each content section now has an icon on the right hand side where you can do various operations such as changing the settings and disabling the particular content. You also see the CSS properties where you can add a CSS ID or CSS class for the particular content. More about styling later.
• Click Update if you made more changes.
• Click Save and you will be returned to the panel front end.

If you know the node ID of one of your Album nodes you create, you can use it here to do a Preview of your node.
Not a pretty sight yet, as the node is un-styled. You will also notice the original node is duplicated at the bottom of your preview. You need to go to the Display settings of your content type and disable all the fields.

The original node display is now over ridden. If you open any node of the Album type, it will show the way you set it up in the Panel.

Adding more nodes like this is just a matter of adding more variants, and redo the steps above. For many different nodes that have the same basic content, you can create a general variant and add all the node types to the selection rule. When you need to make changes to one of the node types, you remove it from the selection rule. Clone the general variant and make your changes. Rename the new variant and add the node type to the new variant's selection rules as the only node type.

Theming the Panel:

Panels makes it very easy to add custom CSS ID's and classes.
First you can create a CSS ID for the whole panel under the General tab on the Panel front-end. There is also a field here where you can enter quick CSS code, but it is not recommended to use. Better to stay with the Drupal theming rules.
And as mentioned above, you can also add ID's and classes to each of the content.

Seems like a long path to get this far. Once you have your node set up this way it is a lot faster to do editing and styling of your layout compared to using templates. This is especially true if you have nodes with many CCK fields.