Drupal 7 Panels Module Contexts

By shane
Tue, 2013-04-02 21:37
Daily Dose of Drupal Episode #135

Share with Others

Another episode on the Drupal 7 Panels module, but this time we cover Drupal Panels Contexts.

In this episode you will learn:

  • What are Drupal Panels module contexts
  • How can Drupal Panels module contexts be used to load in additional information in a panel page
  • How can Drupal Panels module contexts be used to load in dynamic information based on a page argument

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on episode number 135 and we’re going to continue where we left off, continuing to learn more about the Drupal Panels Module. As always I am Shane, you can follow me on Twitter at smthomas3, you can also go to codekarate.com, learn about the codekarate.com supporter program by clicking this link right here, you can also sign up for the newsletter if you haven’t already.

We’re going to go ahead and jump right into this one today and learn a little bit more about Panels Context and you can do a little reading on the Panels page about what a Panels Context is right here in this section and basically to sum it up, the Panels Context basically allows you to reference other types of content or objects that are within your Drupal website.

So let’s say for instance I wanted to include a specific piece of content … we’ll say specific information about another Node in this Panel page. I can use a context to reference that node, pull in the information and display it somewhere on this page.
You can see this one if you want we can take a look here and we’ll go ahead and … you can add an existing node right here through this and that’s what we did in this section here but one thing you’ll notice is you can only reference the entire node itself, you can’t reference any individual piece of information about this node. So if I wanted to pull in just the node title of that node or just the images that are displayed on that node there’s no way for me to do that.

I can select the build mode but I can actually reuse specific information from that specific node. So I’m actually going to remove this one and that way we’ll be able to start with just a plain empty section over here.

So I’ll remove that and I’ll save this, now you’ll see there’s a few errors here that are just C Tools warnings that we don’t need to necessarily worry about at this point so you can see there’s a blank section here. So let’s say for instance I wanted to pull in additional information from a node or user or anything else for this panel page. Just keep in mind this is just a custom panel page that we’re using as an example but you could of course do this with any type of panel page whether it’s a node view page or a custom page like this and there’s a section here for context and there’s a whole bunch of things you can select here and you could pull in for instance a specific comment and you’ll either have to enter in the title or the ID of this comment and that will go ahead and open up another section in here in your content section for comments and you could pull in specific information about that specific comment.

You can of course do the same with files, nodes, users and we’ll go ahead and just start with node, we’ll look at some of the other ones as well but we’ll start with the most basic one and there’s a node on this site. I think its Test Cloud Zoom, we’ll just go ahead and pull that in, you could of course type in any title in autocomplete by searching through all the nodes on your site and this is going to give us specific information about this node.
So I’ll go ahead and click Finish and I will click Update and Save. Now you can see there’s a node context that’s been added, you can edit it or delete it here. If I scroll down it gives me a summary or the context so I can use these replacement patterns inside anytime I have custom content inside my content section so I can pull out the node title, the node URL from this specific node but I can also look here and see that when I add content I now have a node section that was not here before.

So I can of course select the node title here and we’ll say we wanted to link to the node, I can also go ahead and say I want to show the node image and we’ll just use the image formatter, it’s going to look pretty big but we could of course change the image style to thumbnail, that should help. So now you can see that this node should have the title and the image showing up and the only reason that this is possible is because we set this context to reference this specific node so we’re able to actually pull in the fields from that node and use them wherever we want within this Panel page. So now if I refresh you can see I got the title here.

These will of course link off to that node, it also shows the thumbnail because that’s the image formatter that I selected for each of the images that were uploaded. So that’s one way you can use context to pull in different information. We can also go ahead and look at some of the other options so let’s say we wanted to have a Node Add form here, you add a context and say we want a node add form for an article, go ahead and select that, I’ll click Update and Save here.

Now when I come into Content I’m going to go ahead and remove this one just to kind of clean things up a little bit and I’m going to add a content here. Now if I select here; General Form and I select my context here which is Node Add form, that’s important. This wouldn’t of course be here if I didn’t have the Node Add Form Context, now I’ll click Update and Save, I come here and now you can see it of course overlaps, it could add some CSS to make sure this doesn’t break pass here or I could just get rid of this middle section but as you can see I can now submit an article right from this page. Add the image, it has all the vertical tabs, you can see it’s not necessarily lay down in the best fashion but because I added that context to that node add form I can now use this page to basically click Add an Article.

