You are here

Use panels to override the node output in Drupal 7

Posted on Thu, 2011-08-18 18:14

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.

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.

i dont see that next screen is there any way i can do it without using panels? as i keep getting a 403 fobbiden error from the server for the ccs for ctool and views and panels and all the javascript for it?

I ahde the same problem with not seeing the node:type bit. Here is what I did to solve it.
I uninstalled the Panels and the Views Content Panes modules.
Then only installed the main panels module and the Views Content Panes Modules.

I build a new view, as per instruction at the top of the page, choosing a node type. Then I followed the instruction for adding a panel variant, and this time it did show up. I kept only a simple title field in the view, and didn't add any fields (as I'm using it for something else), but did follow the other steps.

Doing that everything worked as described in the tutorial. Using Drupal 7.15

I try to append existing gallery to normal page below the text. It work through content types well, (adding field_gallery to basic page) but pictures are in column again now. How can I change the view to override the combo page (basic page + gallery node) to make pictures be in grid.

Well, maybe there is some better way to get the result I am looking for, then please kick me someone to the right direction.

Hello,
before I found this tutorial, I Add few custom fields to forum posts. (I have Advanced forum)
That I want is to override forum post node, to show custom fields.
Now I did as you say, Then I do View preview, I can see my post as I want to see it.
But then I do my Panel, after I select all fields I want to see, I can not see anything.
When I open forum post, I can see nothing, mean post is overrided, but panel is empty.
Any clues?
Thanks You very much.

Display author (username and user image) and date information that appears under a node title gets lost using this method. Even though this information can be added via the Panel->Add Content->Node-> Node Author and Node created date it does not have the same feel. I could also add this info via the view but it appears for every image in the node. Any ideas?

You are correct James. However I also have to hide the images in the node display (manage fields in Image content type) So now I have the node title, details of node author and post date, node body and the panels grid of images. Not ideal but Ok I guess unless I can find the css to display the node content in a grid

I created a view like in this tutorial except instead of a page view chose EVA attachment, entity type: node, bundle: image content type (in my case). The contextual filter Content ID from URL for Content: NID filters only images pertaining to the node being viewed.

Similarly I was able to alter my taxonomy term page to display a grid of thumbnails instead of having images one below the other.

Get up to the long list of images within all galleries but when I try to use contextual filters and enter a node I get nothing. The next bit using format also gets me a grid of all images, just that intermediate step.

The preview in views will show nothing as there is no node NID being passed through. If you find the NID of one of your nodes that has images, then enter that in to the arguments to pass to preview then you will get a proper preview.

Having struggled for hours tried something different this morning that sort of worked but thought I'd just have one more go your way. No idea what happened differently but it's up and running. Many thanks

Dear sir i dont with see ur tutorial its awesome but please help me to find me this problem

i have three album in my all photo page when i click my album it show me all album photo with my click album but i want to show all all photo in that album which one i click please help me if some one know how can i do this if u know any tutorial please would you like to send me saroar9@gmail.com
Advance
Thanks
Alif

Has someone the situation when you need to have access to the node content on panel page ?
I need to do all the stuff described in this tutorial but not on "/node/%node". For example a need that on custom panel page like "research/events/%research_node_alias". That actually is the problem, how could I convert node aliase in node ID to have available node context in panel?
Thanks