Drupal 7 Views Module Tutorial 2 of 10: Creating and Customizing Views

[Music] [Applause] [Music] hello and welcome to second videos around this 10 part video tutorials on the Drupal 7 views module IMPD or CD charm website developer specializing in drupal and in this figure tutorial we're going to continue off with our last video tutorial where we went ahead and created a view based on teasers for our dog images and what we did there was we pulled in the teaser format for a specific content type which had the image and the in the brief description that we had set up and this was all controlled when going to content types dog pictures manage display because we were doing teasers we're actually doing this few tutorials create a brand new view from scratch and I'm going to show you how to customize that from the actual views uy so what we'll do is go ahead and go up add new view and we're going to call this is a Bailey pictures so if you're probably a Drupal you know that we can tag our pictures so we were tagged all of our Bailey pictures of Bailey Neal you'll also know that we could go ahead and do this with taxonomy and there were to be a view book we're going to pretend like that doesn't exist and go ahead and do it ourselves so we're going to show content remember we talked about this before so this is our base table which will be knows because we're going to be pulling notes more often than not you'll be working with nodes and some of the advanced tutorials we'll take a look at the other tables but for now we'll just stick with content of type again we're going to choose dog pictures and we'll go with newest first and we're going to cut page and that page titles going to be Bailey pictures and we'll do this as dog dog images slash baby pictures and I'll show you we'll leave this as all basic and I'll show you how to modify that in the actual setup but we're creating a page so let's go continue and edit so once we do continue in edit we get to the actual UI for our view and more often than not when you're doing a specific view for your page or for your site rather you're going to be working with in this UI and so for this video we're going to actually walk through what these settings are and we'll take a look specifically at title the format's the content versus fields actually adding fields look at our source and look at our filters whereas in the next videos Jorah will look at really customizing the view with permissions headers footers pagers and whatnot so first and foremost you'll notice that we went ahead and created a page so we have this displays here and we have page and we can also add other views so we could add blocks we could have another page we'll be doing those in subsequent video tutorials we're just drawing your attention to that right now so in terms of our page details we have the display name page we're going to call this we're going to modify this we're gonna make this page daily images and the reason why we're going to do that we could add a description but the reason we're going to do that is because if we're adding to this view we want to know what this specifically is when we're looking at this right so we look up here this change from page to Bailey images and that way when we have multiple views we'll have an idea of what we're actually looking at so next thing we're gonna take a look at is the unformatted list when we created a review we left it as unformatted and you'll see we have a few options here so right off the bat views will come with a bunch of options out-of-the-box slideshow shouldn't actually be here this is a separate module so ignore that one but you know we get the forum topic list which i think is created by the advanced forum module so again ignore that one apologize but we have grid HTML list a table unformatted I think jump menu is also created there so we'll go ahead and we'll create a table in the previous video tutorial we created a grid so when you go to twe Dogg images you'll see that we have four images or rather four nodes across there that's created by the grid itself so we'll do a table to get an idea what that looks like we can apply and each time you actually apply a different format you'll get a set up for that format so you'll see here we're getting our layout in terms of our columns and whatnot we'll come back to this subsequent video tutorial but essentially the more you add the more that will be here right in terms of fields so right now we only have the one field and that's why we're only seeing this but we can also we do some pretty cool things with that and then you also have the ability to Admiral classes override normal click sorting that kind of thing we can group on different fields and whatnot so we'll just apply this right now we're going to change anything so you'll notice actually after we choose table we've lost our selection that we had which was to display teasers so I'll actually show you what I'm talking about here just so you're aware so if we go back to unformatted list and we apply this and we just apply for our settings you'll see here that we're showing content teasers right that's what we did here we showed content teasers but if we go to the table it actually flips it over to the fields so it doesn't pull in the nodes themselves we have greater control we can choose what pieces of information are included so right now the content title is being included so that's perfect for us let's walk through and I'll show you how you add fields and actually you know use some of the power views so let's go to add we're going to add some of our filters here and so we can look at the content you know the content revision content statistics what these are the different types of information that's related to our nodes these actually usually will respond to or correspond to different tables in our in our database but the content itself we can scroll through and we can see different things like the comment status the comic count the body who the author was all the taxonomy terms associated with this so let's walk through an add a few so right now we know we have the title but we don't have the image so we'll add that we also need content for dogs so which dog is it and I think what we'll do is we will include will include the body so that's the description and we'll also clued a let's say the author you IP right so something we didn't have previously you get an idea of kind of what we can do here so go ahead we'll add these fields and each time you add a field you'll have the ability to configure that field so I'll walk you through this we're going to create a label and so what this is is it'll essentially when we have a table it will be the title for that column in the table so here this is referring to the author UID so actually you're going to you know put this in an author write and the colon after this won't apply to a table but you know if you were doing in lines and in line I mean you know you have the author beside the actual value the label beside the value you can add a colon so I'll just go ahead and remove that um we're going to actually include this in this play you can load stuff and exclude it from the display and you've seen the advanced some of the advanced videos why we would do that but if you're doing dates and that kind of thing you want to format those especially you can do that so you could load a month but then exclude it um interesting things to do there but here because we're doing actual author we have the option to link this feel to the user so you can click on this author and then go see the user profile so we'll go ahead and we'll do that now with most but not all of the fields will have this thing style settings and so what this actually allows us to do is theme the field so we can add some custom CSS to this so make it look good certain give it a look and feel and we'll be covering this off in future videos but here's the ability to do that and so let's say we wanted to customize the label again create a CSS class we could use some existing ones here headers that kind of thing but again another video tutorial the no results behavior so obviously you know we're always going to have an author but if we didn't we could include some text there to say you know well maybe this is a comments field most recent comments or something like that we can say you know comments but when I can be doing that obviously and then you have the options surrounding that so hide if empty so again we don't have a body let's just remove the entire field that kind of thing in terms of the rewriting results so one of things that talked about before was you know if we hid a value we could then rewrite the results of another field that pull in that valley right so if we were doing a date we could do some cool things and that's the option here so if we click that we automatically get a box where we can rewrite things and you'll see we have replacement tires so we can actually pull in the different fields that are already loaded again kind of powerful but you know scope of this video tutorial just being a bit again ders look at view for videos tutorial too we can also obviously hope that this is a link trim it to a maximum value so this is good we're doing body I'll show you that a strip some HTML tags from the white space and convert new lines right and then lastly we have the more which again just an administrative title for this so if we're not going to be using that but there's the options we can go ahead and it says applied to all displays what this means is if we had a bunch of different pages or different I guess view types within our view we could apply this to all but we only have the one so so that's fine so to apply to our default which we don't really see as well as our page so we go ahead and apply that and again same thing here we have the body so we'll actually refer this to refer to this as the description right and so it's going to be the default for matter what I receive you could use plain text we can do trim summary right so we have some options there play with right over the box but again styling settings or I can play with anything no results all this is pretty much the same because it's all related to a certain handler that views has so we'll go ahead and we'll hit apply and then we have a label will create that label again it's a link so it's going to link to a field right I'll link to another page which are all related to Bailey but we're actually creating that page so so we'll leave that we can go ahead and hit apply because we've seen the other settings and then last thing we have the image so image is going to be a little bit different because it's actually going to be formatting an image so you'll see we'll have different options here so formatter is going to be image the image style that we're going to choose these image Styles correspond to the styles that are on our site I'll show you the live a second but we'll use the the thumbnail and we're going to link the image to the actual content right so then so we have these options with style settings which are all the same we've got the no results which again no different and the rewrite which again no different in terms of more we do have a little bit of a different difference because we can do the click sorting based on a number of different attributes click sorting this is going to refer to our table so we can sort the table by the different images and we can do that on the you know the alternative description the title of the image that we gave when you created it the width and the height so we'll just leave it as F ID so F ID is the actual ID of the file so we'll go ahead and we'll head of 5 and now what happens is we actually get views will provide us with a preview of what our view will look like if we were to save this so title will be Bailey's picture and you'll see here we have a title which obviously doesn't have a label so we have a problem there then we have the author UID so this is all one write which is a little bit of a problem because we want to see the author's name not their author UID that really doesn't help us so I'll show you how to change that but then we've got the description we've got the dog that we're looking at and then we've got the images so obviously we have a problem because we just wanted to show Bailey pictures but we're going to Bailey and Suzie here so we've got to add a filter so if we go back up let's start making our changes here so obviously in fields we have to add a label I don't want to refer this to pick your name right and I'll apply that the author UID we're gonna actually remove this field so we can go ahead and hit remove and then we're going to add a new field which is going to actually be the author so one of the interesting things about doing videos struggles on the fly is that obviously you learn something and sometimes you screw up so we actually can't pull in the author name without creating a relationship and a relationship is a bit beyond the scope of this video tutorial so we're not going to do that we'll leave it as the content author UI but actually in our fifth video tutorial or actually I think it'll be six is what it looks like we'll be covering relationships so for now we'll leave it as the author UI if she's your views journals on how-to I'll show you how to pull that in but we'll go ahead and we'll just add this to the display so we have it back we'll just leave this as author so sorry for getting our head as ourselves there but taking it back to the fact that we have Bailey and Suzy pictures what we have to do is go on to our filters so every time we create a view essentially if we're doing content more often than not you're going to want to make sure that you have the content being published so that's a filter so essentially what the filter is is if you think about it we're going to pull in all this content that's in our database and then from there we're going to selectively narrow down what we want to see so our first filter is we have all these nodes all these pictures we want to make sure that they're published we might have no doubt there that we you know we've created on our site we're waiting for one thing or another publish them so you don't want them to be seen so we would add in content published the other thing is that we did automatically when we created this view was we chose the type to be dog pictures so we just want to show that it's pictures of Bailey and Suzy than being seen not other things that we might on the site and so on the side here we have slideshow images we don't want those to be seen here those are create another tutorial don't want them included here so I'll show you how to add another filter which will actually filter out Suzy pictures so we'll go and we'll go add so what we're going to do is were actually going to choose content right and so this is my field that I set up which refers to which dog and actually relates to a taxonomy term so if I go ahead and I add this sorry and choose autocomplete apply and then here is one of and the reason why I chose autocomplete is because I know what I'm looking for so if I type in Bailey and get my Bailey option and so we have the option to define this filter as the pitch the piece of content is either going to be one of Bailey it's going to be all of specific term you can choose none of so anything but Bailey you know is empty so if we didn't have a field we could say you know didn't have a field show that that might be good for administrative purpose to make sure we're if it wasn't mandatory to have that which content did or didn't have it is not empty so again we want to see all fields that are there that have that have been tagged for whatever reason when this reduced duplicates is something we can discuss later but this is sometimes helpful for seeing multiple things and they're very scenarios where that can occur but we'll look at those in later video tutorials and again we have the more section here which we're not really going to use but just flagging it for you so we'll hit the apply and now we're going to get the auto preview because we've made changes so if we scroll down we'll see that we've got the picture the description the dog the author and somewhere along the line I've removed the actual picture of Susy so gotta go back up there at I'm sorry about that and now I've got it back so we've just got Bailey here we've got our author of a better image so things are starting to look good one thing I'll fly for here is if you know if we forgot to add content type equal dog pictures we could add that ourselves by going to add and you'll see it's within contents we can actually reduce the additional ones but we'll content we'll scroll down and we're looking for something called type so content type so for example so I'm going to add that I'm going to add display and then again we have our options here is one of and we would choose dog pictures but obviously we already have it this is in the event that you know maybe you forgot on the first go-around we're setting up this views we'll just go ahead and remove this because we don't need an additional one so right now we've looked at the format well we've looked at the title the format the fields filter criterias now we're only going to look at source so this obviously is the way that our images will be presented to users so right now it is being presented as the post date descending order right so we can change this we want to keep it as post date and we can do it as ascending order all right we can do this for the minute per second as granular as we'd like to get so we can apply this and we'll see that things have kind of been swapped up here but we can also do you know some crazy or other sorts so just looking at things we could do the number of content our comments that are there or the last comment time so if we want to have our most active piece of content float to the top we could do that you know we could do this sorting by the author UID if we had multiple authors on here interesting thing too is now that we've gone ahead and we've added additional fields we can go back to our table go to settings and we can do this is sorting this is sorted this is sortable and so all of these now can be sorted if the users looking at our table so if we go ahead and we apply this you'll see that each one of these now we can go quick description and now it's sorted we can collect dog iris either all Bayley or we can sort by the image remember that's where we're looking at the F ID so this was a title you could sort by that but it also switches everything up so that's one of the neat things about tables so if I go back to the settings I'll just walk you through when we added all of our fields they all end up becoming configurable here and we see that they're all in their own column they're all aligned a certain way so we could if we wanted to put the pitcher name in the center the left right we have some pretty fine-grained controls right out of the box when we choose a table the separator is interesting so what I'll show you here let's do right now there are two different columns for picture native picture description but let's put them in the same column and it won't change anything beyond that but let's go ahead and we'll hit apply and see what happens so now I've got one after the other but let's say I wanted to add an additional space for for some reason so as you look here now to be our tag actually that's at an HR tag that's probably a little bit more representative so we'll add a horizontal line to separate the two of them and this is obviously still gonna be sortable and ascending so remember we were talking about this we could use descending ascending if we were doing this and obviously the default sort you can set that so if we go ahead and hit apply you see here we've got Bailey inner house then we've got separator and then we've got the description right so that's kind of interesting because sometimes you'll have a column and you put two things together in the lineup but you can use a br tag and separate them have them on different lines so that's really the extent of this video tutorial I just wanted to introduce you to the title the format fields the filter and the sort those are all the basic settings for any view that you're going to be creating in the next video tutorial we'll actually take a look at these settings here in the middle which are you know specifically changing up our path adding things to a menu doing our access permissions but also adding headers footers and manipulating the pager so again this is just a basic tutorial we're probably not going to get too advanced things until maybe the fourth or fifth video tutorial fourth we'll be looking at you know actually creating pages blocks and attachments and then in the fifth we'll look at actually theming views so I hope this helps if you're brand new to views if you're looking for something a little bit more vast I say probably wait till the fifth fourth or fifth video tutorial and then jump into the series but until then leave a comment let me know how these are helping you always appreciate the thumbs up and I love hearing from people letting me know if these are helping out so again leave a comment let me know and we'll see you in the next video tutorial thanks very much

Channel: Web Development Tutorials

Views: 55,748

Rating: 4.9519038 out of 5

Keywords: drupal, views, drupal 7, drupal views module

Id: -mQ9oj6ThGM

Length: 20min 57sec (1257 seconds)

Published: Thu Nov 29 2012