Drupal 7 Panelizer Module

By shane
Wed, 2014-07-30 07:57
3 comments
Series: 
Daily Dose of Drupal Episode #160

Share with Others

The Drupal 7 Panelizer Module allows you to panelize (or use panels) for any entity type on your Drupal 7 site. This allows you to change the layout of a node page, user page, or any other type of entity that you can think of. Although it's a little more complicated to set up, the Panelizer module allows you to set up a slimmed down panels interface for other site managers to use. This way you can allow a site manager to change the layout of specific node pages or even choose from a list of predefined node layouts that you set up.

This module is definitely worth learning about. In this episode you will learn:

  • What the Panlizer module is
  • How to set up the Panelizer module to work with a node content type
  • How to build multiple panelizer layouts that can be selected from when creating content
  • How to override and change the layout for specific pieces of content

Hello everyone and welcome to another Daily Dose of Drupal. I am Shane Thomas, and today we’re on Episode Number 160. We’re going to be going over the Panelizer Module today, and this is the module that I have just recently started to play around with and it’s a very powerful and it allows you to do a lot of cool things.

So we’re going to go over that and how you can use it to panelize your Drupal websites. As always, I’m Shane Thomas, you can follow me on Twitter at smthomas3, also make sure to head over to codekarate.com and sign up for the newsletter or look at the 5 Secrets to Becoming a Drupal 7 Ninja ebook.

Let’s go ahead and look at the Panelizer Module and see what it can do. It’s very…in some ways it’s overlapping on what the Panels Module allows you do out of the box. However, it does allow you to do a lot of other very cool and more advance things on top of what you get with a traditional Panels Module.

So a few things you need to know, you need a new version of panels, you need C Tools and Page Manager, included with C Tools enabled and when you’re installing, there’s a few things you need to be weary of. So as you can see we have our Dev site here.

I already have the Panelizer Module installed, just check that box. But you’ll also need to make sure you have Panels installed and the Page Manager Module that comes with C Tools installed. And you want to make sure you come into structure pages and ensure that Node view is enabled. So if it’s not, you’ll need to make sure you’ll enable it so it shows up in black instead of grey here. And then you should be all set and ready to start using the Panelizer Module.

So you can get to the Panelizer configuration page of course from the module’s page if you want. Just by clicking here or you can go to configuration content offering Panelizer. So once we’re in the administration page for Panelizer, you can see there’s a few different options for you to look through here. So all broken up different entity types, so you have taxonomy, node, user.

I believe you can use this with pretty much any type of entity. So we’re going to go ahead and look at node just to keep it simple and we’re going to go ahead and panelize the article content type. So by default I think when you panelize it, originally nothing else is checked.
So you go ahead and save that after you panelize it. Now you can see there’s a link here to start doing some configuration. So if you click that it allows you to specify what type of content you want allowed inside your Panelizer.

So when you are actually trying to configure how a specific node looks. In this case we’re going to configure how an article looks. So the actual view or the actual node view of the article you can specify what should be allowed and I’ll go ahead and we’ll skip this for now and we’ll come back to it. Because it’ll make a little more sense once you see everything in action. So we’re going to select Full Page Override if you want to be able to override the entire page and we are going to go ahead and check both these and I’ll explain what they do.

This provide default panel, this essentially allows you to do the same thing as just creating a specific node view template using the Page Manager. You can typically come in here, you can add a new variant for your article content type and you could design out that page.
If you’re familiar with panels you’ll know how that works. Panelizer allows you to do something very similar and that when you click Provide default Panel, it allows you to then configure how the article supposed to look. So we’ll actually just take a look at that so you can see that it’s very similar what Panels allows you to do out of the box.

Now you can see if I click Settings, this looks pretty similar to what you’ve seen with Panels before, you can specify a CSS class and ID, add some CSS code right there if you want, you can even disable blocks and regions. It allows context just like Panel. So you can add different relationships or link different entity types or content types.

You can specify the layout, we’re going to go ahead and use a two column layout and we’ll let that convert over to the two column layout. And then when you get the content it’s just like you’ve seen panels before. You can move the image around to the right side for instance, you can see we have the body, tags and links as well.

So now if we save that and we go to one of the article, the actual article content types, you’ll see that we have the image on the right and the body and the links and tags on the left. And that applied to all of our articles. So you can see that’s very similar to what you’ve done with Panels before.

