Mastering Drupal Views #1: Build a searchable database in one hour with no coding required!

1. Series and Course Introduction: Welcome to the mastering dribble view. Siri's I'm your Teacher, Dr Michael Nolan, the founder and CEO of Siri Um Software LLC. I have five years of experience working with Drew Apple and the Views module from Drew Pill version five of triple version seven, and in this course, you'll be learning about the views module inside and out. Views in Brief is a droop will module that allows you to perform database. Query is turning into attractive contents and do this with no or minimal code for the work being done. Now the reason I'm putting this series together is because first and foremost fuses one of Apple's most powerful and popular modules. As of the time of this recording, over 880,000 sites air using views actively, and the module's been downloaded over nine million times. Also, virtually every project has come to need it. And indeed, any time you listen to dribble, experts give purples, top 40 modules and 40 minutes type videos. You will always see views mentioned at the same time. Strangely enough, there is a notorious lack of systematic documentation of the views module and how to take advantage of a number of its features, particularly the advanced features. So I wanted to build a course that will take you from building your very first view all the way up to advanced and professional level views. Development. This is the full set, of course, is we will be covering in this Siri's. As you can see, we're currently on the very first course for the entire Siri's. Also noticed, too, that need to the sections. There is one course with an asterisk, thes air going to be offered for free, or people who are not yet skill share members. So if you want to learn a little bit more about each of these subsections of the entire Siri's, I'm going to make one course out of each available to you. But the idea is that you were first going to learn views top to bottom before we get into any of the coating, and then we'll get into building various types of applications, learning how to theme views and make it look very attractive, and also how to really get into the PHP side of use and extend the views module with custom plug ins. This course what we're going to be covering is first how to configure the views module. So this includes module settings, the views interface and the concept of left center and right in the views admin panel. And when you work with each part and we will also build our first view. So we're gonna do a little bit of basics around triple content in the entity system, and we'll be using that to set up a book club recommended reading list. So withdrew people we will be building are recommended books and then with views were going to be building a searchable database of books in a few of its out of the box formats, including the UN formatted list, Rid and table At the same time, they're gonna be some things we will not cover in this course. So the idea here is I want to help you get started and build something that looks good. And it's fast hour or less. And what that means is we will not be covering each of the components of use in depth, particularly fields filters, because we're gonna cover these in the future courses. Also, I will not be covering what is known as the right side or the advanced side of the views had been panel. You'll learn a little bit more about that in the next video, and finally, we will not be covering how to install droop on other modules. However, in the course description, I do have links to some other courses that do cover this and how to get started with Drew people in general. So that is it for the introduction. So next video, we're going to be learning a little bit more about how droop a works and how views works with it. 2. Views Module Concepts: Let's begin by introducing the Views module. Why was made, how it works and how we're gonna use it for our course. So the first question is, Why views? Why make this module? So first, let's look at Drew people without views. So Drew people. If you ever installed and started working with it yourself, you'll notice very quickly. Drew Pull really only gives you a handful of very basic list of content, so you'll have your user list. You'll have the node list. If you add the taxonomy module, you will have content that is tagged with a particular term, but you really can't do a whole lot more than that. So views is in part, a way to add more functionality in terms of displaying your content or list of content. Now, of course, there are some alternatives. So, for example, Dribble has the database abstraction a p I, which helps you to do sequel queries in a safe way. You next have entity Field Query, which goes a little bit further, and it will go ahead and format every query according to how droop will normally does things. But the problem with both of these is that they're all in PHP code. So if you want to make your side a little bit richer and you want to add more content and you also want to take the content you create and displayed in creative ways, what would have to happen is you would already have to be really good at PHP. And arguably it s key Well as well. Whereas views will let you do a lot of the same stuff, but without having to learn all the code. So it is a great way to start getting into this kind of field now, for other stuff used brings the table. So, as I mentioned before, it will help you with building your queries of the database. But also it helps a lot with formatting output, so it not only fetches your content, but it also will help you to format it and make it look good. In most cases, there's no code and their number of relatively easy ways to build plug ins or to extend what views does out of the box or your advanced cases as well. So, like I said, you start off with no code. But even when you get out into the very advanced cases. You find out you use a lot less code than you would expect to need for your application. Let's look at how views works. So you begin by selecting a dribble entity type. Now, in Drew pool entities are your content, your users, your tags pretty much everything that you have on the site in regards to your data. Now, next. Once you've decided what type of entity you want to show you next choose how to display the entities. So, like which parts of them, for example, fields, Or if you want to display it in like table format or as a slide show or whatever. After that you had your fields, relationships and filters so that you get all the information you need, as well as filtering out the information you don't. And then you add all of your extra output settings in order to make views. Really? Do exactly what you want to dio and these could be things like contexts of use can react to a page. So imagine, for example, if you want to do all the post that a particular user made on his page. Well, in that case, you can have a view that reacts to the user I d on the user page and it will show all of their content. Next is aggregation, so you may want to do, for example, counts or sums of fields you can then also do your theme ing make it look good. And finally, you can also tweak the database query a little bit in very advanced cases. But once you have everything set up correctly, then your content, your new pages ready to go. In the previous slide, I mentioned drooping entities, so I wanted to go ahead and throw up a quick illustration to explain a little bit more about what they are. So the first thing to understand about triple entities is that they are all collections of data and in the back ends. Thes could represent multiple tables in the database, but they are all tied together in a discreet way. So first you have different entity types. So, for example, in this illustration, I have content. I have users and I have taxonomy term tags now sunk. Some entity types will also have what are known as bundles, so content has content types. So in this case, I have a blogged post and I have a page. Now you might know those from the WordPress pages in Post, but you can actually go even farther and say, for example, and are illustration We're doing recommended books for a slide show. We can have a slide content type. If you're doing a real estate site, you can have a properties content type. So there is quite a number of content types you can make anything you can imagine. In fact, next entities can also have relationships. So in the case of our content here with our content number one, So that is our blogged post. It has an author relationship. So from content 12 user, one user, one is the author. Next it can be related to other entities. So in this case, we have content to a taxonomy term tag. So in this case, it is tagged with tag number one and then finally, each entity can have data within it. So in our content we have the content body. So that's the text. And then also to, um, inside of taxonomy terms. They have a field known as the description and then also you can add custom text. So for my user here, I gave him a field called Likes, like the stuff he likes. Now that we understand a little bit about the entities, let's look at how used processes those. So here we're gonna top out the concept of left, right and center starting from the top. We have these different displays so you can take one view and then have different fundamental displays, such as a page, which would have a U R L blocks, which are embedded on pages. You can put views in views with the embed display or the attachment type, and then also there are various custom ones that you can create. An advanced cases will probably talk about towards the end of the Siri's. Now, within each of these displays, you have the admin panel divided into three parts left, center right, and on the left, you were concerned mainly with what you want to display and how you want to display it so you can have different formats like unformed, matted list grid. There's the jump menu, which is a drop down that will send you to different places on the site and each of these have their own internal settings. You can show the entire rendered content or entity, or you can select specific fields. Next, you have filter criteria, which lets you filter out leg, which entities you want or don't want. For example, you can do on publishing instead of bleeding toe hide stuff. And then finally, you have sorts which determine which come first or last in the center. These are the display settings. So, for example, this one we see the pages highlighted so pages having you or L or path so you can set the path here. Since it's a page, you can also put it into dribbles menu system created, menu link. And then, of course, nearly all of the displays will have an access control. Also, certain displays will have special display specific settings. Ah, we will be going over those in future courses. After this, you have the header footer, what goes above or below the view, and if you have a large number of items, you can set the pager also in a later course, will be talking about meta tags. So these air S CEO related. This does not come with views out of the box. Finally, on the right side, this is the advanced side. This is something you don't jump into as much. However, you have the contextual filters, which will let views react to the page that it's on. For example, posts by a user. You have relationships. So if the one entity you select is not enough ah, you can then go and select other entities starting from your base one. And a great example of that would be if you are doing content by user. If you have blogged post, for example, you know, maybe you want to pull the tags from the block post. If you find nothing with your view, you can control what that nothing looks like with a no results behavior. If you do searches, there's the exposed form, and then in this other you can practically make a course out of each of these. And in fact, some of these we do make a course out of each line, as there is a lot you can do with each of them. Now, this time we're gonna be focusing, especially on the left side. In this course, I'm going to go over each of the parts, so views formatting out of the box lets you pick a lot of just simple overall things. Also, when you do fields, fields can have for matters within them. So if you have an image, you can have raw image, a pre formatted one, like a specific size or just a link to the file. So it's the same image, but you can render it different ways droop. All modules can also offer additional formats, so use bootstrap is gonna be an example of one will be doing in the future. And then you also have various types of custom formats. For example, views has something noticed the custom text that will let you take multiple fields, then combined them together in a very specific way. So if you have done development with HTML ah, you can control the structure using the custom text. Also, the other cool thing is you can order and rewrite fields and finally, you can even use PHP Teoh, reach in and extend fields out even farther to do exactly the thing that you want to dio. So with some four mining examples, we have the table format and grid format here, so as you noticed. These are the exact same content, exact same data, but just rendered two different ways. Earlier we talked about fields. So, for example, for starting content of type log post, then the blood post has different properties attached to it. So we have, for example, post eighth. In this case, we're choosing to render it as a time ago so you can actually have it shows like last week or today, or just a straight up date. You can do title, you can do body, and we can do a number of other ones, which we will cover as we go through the Siri's. Next we have of use filters, so filters will lie you to pre filter results. Or, if you expose the filter, people can conduct searches. So a great example of pre filter would be a post in the last 30 days. So you go ahead and cut out everything that is older than 30 days. Or you could do a search by title, where people type in what they're looking for. Something will also get into as we go along. Is that you? Congrats filters and you can use and or logic so you can say post from the last five days or pins post, in which case they stay up there until Ewan pin them. Now that covers everything that I wanted to talk about for the left side. So I think we've got everything we need to get started. So the class project we're gonna do is we're going to configure views were going to configure a book entity for the view, and then we're going to build views. Four books. So we have a recommended reading lists, and we're gonna do it in a few different formats, and we will do it in one hour or less. So get yourself ready. We are gonna be moving. 3. How to Configure the Views Module: to build our first view where you will begin by activating the views module and configuring it. So let's start. We're currently on our the most site I have already Longden, so we can go ahead up to the toolbar here and click modules. Let's see as we go down, that's we got core. I'm gonna turn comment off as we've not needed for this one. Next of used depends on the chaos tools, modules. We're going to enable chaos tools, only others we will not need. Then finally, down here we have the views. Module's will enable views in views. You I as Theo I module lets you edit the view settings and see if that all right, the configuration options have been saved. Let's go ahead and set up the views module, go to structure in the toolbar use, and in the tabs up here, we're going to go to the Settings tab and let's go ahead and look through this. So we're gonna look at each of the track boxes. Here is we have show filters on the list of use when you go to the Views Overview page. This will let you search through the list next is show the advanced help warning, so it will ask you to install the advanced help module. Ah, you really don't need it, so you'll uncheck that next is always show the master display so inside of you zero different types of displays that's like pages blocks on one, not master is one that is common to all the views, and any time you create a new display, it will clone it from the master. So usually I leave it on just so that I know it's there. Let's see. Next is always show advanced display settings, so that is the right side. I always leave this checked because I just don't like to bother with having to click the advanced, have to make it roll down and let's Who else we got? Show the embed display. So embed is when you want to embed of you in another place. This could be embedded in code, or it can be embedded in another view. Normally, I leave it on otherwise, when you want to embed one of you another yet like create a page or a block display and you create a whole bunch of unnecessary settings. So again, leave it on custom admin theme. I always leave it on seven, which is one of the dribble default theme's. And the reason why is you don't want to have your theme JavaScript mess with how the view behaves until you actually do it live. And there's a variety of reasons for this. But anyway, um, seven just works really well the label. So this is when we do filters. So it's just a preference on how to show the word any. Let's, you know, get live preview setting so automatically update preview on changes. Some views. This could be pretty server heavy, so you may wanna uncheck it personally. Always leave it on. In most cases, it's fine next for the show information and statistics about the view so you can do it above or below the preview. So, like it'll render your view I was doing above Let's see what else you can show the SQL query, and I always leave it on. You really only need it when you're trying to debug a slow view. Same for the performance statistics. Sometimes it is nice that, like when you're editing, you make a change, and then all of a sudden it takes, like three times as long to load like then, you know, like that. One thing you did is what made it so bad. Then finally a show. Other queries run again. This is more of a debugging thing. All right, Save configuration. Alright. Now, for advanced settings, person we have is cashing. So some people call it the cachet. I call it the cash. Anyway, what happens is when views does a query to the database instead of doing the same query every single time, it will save a copy of the results from the first time and then reuse that several times. So this will force it to run the fresh database query every time. So this is a performance thing I would recommend leaving it unchecked. Unless you're getting very weird results. Next for debugging. As you can guess, we're gonna leave all these unchecked too. So these air advanced debugging cases where you are really trying to tweak a specific thing in the view and you want to see in the database records like, what exactly is views doing so you can get all that information from these? Most of the time, though, you just leave them Turn off next localization. So translation with we have core and none. So the reason that that would matter is if you're trying to do a multi lingual site, some multiple languages, you would need to set this. I'd also point out that some modules will actually give you other versions besides Corrine . None. So you go back and look at this. If you're gonna do multi lingual, see saved the configuration. Here we go. All right, so we have configured views. That is it. 4. Configure a content type for the view: with views configured. It's now time to give use a little bit of content toe work with. So to start, we're going to go to Structure and the toolbar. Next, we'll go to content types and we see we have the article on basic page here. We're gonna add a new content type, this one we're gonna call recommended book and let's see no description for it. Its mission form settings were going to call it book title, maybe afford submitting. That's fine. Explanations. Submission guidelines. So fun fight when someone's going to create a new content of a given type. This will be the help text that shows up publishing options we're not doing promoted to front page, and everything else is the same display settings display author date information. I'm going to turn that off unless you're doing a blawg. Usually you turn that off. Menu settings were not going to create menus out of this, So Okay, that is it. Now we're going to go save an ad fields Now we've got book title on we've got body, so body is added by default to all content. But what we're gonna do is we're gonna edit this just a bit. We're going to change the name body too. Description. So you could imagine, like, description, abstract, Whatever fits for you and this really usually leave not required, rose 20. That's always a lot saying Do rose. 10. Did you see this is 20. So 10 would cut it in half. Right about here. The full text format. Uh, if we do non admin users, we leave it on filtered HTML or plain tax. See a number of values. One that is fine safe settings. The next we're going to add a few properties for books. So, for example, if we're gonna recommend, books will probably have to have an image. And there is a default image that exists when you first install Dribble called Field Image . Something to call this Buy the machine named field Looking Image and the field type is image. Budget is image Save that it was asked about public versus private files. Since this is not really an access control thing, we don't leave it on public default image. If you have a placeholder that's fine se field settings all right since he here. So we do want an image for all of our books are gonna make that required. Yeah, there's our default image again. Allowed file extensions. This is fine. Occasionally, people have a specialty, one they want to dio while directory. So this is if you're running your own server, it'll be sites, slash, default slash files or wherever you do your public directory and then slash this, I'm going to say recommended books. It's always best practice to put something in here. I've got maximum and minimum image resolution. So this one, I will go ahead and do state 6 40 by 4 80 So what happens is if someone submits a bigger image, it will crop it down. If someone submits too small of an image, then it will refuse it. So in this case, we're not gonna worry about too small of an image. But in the case of too big of an image, then it's gonna take up a lot of wasted space on our server. So it's good to crop it down to a size that you're expecting to use anyway. See maximum upload size. Ah, excellent is 100 megabytes. That's way too much. I mean, 10 should be fine. Own title. We're not gonna mess with it. But just, you know, it's an S e o thing next year, your preview image style. So this is if someone goes directly to the content page, that's like slash node slash and i d. Then it will print the image out directly on the page. Normally, if we do this kind of formatting in Drew pool in general, we would just hide this. But what can happen is you can show the image just as it is, or you can change it to any number of sizes. We're going to see a little bit more in our view later. I'll just leave it as it is for now. See, we want just one image and everything else is the same. So save excellence at an author. Now we could do entity references so we could do books by author, but we're not going to get into that during this course. We will do that in a later core. So for now we're just gonna do text See that max length? That's how many characters and 2 55 is fine for this author would be required, and of course, there could be more than one author. But anyway, see, all these will leave on default. They're all fine. The bottom here number values unlimited because we could have multiple authors and we're back to our maximum for the previous strain. So save settings. And last one, let's do I spn number that is going to be another text X field and save it seems sitting us before all right, We're not gonna make that required. Some of our books will have it. Some will not Multex. That's fine, actually. Let's just say s being if you you have it this weekend suit that looks like later there's processing. Find full may find there's only one eye ESPN safe settings And let's also have suffer a description is a big field. You can put that up there. Author. ESPN are pretty small. Put him right there. Since Kellock, we're doing the smaller fields to bigger ones. It just It kind of looks nice. All right, we're going to save that. And now we have confused or content type. All right. Next video. We're going to go on ahead and make some content 5. Create content for the View: Previously, we had configured our book content type in the structure section. Now we're going to go to the content section and put our new content type to use. We're gonna create three books. So under content in the toolbar, we're going to click Add content Recommended book. All right, so our first book is going to be nothing to envy by Barbara Endemic. So we're gonna call it Nothing to envy. Author is every Temic and I have the i ESPN for this one, this is 978 zero dash B A I 5 to 3. Cash too. All right. It'll be the one on ESPN we dio right now for image. I can actually drag one in from side over here, and I'm going to upload that. So very interesting. Read this book and let's see, I want to put in just some, uh or, um, Epsom type text for the description. So I'm going to go to lip some dot com and let's see, we're gonna do three period wraps, generates CIA lipson dot com Great stuff, a copy and for the description paste, save that. Does he can see this is the Ron note output you're not actually going to show this page under most circumstances. All right, let's see what is next. So we want to go back to content, Add content, Recommended book. We're gonna do our next book. And this one is a choice. It is an economics textbook textbook by Roberts. Murphy Spn. We'll leave alone if the image gonna drag it in again. Very cool book, By the way, description we're gonna paste in our Lord Epsom text again. Copy that and save. It's again. Same thing. Noticed. The image is a little bit different. Size. We're gonna run into this later. One more content. Add content. Another recommended book. And this book is the timeless way of building another very interesting read. And for this one, the author is not printed on the jackets. Here we go to get here, we have Christopher Alexander. All right, leave the ESPN alone is her image knows this one. So this was a bigger image. So the image was resized to fit within maximum allowed dimensions. So this image was pretty big. And now it's cut it down and also you notice it's only 14 k So sometimes you can drag in these like multi megabyte images. But you really only need 10 toe 50 k of actual image. Do what you need to dio. All right, description a stolen? Yes, this is fine. So you'll save it once again. All right. And now we've got all three. So if I click on content now, you see, we've got this list. If we promoted all of them to the front page, then you would see them on the home page, and that's about all we could Dio. But now we're going to jump into views, and we're going to show these in all kinds of attractive ways. All right, let's get to the next video. 6. Building the View: Initial Configuration: Now that we have set up our content type and added some content, we've got enough reviews to work with. So let's build our first view. We're gonna be doing an unformed ended list of our books. It's a first step. We're going to go to structure in the toolbar, click on views and add new view. So we're gonna call this recommended books. So if you remember the entities from earlier, these are the types of entities you can pick slums. We have content content revisions. So if you have a revision history, which you can set up taxonomy terms, these air tags files each file you attach is its own entity users so users a type of entity and finally, module and theme beds. All right, so I'm gonna do content of type Recommended book news First holds first title. Let's sort by title by default. All right, so we're going to create a page. This page is cold recommended books, and the path is going to be our route slash recommended books simply format. Were you endure unformed ended list. We're gonna do fields so all the others are. You take the content and you render for example, just the title or a title with the link to the post. You can render the entire page or post Or a teaser is where you take the body and you like , shrink it down and you just show the pertinent stuff. So we're doing fields. I am display 10. I always like to do 25 but tennis fused to fall. Use a pager if we ever did a lot of books. Yeah, this is pretty straightforward. Created Menu link. I'm gonna put this in the main menu. We'll see where that is later RSS feed. So this is if you want tohave someone with a aggregator of some sort common, pick up your content. You can do that in our case, Really not doing it. But if you did, then you have an option to give it a whirl where other people can pick it up. Uncheck that if we want to create a block, we could if we wanted to in bed this on another page. We're not doing that. So we're going to go to continue and edit 7. Building the View: Add fields + Initial Field Setup: no when we said do an unformed, matted list of fields earlier. As you can see, that shows up in our format. Unformed, matted list fields Next, When we said show content of type recommended book. So the entity type Once you pick it, you cannot change it anymore. You would have to create a new view. But when you say content of type recommended book, you come to the filter criteria here and pick some other content type. I only said, sorted by title, that populates this part right here. So now you know, let's look at our formats settings so informative list settings. So this is just display stuff or yeah, the HTML, the theme ing. We don't need to do anything with that. Let's see settings. We might do the in line fields later once we set it up and before we jump into fields a point out we're currently on the master display. I want to go over to the page display also because we're going to do multiple displays in one views. We're gonna do like one for unformed. It'd list one for table one for, uh, the grid. I'm gonna go ahead and change the display name. So no one on the front end sees this. Just you see this life to use his master un formatted list. Another fun fact is, in advanced cases over here and other. You see, it says machine named Paige. So it'll be like page page one page, too, as you add pages. But just if you want to sink this with this, you can Anyway, no worry about that right now. So titles, same yet formats the same. So now we're gonna look at Fields Content title. NATO says four all displays. So if you pick four all displays, then it's going to show up on the master, and then it will sink toe all the other ones that are set to four all displays. Your other option is this page override. So that will actually make it so that none of the fields in here show up in master, and instead, like you're operating on Lee inside of this particular display, All right, we're going to make this one a heading. So what, we're gonna do it the title. So if we created a label, we can customize label html and we can also wrap around the field and the label. Since we're not doing a label, we're just going to customize the field now for HTML elements because we're trying to do this. No code. I'm not gonna get too much into detail. But I'll just tell you the H one h two these air known as headings and the very top level heading is the page title. So in this case, we're going to do heading to so are heading. One is the recommended books. Each of the book titles will be a heading to. Aside from that, we don't need any of the others here, so this is good. Let's go ahead and click. Apply. So let's go ahead. Let's go down to the bottom here. Is he a title recommended books? Also, I don't want a link to those pages. I don't We want people to see that So the CIA go back. So fields content title. So there's a check box here. Link this field to the original piece of content. Let's uncheck that play. Okay, this is looking good. And next before we get into other fields, I want to do this sort because yes, this is reverse earth. This is e T A. I want a dizzy So I'm gonna go up here to the sort criteria content title. We're not gonna expose the sort we're gonna do a sending So ascending is low values toe high value. So that is 0 to 9 or a to Z It's also passed to future Descending is gonna be 9 to 0 Zito a future to past Okay, sort descending. All right, cool. So now we got our titles. Of course, we don't want to just show the titles. We're gonna add some other stuff So under feels when I click Add Now there's a fun trick here. So all of the content types and seif your taxonomy, vocabularies and everything else. Um, the bundle name is listed in each of thea of the Views fields here. So the technical word for these, By the way, our field handlers we won't talk about that again until the very end of this Siri's. But just so you know So for example, this is our author from are recommended book. Now this is different from the author. You i d which is the user like the literal author of the page of the post, So yeah, I do want check this one. But how do I find all those other fields I made earlier notice This appears in node recommended book. So if I copy this and then I put that in the search box, all the other hint field handlers that have recommended book in the description will show up. So this is great. Whenever you're working with one content type, it's an easy way to find everything. Yes, we want Author Sofield, author Delta. That is, if you have multiple authors, you can say which authors and position 012 the use case for that it's pretty limited. So I usually do not use this one, but there are a couple of cases out there. That's what they expose it. Okay, So content body, you notice Here's is also known as content description, because for us, it is the description. So the content bunny image and I spn Okay, so we're going to apply. The author is first now in the UN formatted list. We're not going to have a label for it. No se have four matters. So default plane tester trip. So whenever you do HTML, you can cut the html out by picking plain text for this four matter. All right. Multiple field settings. So display all values in the same room. Display type on ordered bullet list ordered number list. Simple separator. In our case, that is a comma in a space. And that is fine. Alright. Style settings. I do want to actually do something with this. I am going to customize the field html and out at the very bottom. Kerry of Strong and e m Strong is bold e m is I Talic. So that's a good one to write down and remember everything else. We're gonna leave alone. What? We're gonna have rewrite results, so I'm gonna check rewrite the output this field. So there's a fun little trick here. The replacement patterns. Well, token field author, Copy that. See here by field author. So now, instead of just being the author's name or like the list of authors we now have by field author, Okay, Next, his body. So if remember, that was the description. Ah, we're not going to show any label for that one. And let's hear for the four matter, we're gonna do summary or trimmed and I'll explain real quick what that means. So the trimmed for matter whenever you have very long pieces of text, obviously like you don't want to, like, clog up your view it just like all this text. So, for example, if you got big, long essays, you don't wanna show all of it. So what you can do with Trimmed is you can trim it to a certain limit of characters. And then at that point, sometimes it'll go to the end of the sentence and then stop. Sometimes it will cut off a little bit earlier than that in terms of the words and then put in ellipses. But usually it is good about leaving whole words. Now the summary what happens is certain body fields. You have the option to put in a separate summary. And no matter what length it is, that summary is what shows instead of the trim format that could be useful. For example, when you do a blawg and you want tohave the blawg post list on the front page, save one thing even though the body might be different, so just keep that in mind. But this is pretty much it. We knew some of your trimmed 800 character. And applying next is image No label again. We don't want to say image, Colin. And that the image, Obviously we're matter. Image find image style. We're gonna leave that alone, I'll show you. Well, why will use it later, Link image to nothing, content or file. So we don't really want a link to the Post in this case. So we're not gonna do that. Linked to file will let you click on the image and see the image. But in this case, we just want to link to nothing. All right, so the image otherwise is fine. Good of the next one. And finally we have the i ESPN. Now, you remember Not all of the books, haven't I? ESPN. So we do want to tell people that it's not available, so we're gonna go to no results behavior. Be right here. I do want to leave the ESPN in as a label, so I want to say not of available. And when we do fields in death, we will go into the count the numbers year on hide and all that. Okay, So that is it for the I ESPN. Cool. So now we've configured all the fields. Now let's look down and see what we got. All right, so it's starting to look pretty good, actually. So you got the title? We've got this nice italics byline. In your description here, then the ESPN is in kind of an awkward place, as is the image. I would want to put the image up above at the very top and then probably put the ESPN like , right below the byline. And I also want this to be flat. I don't want it to be like label and then, like, down below. 8. Building the View: Final Styling for the Unformatted List Page: First, we're gonna rearrange everything, go back up to the top fields and rearrange. So now we've got all of them in this Dragonball list. We're gonna put the image, drag it up to the top. I ESPN is gonna go below the author because that's the byline. A nice we got image title byline, ESPN and description. So now two more things to note here for Stanley one was the I S P M v o. So notice the's images air very different sizes, So that is kind of awkward. So 1st 1 to deal with the i ESPN. So we're gonna go to format T Schofield settings, and we have here what are called the online fields. So what will happen is if you check them both together, they all show up on the same line. But if you check just one, then the label and the field will show up on one line, so we'll strengthen separate. You need a space in here. Otherwise there's no space. All right, so now you can see choice or Murphy ESPN not available. Now here I ESPN is the number that's looking good. Now what we got now we got the image who want to make them all the same size. So this is, if you remember for matter image linked, nothing image style. Let's make it medium. That's 220 pixel by to 20 pixel. So choice looks like this. It's not to stretch because remember, it was the smallest image. This is now the same height that looks good. Towns were building same height, so it all looks good. So now we're up to the point. We got images. No, everything's arranged correctly. One last thing we want to do for this is search. We're gonna do a search by title, so filter criteria ad in search. Gonna put T i t l e content title. You know, it's always this content. So when you have multiple entities in one view So for example, we got content to next this whatever. So what this does is it is just telling you which one you're editing, because if you have more than one entity, sometimes they both have a title. But anyway, small, small detail for now, the content title, I can feel figure filter criteria. So in this case, we want to check this exposed box here So this allows people Teoh do their search. So we're gonna check that group Filters lets you do multiple title searches at once. So, for example, do this but exclude that you don't need that in this case required would force people to fill it out before they can see anything. We don't want to do that. So label we're gonna see search by title Now the operator. There's a lot of different options here. I virtually always use contains when we do it like this. Another one you might try is contains any word, especially if you're doing a lot of copying and pasting because it will account for straight spaces. Although what will happen, though, is if you're doing a search by title, any type in two or three words. Now, if it matches any of the words, it will show up. So if you type in a specific title, a whole bunch of books may still show up. All right, let's see here we're gonna do just contains so it has to contain all of the text in. I will also just say from experience. Don't expose the operator unless you get all the way up to my course on hacking the exposed forms. And the reason why is because most people get really confused by this operator list. So I always just say, Do contains leave it at that. All right. So I got searched by titles. If I search for choice. True, That was the ceiling one. The search for nothing. I get nothing to envy. So there we go. That is our very first view. You have built a searchable database in a pretty short period of time. Now we're going to jump to doing some other formats starting next with the table format. 9. Building the View: Table Format: All right. So we built our very first few, and now we're gonna extend it with a couple more displays, starting with a table formatted page. So over here, we're going to click add page, and we're going to change the display name from page to table now because we have multiple pages, we have to go in and do some settings for this display. So we have been working on Lee on the left side. When we're doing the UN formatted list. Now we're going to work on the center. So first had the path says no path is set. So we're going to say recommended dash books slash if this is do dash table and there is a reason for that. Okay, it's a recommended books table menu. I want to create a normal menu entry. So menu tapped a fault menu tab is when you want tabs inside of a page. Let's see here. So if the title wreck reading dash table, if they're young and the menu is gonna be main menu just like our other one play and then he knows for the access, we have permission view published content. Uh, this is gonna be fine because it's not front list it paid. Your settings were all the same. Now these center items, at least for the page sittings right here. These apply on Lee too. The table display itself. Also, let me check the permission real quick. Yes. So permission would be a case of all displays. So when you say four all displays, it will apply it to every single display. So we had our own formatted list earlier. You would have played to that. It would apply it to master and through master to everything else. So if we wanted to do it just for the table, we go this page over, right? And in fact, for our format over here, we're going to switch from unfermented listed table. You want to make sure we go for this page otherwise are other page will also be set to table, right? Let's click table, and we're going to apply on this display. You know, his table has a lot of extra settings, including you can make certain things sort herbal. In this case, really, the title is the only thing that makes sense to sort order ascending. If we say default, sort this will override the other sorts that you do in thesaurus settings for the view. Just an f. Y. I. And this is specific to the table case. And let's so it's no one thing Here you see the italics or says format table. The reason that matters is because the italics in the Views admin panel tells you it is specific to this view. It has been applied to this page and for the format like this format will just set on its own. But if you do, the fields filter or sorts will happen is if you change it, it will change the entire fields set. So in other words than any, change me to any field. If it's applied toe on Lee, this one display, it will then be the case for all the fields who needed at them. All right, so let's look down what we got. So as you can see, the table looks very different. We have columns and what looked very good in our own formatted list suddenly does not look very good in our table. So we're gonna need to add labels, and we're going to need to get rid of all the special formatting here. We will probably want to make the images smaller too. All right, so let's do that. All right, so let's get to our first field. Let's do the image now. Once again, Note. So therefore, all displays were gonna go for this page override. I'll tell you, a lot of mistakes get made on that, by the way, and I still do it, you know, it's all we're doing here is we're changing the image style from medium to thumbnail. They say that we're gonna do one of the things to we're gonna give it a label. So I say, look, image. All right, so a point is this. We know, go label, book image. And we've got what, smaller images. They're gonna be consistent with our text now. You noticed fields, as I tell it now. So that means all the changes We don't have to go back anymore and do that because now it is always this page. Also. Fun fact you see, it says referred to default now. So once you do an override, you have an option to go back to whatever is set to master. If you click, revert to default as always use caution when doing any of these, you create a label look title and for style settings were not going to customize the HTML anymore. So that's good. Author. Get them the label author. And if you remember, we did a rewrite result on this one. We're going to erase this and we're going to uncheck this box. Apply ESPN is most likely fine. Yep, it is behaving just as we expect. And now for the body field. Read the label description and we're gonna change the trimmed limit down to 600 characters . Let's see how that looks, right? Yeah. We wanted to be about the same size. A little bit bigger than our book images or larger book images. So 600 is a little too much. Let's trim it to 400. Are you? So that looks pretty good. Pretty consistent overall. And we still get our search by title. So I'm gonna add a search by author and I just noticed looking at this So author is italics . Let's get rid of the italics. Uncheck customized Ticino. All right, that's good. Let's do a search by author, but actually, I want to apply it retroactively to our other one. So in this case, when we add, this is going to be for all displays. We want the author that appears in node recommended book, and we're going to expose this one operator is going to once again be contains. Let's get rid of that field author. Everything with Title does that we do Search by author. All right? No, I got searched by title Search by Author Mobile This format Now let's go back. Look at our own formatted list. You know, sit still looks the same way as before. We have searched my title search by author. Okay, so let's click, Save. And now we've got two views. So as you can notice, you can actually create second and third views when you're taking the same content and displaying it in different ways, and you can copy a lot of the work you've already done by simply creating new displays. So that is it for this video, you're going to finish up by making the grid format 10. Building the View: Grid Format: All right, So now we've got our own formatted listing table. Let's finish up by building our grid view. So this time, instead of going add page, we're going to clone from another one of our displays. So I'm gonna go to the UN formatted list because just kind of knowing this in advance, the grid is gonna most look like Caron formatted list. And instead of like I said clicking, add, we're gonna go over here. What's his view on formatted list? We're gonna click the drop down here now let's click Clone. It's Now there's a second on formatted list. We're going to change the display name to grid, make this easy to see and for the page settings. So the recommended books is gonna be recommended Books Dash grid with a menu setting Tolson be recommended books desk and like the table make it just like that. And now for the format. If you remember, unformed at a list was still linked to Master said to be very careful here. No way say all displays except over written. So this is just letting you know that one of the other displays in this case the table has over in this, we're gonna go to this page override. We're going to pick grid now. The key thing for the grid are the two settings and here, number of columns and alignment. So a grid kind of creates a certain number of cells, and it divides everything up that way. So in this case, I want to do a three column grid. We also have the alignment. Horizontal vertical. So what this is, is, let's say, like there's nine items. It'll start at the top left always. But it will either star for the top left and go down or go right depending on with the pick horizontal. So that's right or vertical down. Let's see here. Everything else is fine, I guess. Phillips single line. What will happen is if it has something empty in the grid, then it will create empty cells that you don't really see them, but for the HTML, it makes a cleaner, that's all. It's asking for their these Air s CEO items because it's going to display it in a table format. If you don't want a table format in HTML, hang out for the thieving section. When that comes up, I will show you how to do that with Bootstrap using the views. Bootstrap module. All right, Senator, for no, I'm just gonna say a play. So, you see, we got our grid in italics here, and let's just roll down, see what this looks like. So now, instead of he's being an unformed did list one after the other, you now see these air in a grid. Let's go ahead of this. Make it two columns, twin grid settings, Number of columns to. So I have side by side and then down. So I want to do three, and I want to leave the same searches we had before. But there is one thing I would do differently. I want to cut down the body size because it is kind of big for this display. So grid settings, number of Columns three. And now for our body instead of 800 characters. Let's start with 600. All right, so you can see we have choice in envy. 10. This way of building and this looks pretty good, just as it is. When we get to view styling, we'll learn a little bit more about how to style these, but for now, this is what we can do just straight out of the box. And as you can see, once we have the views built, loaning it to the other displays can be done very, very quickly as that finishes up this video. Already, however, we have one last video, so please stick around so that you can take the course challenge and make this yourself. 11. Epilogue and Student Challenge: we have built our view. We have built our displays. And before we get into the course challenge, let's go ahead and save this and appreciate our work just for a moment over Click Save and we're gonna click our clothes box and jump out of here. As you noticed, we know have the recommended boats, cred, table and then just straight up recommended books. Let's look at him. So now we've got our search. We've got everything formatted just like that. We wanted to. I also have a table, and we have our great. So if you've been following along, then you also have this as your first view as well. With that in mind, here's I want you to do we're gonna do a course challenge. I want you to modify this view in any way that you choose. I want you to add your own books before your recommended reading list. I want you to take a screen cap of it, and I want you to post it on to the skill share course page under your projects. And let's see just what kind of reading list we can get going as well as let's just see what kind of books we get. I'm looking forward to it, and I'm looking forward to joining you on the next course as we mastered ripple views.