Drupal 8 Views For Beginners - How to Build a Dynamic List for your Website

welcome back with our recipes content-type made we are now going to look at how we can make a list using Drupal's views system of each recipe that we've created so so far we have four recipes if you would like to learn how to build this bootstrap based website from the ground up using Drupal 8 join me on Skillshare for two three months by clicking on the link in the description that we made from the recipes content type so let's take a look at views so as always let's hop over to Google since we're introducing a new topic let's type in Drupal 8 views and let's click on the first link if you're interested in learning more about views you can check out this link here and at its core what views allows you to do is dynamically fetch content from the database so what's happening when we are creating recipes from the recipes content type is in our database there's a spot for each one of these fields okay so there's a spot for nutrition facts for photos for directions and those spots are all tied to an overarching recipes category or table so for each entry so every time that we add a recipe it goes into the recipes table and there's a spot in the database for each one of these fields well with views what we can do is we can say I want to fetch all of the titles let's say of recipes so I want to fetch overnight oats vegan waffles vegan crepes strawberry oatmeal breakfast smoothie and I just want to take the title and maybe a few other of those fields that we just saw you know maybe we take the title the image and the description which is what we're gonna end up doing and let's just make a list out of them right so that's what views allows you to do without having to program and that's that's kind of the key part is Drupal is providing an incredibly powerful tool within an interface a user interface so that you can skip having to know how to program really and so for you really all you have to learn is how to use views so I hope that kind of makes sense it's a large large topic let's take a look at the recipes page and so what we're going to do is create a view block and place it in this page so let's start to do that so under structure let's hover down to views and add new view let's name this view recipes list and under the view settings we will make sure that content is checked and let's make sure that we are getting all of the recipes content we will not look for pages or articles so perfect so this is going to tell the view which content type to look for and you'll notice here you can use this for a lot of things for users blocks files taxonomy and even more as you begin to download additional modules and the last thing is we will skip create a page because we already have a page made for recipes so let's do add a block and we will make this an unformatted list of fields and that's really important so make sure you have fields checked and then let's make that zero or let's just make that blank it should be the same if you go zero or blank but once you have all that let's do save and edit okay and if you follow it along here you will now see at the bottom of the page a list of all of our recipes that's really cool all right so what we're trying to do here is create a sort of display preview list so that the user can click on a recipe they're interested in looking and get more details so in order to do that let me actually just pop back over to a recipe that we already have created so let's look at overnight chai oatmeal and I think what we'll do is we will take the title the body will skip the directions we'll skip the ingredients nutrition facts and the photo okay we'll take those fields and we'll stick them all together so that they come out into a nice list all right so like I said here we have fields right and then within this views administration window we have an option to add fields of course we already have our title here so let's begin by adding our first field so let's look at photo let's check photo and let's also get the body which is like the description in ours and then let's also look for the nutrition facts cool and we will add and configure fields so you can see it'll go through each one that we've checked here so we're looking at the body field and we'll just keep everything default for right now nutrition facts same deal and for the image let's make that medium and hit apply that should work out okay so then if we scroll down here looks like there's an issue with my images for some reason I will make sure to check out but you can see vegan waffles is correct there so we have our title we have a description and a nutrition fact and it's looking pretty good so the last step here is to make sure that we save it out and okay good that was just must have been an error all the photos are back here and cool that's looking better already we have a list of our recipes that we could then use throughout the website the last thing that we will do in this video is let's add it to the recipes page so here what we're gonna do is take that view that we just made and place it right in the body so in order to do that we will go back to our block layout window and this is familiar I think so down here in main content because that is where we want to place our view block on the recipes page we will click place block and because when we set our view up we chose to do a block as opposed to a page if we type in recipes list that will show up here in this modal window as an option so let's select a place block and we will uncheck display title and then let's save that out and let's make sure to click Save blocks at the bottom so now if we go to recipes you can see that we have a dynamic list of recipes from our database and just to show you if we went and added a test recipe that that would show up so we will skip that nutrition and I do not have a photo for this one but just to show you here and then we go over to recipes right perfect you can see that that has now been added to our list so this is dynamic now let's go back and just delete that piece of test content before I forget great okay now there is a problem if we go to about we have our recipes list if we go to contact we have a recipes list all of the pages now have this list right which is not what we want in this case so how do we fix this well if we go to we could go to block layout or we could go to this pencil icon and select configure block I think we'll do that and now under this visibility section let's go down to pages and let's say that we are going to show this block for a listed page so we'll just make sure that recipes is on the listed page window and what you can do is separate these by a line break so if I wanted to make sure that this was on recipes and contact I could do that but we will just keep this on the recipes page so with that updated let's hit save and now you can see that it has stayed on the recipes page and let's see if it is also on the menus it is gone so that's pretty simple but powerful and this is just kind of giving you an idea of how you can utilize views to make a dynamic modern website alright so that will conclude this video in the next video what we are going to do is work on cleaning this up so that it looks more modern and it looks like bootstrap I'll see you in the next video

Channel: StarHunting

Views: 458

Rating: 5 out of 5

Keywords:

Id: Sd_a5CaBE4g

Length: 11min 3sec (663 seconds)

Published: Wed Feb 26 2020