Drupal 7 Panels Module (part 2) - Override Node View Page

By shane
Mon, 2013-03-18 23:53
7 comments
Series: 
Daily Dose of Drupal Episode #129

Share with Others

This continues with the Drupal 7 Panels module and goes into more detail on how the Panels module can be used to override the display of the node view (or content type) pages.

In this episode you will learn:

  • How to use the Panels module to override the node view page on a Drupal 7 website
  • How to use Panels to completely customize the layout of content type pages for specific content types using selection rules and variants

Thanks to OSTraining for sponsoring this episode of the Daily Dose of Drupal.

Hello everyone and welcome to another episode of the Daily Dose of Drupal, today we’re on Episode Number 129 and we’re going to pick up where we left off last time on the Drupal 7 Panels Modules or Panels Module and we’re going to actually go over how to override the Node View Page for a specific content type on a Drupal 7 website.
So we’re using the Panels Module as I said before but before we get started; as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, you can also go to codekarate.com and sign up for the newsletter and check out my new Code Karate supporter program, recently launched. Today’s sponsor is OS Training.

OStraining.com provides great training for Wordpress, Joomla, Drupal and just basic coding skills so if you want to look at some of the Drupal videos that they have you can come in here and preview the videos. They 14 classes on Drupal and they cover Drupal beginner and intermediate levels, they cover views and they have a whole bunch of other Drupal related classes.

So go ahead and give them a look on OSTraining.com and check out some of the Drupal videos. Let’s go ahead and get started; we left off last time with this basic Panels page that we created and we created that URL of /panel-page, we’ll go ahead and jump into this just to review.

As you remember we were able to drag different sections into different items into different regions but what we really want to do this is create a new layout for a specific content type so I created a content type here called Contact and this contact content type has a whole bunch of fields like contact name, phone number, e-mail, company name, company website and notes and I’ve just used basic text fields, you could of course download other Drupal modules to make the e-mail field act more like an e-mail field, phone number more like a phone number field, etc. but this won’t work for our purposes.

So I’m going to go ahead and create a new contact, so I’m just typing in a basic contact for some contact information and I will save this and you’ll see this is how it turns out, it has the notes section up above, phone number, e-mail, company name, company website and everything works alright, we have a comment form below but what I really want is I want to break this into couple different columns and I just want to change this layout a little bit.

So of course if you just want to change the ordering or change the structuring a little bit you can always come into your content type and manage display and for instance I can move the noted down to the bottom and I can of course change the labels to some basic things like that.

However; that doesn’t give you really the full control that you might be looking for and this is where the Panels Module will come in handy. So as before you want to watch the first episode to make sure you have all the required modules but I come into structure pages and there’s a section here called Node View. Take a look; also you’ll see there’s a User View which is for user pages, there’s a Term View which is for a Taxonomy Term page and then there’s Node View which is for Node View pages or content type pages.

So I’m going to go ahead and enable this, after I enable it I come in here to edit and we’re going to have to actually create a new variant. You can think of variance as different layouts that you want to create. Each variant can have a different selection rule and in most cases with your content types you’ll probably have one layout for each content type and if you don’t want … if you don’t actually have a variant selected it’s actually going to fall through and go back to the default Drupal display so we’ll show you how that works in a second.

I’ll go ahead and I’ll call this Contact because we’re going to use it just for the contact pages, it’s a Panel Variant Type, we do want Selection Rules so I’ll go ahead and create the variant. In this Selection Rules this is basically the rules that need to pass in order for this layout to be displayed.

There’s a whole bunch of options here but most of the time you’re going to simply go to node type and select the node type that you want to use this display. So in this case I selected contact and I want this to show up for contact pages so I go to continue, I’m going to go to a two column simple layout, I’ll go ahead and use two column stack again and I go with the next page and I can add or remove CSS body classes, add CSS body classes, give it a CSS ID and drop in some basic CSS Code.

As I mentioned before I would use the theme versus actually dropping in code here but it is an option and now that we got that created we now can start adding items to our display. So the first thing I’m going to do is I’m going to add the note section to the bottom here so I simple come into node and in this case the node section is the body field so I’m going to click on body, I can give it a label whether I want it to be a title field, want the label to be above or I want the label to be inline, you can select the Formatter and you select of course the node being viewed.

This override this title, basically allows you to give a different label if you want. So I’m going to save this, I know I just have the body field here, I’m going to go ahead and create the variant and save it and we’re going to take a look and see what that does, I click Update and Save, now that it’s saved I’m going to close out and you’ll see now everything else on my page is gone, I just have this Note section.

