Use panels to override the node output in Drupal 7

When creating an image gallery in Drupal using CCK/Fields the resulting output is just a string of divs resulting in a single column of images. This tutorial will show you how to use Views and Panels to override the standard node output to display the images of the gallery in a grid.

For this tutorial you will need the following modules installed:

• Views
• Ctools
• Panels

Setting up the view

We will be using Views to create the grid layout and use the arguments/contextual filter to tell views which node we want it to display the images from.

First create the view giving it whatever name you want. Select Content of type Gallery (or whatever your gallery node is) and uncheck the Page option as all we need is the basic View.

Fields

Under fields press Add. Find your field which the images are contained within and add it. Select all the presets you want, under Multiple Field Settings, uncheck the box. This will make every image in the node a new row within our view.

Click Title and remove it.

Pager

Under Pager, select Display all items and keep the offset as 0.

Contextual filters

If you press Preview at this stage you will see a long list of every image within your galleries (if you have already uploaded images).

What we want to do is limit the results to only a single node.

Under the Advanced section of the Views window, click Add next to Contextual Filters.

Select Content: Nid from the list. Select Provide default value and from the drop down select Content ID from URL.

Now in the preview filter box, enter a node ID of one of your galleries. The preview will now show you a list of images in just that node, similar to what you would get on a normal node display.

Format

Under Format click where it says Unformatted and select Grid. Leave all the options as they are unless you would like to change anything, just make sure you leave Grouping field set to - None -.

Now if you press Preview you should see the grid of images.

Save the view.

Overridding the node view

At this stage some people may just prefer to create a block from that view and display that on the node page within one of themes regions. But I am going to show you how to use Panels to override the default node view.

You will need the Page manager and Views content pane modules installed which come as part of Ctools.

Go to Structure > Panels.

Under Manage pages press Enable next to Node template.

Then click Edit.

Select Add variant.

Give it a name and tick the Selection rules box.

On the selection rules screen, under the drop down select Node: type and press Add. From the options check the box next to your gallery node.

On the next screen choose your panels layout that you want. Enter anything you need to put in under Panel settings.

Under Panel content we can chose what blocks/fields/content appear within our panel.

In the region that you would like to place the content in, click the cog at the top left and select Add content.

I want to show the node's description followed by a grid of images. So on the left hand side, select Node. This will then show you all the fields that belong to the node that are available. In my case I will select Field: Body (body) and I will set the Label to Hidden.

Once you have added that (if you want to show the node body that is), click on the same cog and chose Add content again. This time on the left hand side chose Views.

From here select the view that you created. Leave Display set to Master and press Continue you can override the contextual filter here by setting the Content: NID or leave it as it is, it really doesn't make a difference in this case.

Once you are done, save the panel.

The result

Now if you go to one of your gallery nodes, panels will override the standard node view template and use what we just created.

Display Suite

You can also override/add to the node template by using Display Suite but I personally haven't used it.