Drupal 8 Theming - Part 13 - Kint, Arrays, Twig, Foreach, If

hello this is even for watch and learn comm let me just take a few seconds to brag a little bit about my site if you remember from the episode zero zero I presented this site and I said I wasn't very satisfied with the navigation of it so I fixed that yesterday so if you go to all videos right now you just get all videos as you can see site is pretty fast and the feature I was actually implementing and I'm most excited about is this series so you can view all the series on the site and if you click on the series you just get this page with all of the videos currently in that series and you can just click on any episode of the series to get the new video as you can see the page isn't even reloading it just pulls up the videos on the video description for that series the site was made in middleman I'm very happy with middleman it's currently my favorite tool for building websites it puts out just the static version of your site so the site is very fast I also have a middleman series right here so if you're interested you can check it out and I think that's about it I'm still not 100% satisfied with the site I still have to do some stylings and so on but for now I think it's pretty ok actually he doesn't even have it's not fully responsive yet actually it is responsive but it's not made for mobile phones very well okay never mind that let's get back to Drupal so in this episode we are going to be talking about tool called Kent we actually installed that tool before we just didn't enable it and we're going to see how we can drill down into some variables that we get from Drupal and how we can use the data that we get from Kent to display it on our page and maybe a manipulated a little bit with twig and so on so let's get to it now we are going to enable Kent but before we enable it I just wanna tell you what Kent is so hint is a debugger for twig in Drupal 8 it's actually debugger of rapper which makes our variables and other things we get in Drupal site that we want to see it makes them pretty so it makes nice little boxes which you can collapse or an uncollapse to see what the what data is currently coming to your node or to a page or to a block and so on so to do that we just go to extend and we already have Kint we actually got it when we install the well module so to enable it you just have to click on the well Kent and devel so you have to enable the well module for Kim to work properly we go down here and click install once that is finished we get two modules have been enabled davell and development okay so now we have Kent if I go to my inception node right here we can see all the stuff we did before but let's go to our editor and just see what is this content so what this is of course some kind of a variable but what does that variable consist of as you can see for every field we want to display on our page we have to write content that field movie poster content that field director and so on so what is content what does it consist of to do that we just do double curly braces do Kent and then we write a name of the variable that we want to display on our side so we just do that okay save it and if we go to our page and refresh it we can see that we got this pretty box right here and as you can see it's an array and that array consists of five items when you click on it you may have to wait a little bit because that content variable is actually very big so it may take some time for Drupal to actually display it it's taking a little bit of time right now okay so now we got it as you can see it's pretty big I'm just going to close this body and as you can see we get all the fields we have on this page so we have these links we have body then we have field director field directors field movie poster and so on so as this is very slow I'm not going to click on any of those links it will take some time but we can specify what field we want to display right here so that should be a little bit faster so let's say we want to display this field director and see what that consists of and I'm just going to be as specific as possible so that we get the smaller array as possible so I'm just going to do items so we want to show the items of the field directors of the data that is actually stored in that array and then we do get value so we get we want to show the value of this field director okay save this if we refresh the page right now you can see that we get much smaller array with just one item in it so if we open it up it says we have this array with two fields in it called value and attributes so we don't have anything in attributes but we have a value that is a string and it's calling Christopher Nolan okay that's great so let's say what if we had an array actually filled with with multiple values so we can go to structure content types and then manage fields for movies and I'm just going to go to this field actors and click this field type so since we added some content to those movies we get this message so there are some things that you can change for this field but there are something that you can't so for example you can change the maximum length so it's always going to be 255 but you can change the number of allowed values so I'm going to say unlimited and save field settings okay so I think this is much better representation of that field actress because of course we don't have only one actor per movie we have several so what we can do now is just go to Inception edit and we can add some new actors so as you can see we already have one I'm just going to copy out the rest from IMDB so we have Joseph gordon-levitt okay add another item and we're going to Ellen Page and just paste it in and save and keep published okay so if you go down here where the actors are as you can see we have those actors out put it so let's see what does this rail look like so if we go right here and instead field director we say field actress okay fridge this as you can see we get an array with three values in it with actually three other arrays in it and we have Leonardo DiCaprio just below it and Ellen Page okay that's great so what we can do now we can actually print out all of those names in our node if we want to do that so how how how would we go about that I will show you right now since this is a variable actually this is a field with multiple values we can just print out one one value from it so let's say the first one so to do that we will just do double curly braces and the content content that field actual dot field actors and then do items and then do get value and this is a and this is a twig filter so we just do this and do first value okay so this should print out Leonardo DiCaprio if I wrote this correctly so I'm just going to save this go to my page refresh it as and as you can see we have this right here so also I can print out the last value so I just do last value and that would be Ellen Page okay so let's say we want to print out all the values of course the field template already does that for you right here and it's doing it in the if we go to templates and fields and then field you can see that it's doing it so if is multiple it's doing it for item in items so it's using a for each loop to print out all the values that the field has but if we wanted to do that the hard way we can do something like this we can up we can open up curly braces with percentages as I said before this means that the twig should do something not output something out but do some logic so I'm just going to do for actor actor in so this is our variable actually this is our array so we are doing a classic for each loop and we're going to put out a variable called actor in this content field actors items array from this array so I'm just going to close the forage loop right here and for OK and to output the name of all actors we just have to do as we have a new variable right here so in this for each each loop we get this variable actor so we just do actor that value of course it has to be in double curly braces for the twink to output it on our page so we just do actor dot value and that should be it so we just save this if we refresh the page right now we should get LM page Leonardo DiCaprio Joe Joseph Gordon Liu it and as we still have this last value right here I will delete it so that we don't have Ellen Page before that and I'm just going to put a br tag right here so that you can better see it and as you can see you have Leonardo DiCaprio Joseph gordon-levitt Ellen Page so that's the way that you can deal with those variables if we had attributes right here we can print out the attribute for this okay so let's see what else we can do with this newly acquired knowledge so let's go to our fields right here and add new field and just select it to be let me see what would be good for us so boolean so we're just going to have a boolean field and the label of that field is going to be show poster so don't do we want to show poster or not and save and continue and the number of valleys is going to be just one and show poster and default value I'm just going to put it to be on all the time so I'm just going to save these settings okay so now we have show poster field and if we go to our inception node right here we can see that we have this on right here it doesn't display show poster for some reason I don't know why okay I'm just going to set it to be on and publish it so let's see what we get from this show poster field so I'm just going to get the value of it and the field name is show field show poster okay and put it right here so if you don't know the boolean means just yes yes or no so that's the that should be the content of our field and I'm just going to put it in a can't save it and see what we get right here as you can see we get one array array with one value and the value of that array is just one so one is on and off is zero if we go to edit this and turn off this and if we check out a raid right now so you can see the value of it is zero so what we can do right here we can control if the poster should show or not so what I'm gonna do now I'm going to open up this do something tags and I'm just going to say if and I'm just going to copy this change the field actors to be field show poster ok items get value and we want to get the first value of course there is only one value but since this is an array we have to do do it like this so first first value equals one and if that value is equal to one then show this movie poster else so we're just going to do else right here else I don't want you to see okay and then we can just I mean I don't know how you would do that but come on okay and if okay so what this is doing right here is checking the field of show poster and if it has the value of 1 then it will show this code right here else so if it has the value of 0 since we have only two values then it will display this message I don't want you to see movie poster I'm just going to put it in h3 tags and save it so let's refresh the page and see what we get ok so now we get I don't want to see movie poster ok if we edit the page and turn the show poster to on save and publish as you can see we now get the poster so that way you can use skint and get the values of your fields to show or don't show something or do some other kind of logic in your templates ok so we are going to stop right here I hope you guys enjoyed the video please follow me on Twitter or on Facebook like this video if you liked it if you have any questions comments are down below so you can comment either on youtube or on my site also don't forget that all the code that we used right here is available on github link is in the description below thank you guys for watching once again and I'll see you in the next one

Channel: Watch and Learn

Views: 21,930

Rating: 4.9087453 out of 5

Keywords: Drupal (Software), Drupal 8, Drupal 8 theming, Drupal theming, Drupal 8 theming tutorial, tutorial, twig, theming, Kint, foreach, if, array, Foreach Loop, Theme

Id: -udFtu5LS0A

Length: 19min 48sec (1188 seconds)

Published: Sun Nov 29 2015