I’m going to go ahead and hop over to an article content type that I have to show you that it’s only doing this on the actual contact content type. The way this is working is this article content type is coming into these pages, coming into this node view section. It’s going through this variance and if it doesn’t find the one that matches it’s going to fall back to the default Drupal Node View which is why it looks normal.

If I added another variant up right up here in the corner I could also add one for article, for page for any other content type that I wanted to display a unique layout for. To get back into my layout for my contact content type I simple click on Content and now I can start adding the other fields that I want.

So I’m going to add some of the other Node fields like e-mail, and then I’ll also add phone number, it’s taking a second to load here, phone number as well and I’m going to go ahead and put this one so we could see the different labels up with this label as above then we’ll go to see what the different labels look like. I’ll also add on the right side now … I don’t know why it’s … since we’re having these issues it’s a little bit strange but the right side I’ll put company website and I’ll put this label as inline.

So now you can see I have two different columns of information with the e-mail and phone number over here. I can of course drag this to different sections and a company website over here so I’m going to update and save this and we’re going to go ahead and take a look. We’re going to need to come back to this page or refresh and you see the e-mail is here.

This is with the label as the Panel Title. The label above shows up here and inline shows up like this. As you can see its inline and then the Node section is of course below. To edit the panel I can always just click here and select Edit Panel and I’m back right to the section that I need to be on this variant. So I’m going to also add the company name field and I’ll make this one inline as well.

Hidden of course just hides the level and then I’m going to save this and now you can see now the company name shows up there as well. So as you can see you can do a whole bunch of different stuff with this and it’s not just limited to the fields that you created on this specific node. You can also add other items. You can add for instance other blocks that you might want.

Let’s see what we got here for different blocks and we can add different widgets like the Powered by Drupal widget or recent content, you can either login form if they are not logged in, different search forms so I’m going to drop in the search form here just so we can see how that would work so now the top is the search form and the other sections of course are what we set up before I’m also going to add the Comment section so I’ll save this, refresh that and you can see there’s now a search form here but I’m also going to drop in the comments section below so we’ll drop in the comment form here, come up here to leave its node and we can do the comment form, you can also add Node Comments as well.

I’ll just drop in the comment form for now and then of course if you want to display the node comments you would of course add the node comments section to the Panel as well. So as you can see it’s completely customizable to any type of layout you want and you can change the layout, you can drag and drop and put fields wherever you want, you can change the labels and you can use other types of blocks, you could drop views in here if you wanted a view of this … for instance something related to this contact.
There’s a whole bunch you can do with Panels and this is just the start. We’ll have another episode on more things you can do at Panels in the next episode of the Daily Dose of Drupal but thanks again to OSTraining.com for sponsoring this episode and thank you for watching; we’ll see you next time.

Comments

I've played around a bit with panels but it seemed real clunky so I stopped bothering to learn them, but this video really showed the power of them. While they're still a bit confusing (the devil is in the details!), I'm gonna give em another try.

Thanks for the great videos, as always!

I am a newbie to Drupal7 and have found your videos to be an invaluable source of reference - keep up the good work.

I have two questions:
1) how does Panels compare to Display Suite for changing the layout of a node?
2) If a content type has a referenced entity can I pick which fields from the referenced entity to display using Panels (or some other module) instead of the Teaser, Full content etc.

Thanks
Alan

Hi Alan,

Display suite works pretty well with Panels. You can create all your view modes as usual and when clicking "Add content" on your region you can go to "Node" and click "Node content". Then you'll be able to choose which view mode to use.

Also, the "Context" tab of your variant lets you add any relationship you want. For your example, you could add the relationship "Content from content: on Content HERE_YOUR_ENTITY_REFERENCE". After that when clicking on any node field or content you'll be able to choose between "Node being viewed" and the other nodes you've added via relationships.

Hope this was clear...

Hello Shane

I would like first to thank you so much for all the efforts and time you put into these episodes of drupal. I have really enjoyed every single one.

My question is, would it be possible to embed a variant inside another variant as a content. in panels module, in your episode 138, you demonstrated the use of variant, and I was wondering if I can use a variant with another variant. how useful that would be, it would save my time, so I dont have to create the same variant again, reminds me with the concepts of nested variant.

I have tried panel as a node and then add the node into another variant, but how cool would that be so when you add your content to any region, you cant add another variant as a content.

Thanks alot

Nice work dude. your tutorial helped me save my day. Will come back to this site for more info. You are doing a great job.

Post new comment