Drupal 7 Views Module Tutorial 3 of 10: Menus, Permissions, Headers/Footers and Pagers

hello and welcome to the third graders Durham this 10-part video tutorial series on the views module and Drupal 7 I am Peter skied each one almost a developer specializing in true poll and this register oh we're going to continue right off from our previous video tutorial with a bit of a kink I actually realized I screwed up and deleted the original view that we created of dog images and I didn't save the view that we created in the second video tutorial where we used filters to just show Bailey or Suzy photos so what we're going to actually do is create a new view and I'm going to show you how to create something like this so we have our first tab which is dog images and then you'll see these sub tabs where we can filter only to see Bailey and then filter only to see Suzy and we'll accomplish that by looking at the menu tabs in views but then we're also going to continue on and take a look at permissions headers footers and pagers so that said let's dive right into it I actually have to close this window because this view no longer exists so what we'll do is we'll go to views out of you and you shall be familiar with this now so I'm just going to do this quickly so we'll call this dog images which local content of type dog pictures show the newest first going to create a page called dog images going to be dog images it's going to be a grid style of fields because we want to be able to manipulate specifically what's there we're going to show 10 we're going to use a pager and I'll walk you through creating a mini link rather than doing here so we'll continue and edit now one thing I didn't well I'll show you in a sec but let's go ahead we'll add our fields so you should remember this from previous we're going to go ahead and we're going to look for the dog name and the image we add those to the display we don't want to create a label because what we're going to do is show this in grid form again we don't want to label but we want to make sure that we have thumbnails and this is linked to our content now I'm not sure that I showed you last time but the US has created these as titled dog image and so when we look at our preview down below it's a little bit of it we've got soon as you name on top Bailey's name on top it'd be nicer to have the dog the picture name the image and then the dog name so beside add there was a little arrow so we click that we want to rearrange and I started for moving quickly but I'm going to drag this up so now I got title image dog I can go ahead and I can apply and you'll see that now we've rearranged how those actually appear and that was actually right here and just beside the ad go to rearrange the other thing that's nice about rearrange is you can quickly remove fields here if you're removing a bunch of them so a little bit of a time-saver there is a way to override so I'll show you when we add some new pages we're going to kind of get into things that I didn't anticipate just because the nature of this video so that's it we've got a view recreated we've got a nice look here and we've got one specific page but when we go to actually sort we actually go back to our home page and the reason why this is showing up is probably because it's cached so if we flush them in your caches we see that it's gone right so sorry about that it's a long story but menus in Drupal are all cached so when I created her or when I was working on this video tutorial and created something it saved them in you tap it and flush the cache so it's still there so that's a good sidebar if you're ever deleting a view and you have menus associated with it flush the cache otherwise you're in our problems so we have dog images or dog image and we can actually can't get to that length because there's no menu tab there's no way for users to know that that actually exists and sorry I'm just doing some minor maintenance here so what we've got to do is we're going to create a tap and then we do that within the view itself by clicking on this main menu and what we're going to add is a normal menu tab now I'll explain what this isn't a quick second so we'll just say yeah this is all dog images actually we won't say all turn out all the dog juice on the site and this will go in the main menu now that's because this default theme that we're using Bartek the main menu is what we we saw there with the Home tab so go ahead multiply now I'll go save and when we head back and we reload our homepage you'll see that we've got home dog images now sometimes dog images this menu tab will show up where we don't want it to so we can actually go into structure menus and we know that we're using main menu so we'll click on main menu and we could rearrange this here if we want to Doug images to be first or second or whatnot we can also disable it you know if you're doing something and we can check out what kind of settings we have in here so we'll see we've got the description we've got the path and then a few other things that we can we can play with with enough that pertinent what we're doing so going back this is great we've got dog images now however we know we have two different dogs on the site you've got Susan we've got Bailey so it'd be nice to create another link for the list but we don't want to show up here on the main because I get a little bit bernis a little bit ugly so it's a good way to look at the other menu tabs that we have available here so when we click in the menu again you'll see if you had menu tab we have default menu tab so rather than try to explain this because it's a little bit confusing I'm going to walk you through it but there's also a great tool API that drupal.org if you ever check that side out and use it extensively I think I've mentioned multiple video tutorials but you can go if it a triple that org in the search type in hook menu what that actually is is Drupal is rather than if you want to make changes to Drupal Live uses making changes to Drupal rather than hack up Drupal you call these different hooks and Drupal fire these folks when it does different things so one loan is a page it will call a hook and so hook menu is created when we're creating a menu table to register different paths on the site so if you scroll down on hook menu you get a description of what these normal menu tabs are what these local tasks are with these default local tasks are so you can take a read through that for a little bit further information but essentially for our purposes this normal menu tab is essentially what we created so this kind of menu tab that goes right at the top level of your menu you know so for main menu here we've got it there as images this menu tab is going to be a subset of that so rather than show up here beside it will come down into another area on the page and there will be menu tabs there and that's nice because we don't clutter up our main menu navigation but we also provide users the ability to differentiate between the content that they're looking at so what we're going to do to take full advantage of that is we're going to add another page I haven't actually shown you this functionality yet but essentially when you create a view you create this kind of data based query and then you can create different pages blocks or different ways to show that content so the first one that we had was our page so our second one we're gonna also create a page and when a credit page we see that we now have two pages so it's good to give this a name so that we don't confuse ourselves so this is actually page Suzy pictures is what it's going to be I'm going to go ahead and we can apply and so we should be the same for here so rather than page which is a page Paul images and hit apply and now we see these asterisks astro seeds coming up beside the pages because that indicates to us that we have changes that haven't been saved yet so we change this display name we haven't hit save yet so there's things that we've got to do and you'll see the brief description there from reviews module itself so going to page two we know that we want to have this as a submenu so the way that we do that is we provide a path to this and that path has to shame share sorry and it just has to share the first piece of the URL as our original tab right so we've got dog images so any child of that the child is the terminology that's used has to have dog images slash something so all this soozee images and we'll hit apply right so now we've got that path but we still don't have a tab yet so what we do is we go into menu and we're going to choose a menu tab and so this title is going to be Suzy images check only or check out the images of Suzy right and so the menu is going to be our main menu just like what's previously and we'll hit apply ok so that's that one but just before we save that we know we only want this to be Suzy images so we're going to accomplish that by adding another filter so we'll go add to a filter and this is a new concept I matured I showed you this yet but up here it says for all displays that's not what we want we want this for this page specifically right we're only adding a filter to this page for Suzy images we don't want the filter to apply to all dog images so what this is going to do is it's going to override the filters that are used out of the default so when we can go down here we'll choose content will apply and this should be familiar with you because we walk through the different filters in the previous video tutorial we're going to choose a drop-down and we'll choose Suzy so is one of Suzy it apply now we see that we've got the copy filter for Suzy on page Suzy pictures and then on all dog images we don't have that so that's exactly what we want we'll go ahead and we'll save that now barring any difficulties if we reload our page here of course so let's walk through our second one to make sure that's not that there's two needed before we go ahead and try to fix that so let's add another page here we're going to this for Bailey pictures and again we want to update this so this will be page Bailey pictures go ahead apply add another filter just like before this page and it's going to be giving miss it the real dog you need a drop down is one out of Bailey apply okay remember we've got to choose a path here so let's ask your dog images plus daily images will apply let's just make sure we vent that document is yep right there menu so it's going to be a menu tab of Bailey images and all photos of Bailey a menu apply we're going to save this just check out to make sure dog you made it is yep we're good so we will reload this home page and there we go we've got our tabs so the reason why I didn't do the tabs before is because you have to have more than one apparently so on dog images we've got all of our dog images we can click on Bailey images and then we've got just Bailey as a view but we also update the breadcrumb and so that's an interesting thing about the menu tabs when you're doing what are called local menu tabs the breadcrumb feeds into that right so if I click on Suzy images it's just Suzy and I can go up in the breadcrumb just back to dog images so that's exactly what these different tabs are the default menu tab what that refers to is the first menu tab so we created a normal menu entry the default menu tab is a little bit different so that's you can use that as well so we'll go ahead and we'll cancel that so we don't have any changes so that's the menu entry system um you know if you're not doing these sub menus it would have been entirely possible go to menus main menu add a link and then add a link to dog images from there you don't have to do it from within the view and there are pluses and minuses to doing that obviously you know if we created if we delete the view you have to clear your caches for the menu there if you delete the link from the menus table itself it will update the caches itself so pluses and minuses I tend to do it from within the view just because it's nice to have everything together I my recommendation would be to do that but entirely self preference the other thing that's kind of nice if you're not you know if you're still not getting it this post by man spams great kind of instructions on how to get to this and so that's right there for you and then remember hook menu so those are the menu settings I'm just taking a look at the permissions so if we wanted to restrict this let's say only our site users you should be able to see the dog images we can go ahead and we can do that so we'll change this so right now it's at access permission view publish content so that's kind of a broad-ranging permission and if you checked out your permissions table here you see all the different permissions that you have available one of which is access content so it's you know whether or not users can see your site so this is based on a permission you can also do it on a roll or not have any so the role let's go ahead and apply that and then we'll say this is only available to authenticated users we apply that but you notice and I went over quickly I apologize this was just for this page right so if we want to do to all displays the entire view we want to go ahead and go all displays except overwritten or we can revert to default so all displays when we click on page we see now that Suzy's got authenticated user and if we look at Bailey authenticated user right so we could say that that's a way that we can hide our specific views and provide a you know a paper prescription cite a lot of users to get some paid content the other thing that you could do theoretically if you wanted to it's a little bit more advanced I'm not going to show you how to do it but you could create a module that creates its own permission and so that could be you know let's say that these are I don't know top-secret products or that kind of thing right create a permission with with hook permission and then you know that could be specific to whatever you want it to be and then you can do here is look for that specific permission check it off and then only certain users that have that permission would be able to do that right and you could provide that permission that access in your actual permissions table so once you create it it shows up your permission to say well click it off for a certain role and then you're good to go so permissions are kind of straightforward kind of easy hopefully you have too many questions about that the header and footer are kind of treated the same way in views so we won't look at them individually we'll just take a look at the header and just know that anything you do the header you can also do the footer so cool thing in the newest version reviews is this ability to embed a view within this area so why don't we take a look at first and we'll go ahead and we'll hit apply and so let's say we had a view let's say this was a product listing page so we wanted to show all of our products on the front page but then we had another view that actually showed all of the highlighted or featured products what we could do is on that view all products page insert this other view to show those highlighted products as the header and that's what this enables us to do this previously you can do out of the box you have enable things get it right some PHP kind of got a bit ugly it's now in there so that's what I wanted to draw your attention to it because you see a lot of questions about how do i embed a view within a view and you couldn't do it in views too so if you want to do that the pretty straightforward create a label for and then you've got it in the header I'm not going to show you how to do that just because I don't have too many views to use and I also want to keep this short so that was the view area we can also do a nice summary of results and honestly check off the the text areas we can take a look at that as well so the summary for results um you know thanks for checking out actually that's stupid because it's only the show room is really so whatever don't worry about that but to display so what this will do is this displays the text displaying and then a token at start and so at start is actually the initial record number in the set and then end again another token and of another token right and so we've got a couple other tokens that we could use so let's go ahead and we'll apply this to see where to look at and then remember we enabled also just to show global text area so if we wanted to show some kind of text uh so you know thanks for checking out our site these are right and then down here you've got the option for filtered full and plain text if you enabled the PHP code module that comes with a Drupal core you'd have PHP here the ability to write some PHP so if you're familiar with that you might wanted to try that out it's pretty neat because you can do a quick database query to customize your page so you know could say run a database query pull a username for this sort of user logged in and then use that and display it as you know hi John Smith thanks for visiting this site check out these products which we specifically chose for you right and then a little bit more personalized so you've been able to do that with PHP code would be on the perspective of this video tutorial and you need to enable the PHP code module that comes with Drupal core so we're going to apply the two changes that we've done now when we scroll down here so remember we chose displaying one of five right one two five of five pretty neat little functionality there tells users how many total records you have and then we've got our header text for the global thanks for checking out the site these are my dogs right obviously some grammar problems oh so that's the header same thing for the footer exact same functionality so no point in checking that out you can play with it yourself and lastly the pager so what we've done I'll change this to give you an idea so it's using a full pager so let's go with four images per page right just so quickly you can get an idea of what's going on here and so now because we've chosen four we know we have five images I've got a pager down here first set of results so one two four of total five images right and so if I go to page two I've got the other one and again this updates to 505 right and the full pager provides me with the ability to go back to the first page and the previous page so this would be effective if I had say five different pages I go previous or all the way back to the beginning so that's what that is so let's take a look and change from full to and output with the mini pager right so we'll go ahead and hit apply hit apply right so mini pager again one of two just the arrows to go to the next page you don't have the first or last so that's the difference there there were a couple other settings that we didn't take a look at when we move so okay I'll show you these quickly so to find a specific number of items so again if you just want to show the most recent five images you could do that here by hitting apply when you do so it will ask you how many items per page and offset so how many do you want to skip so you know if I want to show I don't want to show the first one because I know I'm going to show the first one in a big highlighted block and then I'm going to have all my new ones below that I would offset it by one and the my other view would show that the most recent big highlight a block so that's why you would use the offset and then you've got display all right pretty basic and you've got the full pager and when you click on the full pager again you can do an offset so if you don't wanna show the first couple or whatever those will be skipped and I wouldn't worry about the pager ID and the total number of pages if you just wanted to you know let's say you have 10,000 products you only wanna show first a thousand you can do a number of pages there and then you have some ability to allow the users to to manipulate this if you want to expose it right so this is all kind of self-explanatory users can choose how many products they want to see right they can choose an all option and expose an offset if they don't we'll show you the first five or whatever so that's the pager last thing I wanted to show you I mentioned it obviously more link you can include that I mentioned it in the previous video tutorial that we could exclude different information so let's go ahead and we'll do that I'll show you where might be a good idea to use it so author ID remember we know the author number so let's go ahead and wants clue that from the display we'll hit apply this might be a bad example but regardless if I go to the the text area right I can go and I can use replacement tokens from the first row right and so replacement patterns I now have the ability to pull in that UI UID right but what this is just from the first row of results so what that means is if your author IDs are different for every single person um you won't you'll just get the first one right so from the first result so I know that I've uploaded all my images myself so it's not a problem to pull them that UID because I'm the only one that's doing this but let's say you wanted to say you know this thanks for visiting this site was last updated you could hide the date as a field and then pull that in here and then show it so that users like oh wow you know you updated yesterday it looks pretty good we know our sites up-to-date so that's where you might want exclude something and pull it in later I referenced it before but never really showed you a good example how to do that there is one so that's it for this video tutorial just to recap you know we walk through the the page settings and so we created our original menu tab so when you here at the home page you've got dog images then we created the sub set rate and those are just tabs themselves which allow you to subset your images and then also it hooks into the breadcrumb so from there we want to check out the permissions then we looked at the header and the pagers all pretty straightforward hopefully I showed you something you didn't know um other video tutorials should be coming up quickly so I'm going to try to get five and six done right away leave a comment let me know these are helping and always appreciate the +1 likes they definitely help out so again thanks for watching and we'll see in the next video server

Channel: Web Development Tutorials

Views: 37,287

Rating: 4.9636364 out of 5

Keywords: drupal, Drupal Views Module, Views Module Tutorial, Software, CMS

Id: UKirdHvIn0o

Length: 25min 26sec (1526 seconds)

Published: Sat Dec 08 2012