Drupal 8 Theming - Part 09 - Introduction to Views

hello this is even for watch and learn comm and in this episode we are going to continue taming our front page specifically we are going to add some dummy content to it so you're gonna learn that we are going to see where the dummy content comes from it comes from views so you're gonna learn a little bit about views and we are going to see what our options are regarding theming that content so let's get started so first of all we want to add some dummy content to our page of course you can go to content and click on add new content and then click on article or page and edit manually but we don't want to do it that way so we want to create let's say 50 or hundred posts or articles so to do that we are going to go to drupal.org and search for this module called devil I will leave the link in the description below for this module now we just have to install it so I'm just going to go to extent and click install new module so installing modules on Drupal is not as straightforward as on let's say WordPress but it's not that hard either so what you need to do you first need to find the module that supports your version of Drupal so our is 8 point something so actually it's eight point zero point zero right now so you have to install it or you don't have to install but you can install it from an URL so to do that I'm just going to go to this page right here see Drupal 8 point X and just click here actually right-click and copy link address okay and just going to go right here paste it in and say install and Drupal is now installing our develop moral okay enable newly added modules so click just that and it's going to take us to the module page and now we can see we have some core modules okay we have some core experimental and we have this development modules so this devil module isn't only used to generate new content it has a lot of development tools that you can use when developing Drupal themes and when developing Drupal itself so if you were developing modules for Drupal this module will actually help you pretty much but what we want from all of this is just this devil generate so we don't want to enable all of these modules or sub modules whatever you want to call them we just want to enable devil generate so let's click here and that's about it just click install so after that has been installed now we have some more options in our configuration page so if you go here configuration we can go let me just see development performance generate so we have generate content so we have generate content generate menus generate terms generate users and vocabularies we will talk about all of these generators later but for now we just want to generate content so let's just click here and we're going to choose an article so we are going to generate some articles how many nodes would you like to generate so I'm not going to generate 50 of them but you can do I don't know a thousand of them if you want I'm just going to gonna generate five articles then how far back in time should the nose be date it so remember every piece of content in Drupal is called the node so that's why it says how far back in time should the nose be dated I will just say let's say one month ago maximum number of comments per node I will leave I will just say ten and maximum number of words in titles four okay that's it and settling with your notes I will just live English and click generate and now the devil module has generated our content if we go to content we can see that we have some articles right here so this one this one this one and this one so we can even filter them so type is an article and just say filter and this is all generated by devil generate as you can see this is just lorem ipsum text so what would happen if we go back to our site open it in a new tab as you can see we don't have that hello message welcome to drupal right here but we have our our actual articles right here so this is great but one thing we still don't actually understand right here is where are those articles coming from so as you can see we have them right here but if we go to our page - - front that HTML data twig we can just we can see that we have only page that content right here so now we are going to talk a little bit about views because this content right here comes from views if we go to our administration page right here and click on structure and you will able to see at the bottom of this page that we have something called views right here so these are one of the most powerful features about drupal there are a way for you to create queries let's say list of posts or some content that you can display on your pages we're going to be dealing with views very often in these tutorials but for now I just want you to know that there are way for you to by just clicking with the mouse create some kind of queries or lists of pages or route articles or whatever you want to display on your page views came in two core of Drupal with version 8.0 and it used to be a separate module so you always had to install it on your Drupal and if we go to views right now we can see that we have something called front page so our front page we can edit it and we can see what it does so right now it is displaying a preview what would of what's it going to be doing right here so if we go to our home page we see we have only three articles right here and we have only three articles because if we look at this filter critic criteria right here you can see that the content has to be promoted to the front page to be displayed in this list so if we let say just change that so is promoted to the front page terrorists let's say no and apply to all this place now what we can see is that we have our contact page about Us page movies and that we have three actually just two articles because the three articles that are displayed on our front page are promoted to the front page and we said that we didn't want them to be promoted to the front page so contact about us and movies aren't promoted and these two articles also are aren't promoted so they are displayed right now so I don't want it to work that way so I'm actually going to leave this yes and apply for all this place and actually let's try to display all of our articles on our front page so I'm just going to go right here and click remove ok let's see our list right now so as you can see we have all of our articles and we also have all of our pages but of course we don't want pages we just want articles so I don't want ages listed in this list right here we have them in our menu let's say what would happen if we save this so let's just save it and refresh our homepage and as you can see we have contact about us movies and then we have all five of our articles we don't want that we just want to display articles right here so we can go to filter criteria click add and search for type so we have entity type type so we have type ok click apply all this place and we choose one from this so the note type is and then we just say article you can choose an operator also so is one off is not one of so we can also say is not one of an click basic page so it will display all articles but this is a much more logical way of doing it so we can say is one of article apply on this place okay so publishing status is yes of course the note has to be published languages we don't care about that and type is article so let's just save this and we can actually check out our preview and as you can see we have all of our articles displayed right here okay that's great so we already saved that if we refresh our homepage we can see that we have now not three but five articles on the home page so I'm actually not a fan of this display because as you can see we have this title then we have submitted by then we have all this long content right here this is because the teaser field for all of those articles is this long so I don't want all of this to display on on our front page so let's take care of that with views so I'm just going to go to views and say show and then I'm going to save fields not content and click apply all this place we can add the sub separate right here or provide default field Roper elements we can just leave that as it is for now okay and then I'm just going to let me just see what display master uses fields but there are none okay now never mind that so we're just going to add some fields it's giving us this error because we didn't add fields yet so I'm just going to click Add and let's say title title so title for content error missing help okay I'll just save that and let's say it it is going to be plain text and that's it let's just apply to a little displace so if we check out our preview right now we can see that we have just the titles for our list or our query okay next thing we are going to do is we're going to add content so just let's just write content and let me know not content but body so we have a body filled in our article so body click YES on that and click apply all this place okay so I don't want whole body as a whole content of the body field to be displayed I just want a trimmed version of that field so I'm just going to say formatter trimmed and let's say six hundred characters limit will be for displaying our posts so after 600 character we will get three dots and read more so apply all this place and as you can see now we have just our title and a bit of our content so about 600 characters okay and let's a a link so linked content so read more link apply all this place and text to display we will say read more of course you have for all of those fields you have many more configuration options like style settings rewrite results and so on but we are going to be dealing with that in the later episodes so for now we're just going to change this text to display and click apply on this place and as you can see now in our preview we have just our title a little bit of text right here and read more okay save that and if we go to our front page this should look a little bit better now well it's not that bit better but it's a little bit better than all those giant list of text of course you can just go into your CSS and style this as you want it used to be that when you made the views out put something on your page for you it was Divi Divi itis or people called it that way because it outputted a lot of lot of HTML so but in Drupal 8 that is a little bit better now so if we go right here you can just see that everything is a just view 0 and then you have field title field body and views field note so it's pretty easy for you to actually style this so let's just try it but before we do that which we are just going to go to front page view and right here on content title we are going to click here and save formatter to be let me just actually see customized filled HTML HTML element is going to be h3 so apply all this place and when we save this you're going to see that instead of this just being a span it's now an h3 tag so we have h3 class feel content okay so that's great so we have an h3 tag right here and this this one is infill content P okay so we can just tell this as we want I'm going to actually add this to another container and I'm going to call it article list article list just that we can reference it better and then I'm going to go to my homepage that a CSS and I'm just going to do that article list h3 a is going to be color of 4 6 4 6 4 6 so that's kind of dark gray color Thanks the creation is going to be none so let's just save this and see what it does to turn this okay and okay looking a bit better right now and I'm just going to say let's see this right here so if we this is called views row so article lists that use Row is going to have margin of let's say 40 pixels on top and bottom okay so looking a little bit better now I'm just going to add a line height to the P tags to be one and a half okay so that's looking a bit better and let's see for this read more link if we go right here we can see that it's just an H ref tag so but it's called views field view node so I'm just going to copy this views field view note a it is going to be color red and decoration none okay and that's it so we quickly styled this list of posts of course you can do many more things with views as I said we are going to be using views throughout these tutorials but I hope this was a good introduction for you or how to display views and so on okay so that's it for this video I hope you guys enjoyed it thank you for watching please like the video if you liked it you can also follow me on Facebook or on Twitter or you can even subscribe to this channel and I'll see you guys in the next one thanks gran for watching

Channel: Watch and Learn

Views: 27,775

Rating: 4.952239 out of 5

Keywords: Drupal 8, Drupal (Software), theming, Drupal 8 theming, Drupal theming, Drupal Views, Views, Devel module, Devel, tutorial, Drupal 8 theming tutorial

Id: Ngm1jBVmqzk

Length: 21min 29sec (1289 seconds)

Published: Tue Nov 24 2015