So I could for instance have the listing of articles over here on the right and a little quick submission or a node add form for the articles here and as I added the articles on the right would of course appear and they would be listed so I could use Views and Panels together to build some kind of interface for that. So that’s another way you can use Context.

It’s also possible to use based on the URL path that you’re actually sending in. You can use context that way as well. And the reason you may want to use the URL as an actual context is so you can make things a little bit more dynamic on your page. So in this example we’ll use the Node ID as an example of how to instead of just pulling in as you saw in this column here.

The actual title and image of this one specific node we can make this dynamic so if you go to panel-page/whatever this node ID is it pulls in this information, if you go to panel-page/a different node ID you’ll get different information over here. So in this case we can make our Panel page much more dynamic.

Keep in mind of course throughout this I’m just throwing things in this Panel page as examples so of course it’s not necessarily the way you would use it, it all depends on your situation but the point is it’s very flexible to handle a bunch of different situations. So the one thing we’re going to start up by doing is I’m going to come into basic here and change this panel-page to panel-page and then I’ll do %node.

If you use a % in front of it it means to require element, if you use an exclamation point in front of it which is documented right here it means it’s an optional element. So I wanted the Node ID to be required on this case and I’ll go ahead and Update and Save, as soon as you do that there’s another section that shows up here called arguments, now you can basically show what you want the context to be for this argument.
So we’ll go ahead and click change and in this case this is a Node ID. You could say if you want it to be an edit form for this Node ID, if you want it to be a node type instead of a node ID for the Add Form.

There’s a whole bunch of different options here but in this case were passing in a Node ID but just keep in mind there’s a whole bunch of different context that you can apply here. I can use Node ID as a context identifier, that’s fine, we’ll save that. Now when we come into our Panel you’ll notice there’s another context added down here; this is from the argument.

So you can manually add context, you can also add a context through an argument. Now when we come into our content section we come into our node title, change the settings here, we’re going to select out Node ID context that we got passed in from the argument instead of the hard coded context that we set up earlier. Now that we have that set I’ll save it and then actually I’ll go ahead and I’ll remove this original node context that’s just referencing this Test Cloud Zoom Node ID.

Since we want to make this dynamic we really don’t have to use for that one anymore so go ahead and remove that and save it. You’ll see the context down below now just show argument 1 and context 1 and if we come back to our Panel page you’ll see that now nothing is showing up but if I go to … we’ll just find a Node ID for another article, this one is 73 as you can see here. So if I go to panel-page/73 you’ll see that it shows the title and the image for that specific node. You can see these are just PHP notices from the C Tools module, obviously means that there’s some kind of notice, something happening, it’s not necessarily a huge deal.

In many cases you could hide PHP notices if it’s a live site and you’ll obviously want to hide errors like this from your users anyways but just keep that in mind that you may sometimes see this depending on your version of PHP and those types of things. So now you can see it is working dynamically so if I go back and if I find another article that’s not 73 just go down to this one, this one is 210 so I go to /panel-page/210, it’s going to pull in this title and this image.

So as you can see it is dynamic, we can do other things with this panel page such as in the selection rules we could add … you can see now though also once context are added and this is a good point to look at, you can have specific selection rules based on the node type. So if we wanted the node type to be limited to only articles and based on of course this Node ID that’s getting passed in then if the node type is an article it’s going to show display, if it’s something else we could have it show a different type of display.
We can also … in the URL path add one that only shows up on panel-page/*and if we don’t have that argument it’s not going to of course show this specific display. One other thing we’ll touch on briefly is Access; Access is very similar to selection rules but this just controls access to the page so if this doesn’t pass the user will basically get an access denied or will not be able to actually access this page.

So it’s very similar to selection rules, the same kind of options exist but if it doesn’t make a few of this check then it won’t even check which variance you should use. It passes the access check it will go down to the variance through each selection rule and find the first one that it matches and show the content but it has to first of course make it through this access check.

So that’s it for this time on the Daily Dose of Drupal, we’ll be back again next time and we’ll keep that next a little shorter and we’ll just go over a little bit more on context but what this relationship section is and how you can use that in … in our case we’ll use the entity reference module and go through that and how it can be used to build relationships between nodes but that’s it for now, until next time, thanks for watching the Daily Dose of Drupal, see you later.