Drupal 7 Panels Module Basics (part 1) - Daily Dose of Drupal episode 128

hello everyone and welcome to another daily dose of Drupal today we are on episode number 128 and we're going to be going over the panel's module today the panel's module is an extremely complex layout builder or Mait basically it's almost like a site or design management tool for your Drupal site and we're going to go over it and a couple different segments or a couple different episodes because it's not something I'm going to try to cover all in one episode and I'm going to start with just the basics a few simple episodes going over the basics and depending on how you respond I can either continue going into more depth on panels and some of the various options and configurations that you can create with the panel's module or I can move on to other things but before we get started with the panel's module as always I'm Shayne Thomas you can follow me on twitter at SM Thomas 3 also go to code crown EECOM and sign up for the newsletter if you haven't already today's episode is sponsored by module notes comm if you haven't checked out module notes comm yet you should do so right now it is basically a very simple idea behind the entire site but it provides module descriptions in a more readable format I guess you can say it's easier to understand the module descriptions on this site so they take complex module descriptions from Jupiler org and it's written by a designer for designers I am NOT a designer and they still help me understand complex modules in which you may be wondering what does this module actually do so go ahead and check out module notes com view some of the descriptions they have on modules and see how it can help you more easily understand what a module does before you install it let's go ahead and get started the first thing you need to think about when you're building or using panels is what exactly you're going to need to use panels for I've used panels on dozens and dozens of Drupal sites spanning glass few years and the main two reasons I've ever used panels is to either build a custom page with a specific complex layout or - this is the most common one change or configure a specific content type page so if you want your articles to show up in a specific format or you want you have another content type you know whether it's your pages or whether it's a more specific content type and you want to control how it is laid out and how it is displayed that's where the panel's module comes in the first thing I'm going to do and this may seem a little counterintuitive but I'm going to enable the page manager module it's a little it just makes it simpler you don't necessarily need it for the basic panels module to be installed it's not a dependency but it comes with C tools which is a requirement for panels I would just go ahead and turn it on it makes managing the pages on your site much easier I'm also going to turn on panels and I'm going to leave that just just turning on panels now like I said I may cover some of these other modules that come with it in a future episode but we'll just start with the basics in this episode I'm just going to go over how to build a custom page with panels in the next episode I will go over some or how to actually override the node view or a content type display page using the panel's module so now that I've enabled the panel's module you can see there's an option for panels here here you can create a new panel page or you can create a new custom layout you're going to notice when you first get into panels if you haven't looked at it before it's going to look very intimidating very confusing don't worry we'll just we'll walk through step by step what you can do and it overall you'll find out it's not really too bad you can also click on pages which this is kind of just a different view this is how you are going to be able to override node view pages and and even user profile pages using the panel's module so if I add a custom page or I can come into panels I can add a page here the same thing so I'm going go ahead and click Add to add a new page I'm going to give it a administrative title give it a path so this is the path that you're going to actually be able to access your page at you can click here to make the site your home page you can make this page display in an admin overlay this is if you're making an administrative panel page this would be helpful variant type most of time it's going to be panel I'm not even to go over the HTTP response HTTP response code most likely just leave it at panel you can add optional features such as access control so you can control who can see this page you can add a visible menu item which I'll go ahead and do you can add selection rules and context and we're not going to cover those today but just know that they're there you can take a look at them and try to figure them out on your own or hopefully it'll be a future video that will walk through those so I'm going to create a normal menu entry let's call it panel page and put in the main menu and now we get to select how we want this panel page to be laid out I'm going to go ahead and select a two column layout with this two column stacked and in future episode will cover the flexible layout because that's really where in all honesty probably 7080 percent of the time I use a flexible layout just because then it allows you to really control how you want your page to be laid out but I'm going to go ahead and use two column stacked this time to keep it simple we'll come back to what this option does to disable blocks and regions but first we can remove specific body CSS classes add body CSS classes give it a CSS ID for the entire page we can even drop in some custom CSS code here I would usually put your CSS code almost always in your theme don't you generally don't want to use this box but it's here if you need it just now once we click continue now you can set the title so I'm going to set this title as my panel page now you can see I have these four different regions the top bottom left and right side now now is where it really becomes the easy part we just start adding things to this various sections so I simply click here click on add content and panels comes with a whole bunch of default items that you can add in here so I'm just kind of flipping through some of these so let's say for instance I want to add the powered by Drupal block I can go ahead and click that you can give it a title or a block title you can see it's now drops into this top section I can drag this into other areas go ahead and click finish here once I click finish you can see I get some more options now it's easier to drag so I can drag this into other areas I'm going to go ahead and drop this on the bottom and click update and save basically any block anything that you can normally add or configure in the block settings is going to show up on this page generally under the I believe custom blocks or miscellaneous depending on what it is also you can display views blocks in here there's a views content panes module that also allows you to display views so you can really get complex layouts so we're going to go ahead and add an advanced search form as well I'm just kind of randomly picking some items here just to have just a couple different options some reason doesn't want to stick there we go and I will go ahead and add this time I'm going to add a new custom piece of content as you can see you can add whatever content you want this is very similar just creating your own custom block you can change the text format of course and that will drop in there so we can click update and save and then I'll find something here to add in the top you can add an existing node and then I'll drop in a complete full node so if I want to find the node that I want I can grab one I can include node links and lick that link the title to the actual node page you can have it display the teaser or the full content and I will go ahead and leave this dropped into the top so it's going to actually display this node page on top there will be a search form in the left sidebar below that and then my custom content in the right sidebar and of course the powered by Drupal will be in the bottom section of this panel page you'll notice that on the side here you have a lot more options to look through we're going to browse through these really quickly basic is the basic information you filled out when you created the page access is to allow access to specific users for instance you can base it on user role or permission you can base it on specific URL paths you can use PHP code a whole bunch of different basically access rules to determine if a user can see this page the menu item is where we created this menu item and panels has something called variance and we're going to go over variance in a future episode we won't worry about that too much but know that they're there and you can see there's a couple different options here selection rules is basically so you can select which variant to display so if you have multiple variants like I said we'll cover them more detail later and contacts is a whole nother well quite a little bit bigger topic to discuss so we're going to keep our simple layout and kind of go over the basics of what you can do with panels so now that I've created this let me make sure I know it's panel - page I should have a often I do I have a menu link of course that I created I click on panel page you see it gives me my title and now it has this node so it's it's the node that I selected and loaded it's only showing the teaser format of course I can click this it'll bring me to the full node page on the left side over here I have the advanced search box on the right side this is my custom content that I created and of course on the bottom I have this powered by Drupal one thing to note is you can easily hover over here and click Edit panel that will bring you back to the panel editing page another thing you can do is panels comes with a couple styles you can select so I'm going to go ahead and change the style and I'm going to will go through these options you can have no markup at all you can have a list style markup no style or rounded corners I'll go ahead and select rounded corners for this I will say I want rounded corners around each region and I'll show you the difference here what that does I'll move this there's a small error there but if I have I'll come down and show you that here's the rounded corners here if I come in and I move this over here and save it you'll notice that there's only rounded corners around the entire region itself however if I want to change this to basically make rounded corners around each pane instead of each region now it's going to make rounded corners around each item inside this left-side region so go ahead and save that and now you can see there's rounded corners around each item so there's a basically a different way so you can style and customize the way this looks keep in mind this is of course not a pretty looking page yet I haven't really put a lot of thought into it but this is really good for displaying or customizing home pages or landing pages anything with complex layouts where you may need a form or a block over on one side and you may need to display part of a node on one side it's really great for displaying multiple views so if you have different views you need to display on one page one thing to keep in mind is it's easy to to go overboard with panels and to try to put too much into one page if you're trying to load four or five or six different views on one page just keep in mind all of the information that's going to be loaded from the database when you're loading that page and there are things you can do with views and with panels to add caching and things like that but just keep in mind the more you add the bigger performance hit is going to it's going to take on your site that's the intro to panels as you can see you can use it to build very complex pages and easily drag and drop and move around different items on your page tomorrow we'll cover some more on panels and we'll go over how to use panels to override a node page or a node view page we also will discuss some more panels items and maybe go over how to also override a user profile page or the user view page in Drupal that's it for today thanks again to module notes comm for sponsoring today's episode of the daily dose of Drupal and thank you for watching we'll see you next time

Channel: Code Karate

Views: 75,427

Rating: 4.8540144 out of 5

Keywords: Daily Dose of Drupal, DDoD, Drupal, Panels, Episode

Id: MTemg8fE9Dw

Length: 15min 42sec (942 seconds)

Published: Wed Mar 13 2013