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.

Comments

ingopingo’s picture

First thx for the Tut...

I built the conten type, the content and the view as described (I think) with the Argument Content:Artist in the view. But then there are a few things I don't understand due to these tiny descriptions.

1. The custom pane: Do you mean a Content Pane? What Html list you're talking about?

2. The panel: Everything is clear until adding the content pane into the left column. But what to adjust within the configure window.

Would be nice if you could explain things a bit further... Not everybody is a genius as far as views and panels are concerned...

Thx in advance

Max_Headroom’s picture

Thanks for the feedback
Please note that this page is marked as incomplete, as I am still adding content to it, such as screenshots which will make things alot clearer.
To answer your question:
1. In views, add a new View which you can call Album. Set your default Style to HTML filter. In fields, add Node title. In filters, add Content: Artist = {artist_name_you_use}.
Add a Content pane display and change the name to Album pane for clarity. Using the filter like this is just for the sake of this exercise. It is beter to link albums to artists using either Views arguments or Views relations. But it is beyond the scope of the tutorial to explain how so I did not use arguments or relationships.

2. I take it you are refering to adding the view. There is nothing to adjust in the configure window except for over riding the title.

I will add more content once I can get the images up.

Quentin Campbell

Pepe Roni’s picture

In views, add a new View which you can call Album. Set your default Style to HTML filter. In fields, add Node title. In filters, add Content: Artist = {artist_name_you_use}

The view is not connected to the node but displays all albums only of the artist {artist_name_you_use}. I would like to only show albums from the same artist of the current album (possibly without the current album itself (Other albums)).

  • Is there a possibility to let panels pass an argument from the current node ("Artist") to the view?
  • how can the view be set up to not show the current node?


..........
Wilfried
Drupal: a CMS without typo in its name
fibie’s picture

Hi, firstly thanks so much for the helpful tutorial.

Where I got stuck is the bit where you say to add panel content click the left side > node > field artist from the list

I went to node and the window opens with options but there is no list of cck content fields in my case.

I created them in the node content type so they exist but there is no way I can see to choose them within panel content.

Obviously I could do this through views - maybe that is the step that is missing?

Thanks in advance

Fiona

RikiB’s picture

same here, totally missing something at this step

itserich’s picture

Perhaps things have changed since this was written, but I found the CCK fields.

In the pane, click the widget in the upper left corner.

Add Content.

Menu on left side of pop up window should be headed Add Content to Top.

Click Node, and the CCK fields for whichever node type was previously selected should appear.

I am new to this function but it seems very important to be able to format a page with CCK fields.

Anonymous’s picture

Thanks a million for this. Of course I like to try and dive head first without reading the documentation (failure), but this is a MUST read/do for any Drupal newcomer.

kirikintha’s picture

I was trying to figure out how to stop a pane from rendering if there was no content added to the pane. Say, if there are no images, then no pane should show. I deal with pretty complex layouts, so sometimes I need panes to disappear if there is no content and have the divs push out to 100%, without setting a width to the div.

This is my solution by adding a PHP visibility rule on my images pane:

/**
 * If there is a contextual argument in $contexts with this field, show this pane
 */

//print_r( $contexts['argument_nid_1']->data->your_image_field );
$exist = ( empty( $contexts['argument_nid_1']->data->your_image_field ) ) ? false : true ;
return $exist;

And your float css:

div.your_image_field {
  position:relative;
  z-index:9999;
  float:right;
}

This let's my text wrap in another pane, and if there is an image, it then does it's magic and floats the text around the image. nice!

What I do, instead of creating a lot of panel-page columns for complex fluid layout, I make only one or two columns that will always be there, since panels will render all the panel regions ad infinitum. If there is any flexible content that needs to go inside of a panel column, I stack the panes together, and then float content. This lets me leverage panes and layout together, without having to rely on panels eval-ing too much in the long run or playing too much in the layout designer, which is a great feature, but I hate my clients playing with, due to the mess that is IE.

Anywho, if you play around with this you can create fluid panel layouts with panels and some css. Just some food for thought, not really a great explanation, sorry! ;)

Nothing unreal exists.

BroadlineCable’s picture

Is there a way to create a panel block (like a mini panel) that will allow you to insert different content on different pages. Basically I want to create a banner section in my ubercart catalog that will allow me to change the banner depending on what category I'm looking at. I realize that I can create a minipanel for each and every page but I think that will get a little redundant. Any ideas?

GoddamnNoise’s picture

I'm only a newbie, but after reading Panels' docs, i think you should add a Taxonomy Term context to your Panel (one context per category=taxonomy term). Then, you should create new variants for your Panel (one variant per category) and add a "Context Exists" Selection Rule for each variant, referencing the right category/taxonomy term context for each variant. Hope this could point you in the right direction!.

jcisio’s picture

This is what he calls "a little redundant" because we need to create many variants. Is there a way to create only one variant, with a pane that is slightly changed, depending on context.

baff’s picture

Could someone post the followig example. Use the same css styling for panel node as for all nodes.

I have set on CSS code for the whole variant

But it does not work

see screenshot here: http://www.baff.cc/css.png

goodboy89’s picture

very very cool !!!
Thanks so much.

Vc Developer’s picture

Hi,

For Drupals default display of the content teaser for the frontpage, how do you use Panels without using a custom View or Display Suite?

Thanks!...