If you look at my other Panels videos or if you’ve just been using Panels for a while. So nothing too revolutionary yet. However there’s even more that you can do. This is where it gets really really powerful. So the next we can do is we can say we want to allow the Panel Choice. So we’re going to save that and now we can click this list link and you can see there’s the default one. And this default one is the one we just configured.

So if we come in here and we go to content, you’ll see that the image on the right side like we moved it previously. But we can go ahead and add our own. So let’s say we wanted to add a version where the image is on the left side. So I’m going to go ahead and type in Left Side Image and now I have the default where the image is on the right side. We also have the left side image.

So if I want to go ahead and specify the layout, we’ll go ahead and use a two column layout again. Click Save and we will keep the image on the left but move everything else on the right. So now that we have that we can go ahead and close out. You notice if we come in here the image is still on the right. If we click Edit, there is an option down here for Panelizer.

You can then specify that you want to use the left side image and then you’ll see the image moves to the left. However is we go to one of our other articles, the image can still be on the right. So what this allows you to do is that it really allows you to define different layouts for your content authors of your site.

So if you have someone who’s building out a bunch of the articles on your site and you want to give them a couple different options to choose from, you can easily set these up in the Panelizer Module and then when they’re building their content out they can select how they want their content to display. And everything will just happen magically for them.

Let’s also say, so as you can see we have Test Article 2 where the image is on the right. And we have Test Article 1 where the image is on the right. Let’s say for some reason you wanted to just change this specific one, if you click on Panel…Panelizer, you can come into here and you’ll see it’s using Test Article 1 and it’s using the View Mode. Status is at default. If you go ahead and click content, let’s say we want to add in something else. So we want to add in new custom content so we’ll just say…I’ll just say this should now be overwritten just so you can see and we’ll add it in right above the image.

Now if we close out of here, notice in the Breadcrumb it’s Home Test Article 1 Panelizer Full Page Override. We’re only doing this for Test Article 1. So once we close out here you’ll see that I got this text here that we just added in. It’s only on Test Article 1 because if I come back to Test Article 2, that is not showing up. If I click in Panelizer you’ll see this still shows as default on Test Article 2 and any other Article on the site because I didn’t actually change it for any article but Test Article 1.

So if I come back into Panelizer you’ll see not it says status is custom. I can of course reset this and then I’ll go back to the default where this…as you can see through the grey here this should now be overwritten and it’s going to go away. Now it’s back to default, if I close out of this, let’s see if it’s not gone away and we have just our basic Article with the image on the right side. So all in all that’s very powerful on its own and there’s even more you can do.

So if we go back into the configuration for Panelizer, you can even specify what allowed content should be allowed when you are adding your different Panes inside your Panel. So what these things here allowed you to do is it allows you to set what should be allowed when you’re creating or adding things to your different Panelized Panels, I guess you can say.

So for instance we allowed Custom Content, if you uncheck that, so you can see it should be unchecked right there. Now if we come in here, there’s no way to add custom content down here.

There’s normally a link, we’ll be flowing to get that back, we can come back into our Panelizer and we want to reallow that, and now if we come back in here I want to add, you see there’s now a new custom content available. And this allows you to provide a slim down interface if you have certain individuals on your site that you want to be able to configure these different panels without giving them all of the options.

As you can see when you come in here there’s a lot of options to choose from. Using all those checkboxes you can hide a lot of the options so the user only sees what you want them to see. So this allows you a really flexible way to build out different interfaces and different pages on your site and provide a lot of flexibility for someone who might be doing the content authoring or the content creation on your site.

This is only a little bit of what the Panelizer Module can do. I could spend probably an hour or two talking about all the different features how you can use it and how the flexible things you can do with this module. So go ahead and check it out. This should give you the basic review of what you can do with it. Make sure to follow me on Twitter at smthomas3 and check out my new ebook. Thanks for watching.

Comments

Just wanted to drop a a quick thank you. I am currently wrapping my head around Panelizer and your video is a very decent entry point.

I am wondering what features of Display Suite I would be missing if I go the Panelizer route...

Thanks for the comment. I am not an expert on Display Suite (though I am planning on doing an introduction video on it at some point). I know that Display Suite allows you to easily change the layout of an entity. I also know that Panels (not Panelizer) and Display Suite are often compared as two different alternatives to solve some of the same problems. Panels is typically seen as the more heavy handed, more complicated, but also more full featured approach. While Display Suite is a more lightweight alternative. I can't name any specific features you might be missing from Display Suite if you go this route though.

Hopefully someone else with additional Display Suite knowledge can chime in and provide some additional insight.

Post new comment