Drupal Live Site Build (Part 1) - Project Set Up, Bootstrap Card Component using Layout Builder

I'm pretty much leave everything as it is for now but I think we are ready to go alright perfect alright so the topic for for this evening is I'm gonna start building a website from scratch and this is fairly well it is kind of uh none scripted but essentially I'm gonna build a site from start to finish and it's going to go over multiple nights okay he may not be all done this week about over the next few weeks I'm gonna be building a site from start to finish and the whole process of setting up a local site to hopefully publishing it somewhere I'm not quite sure where I don't really know where this is going I haven't planned any of it other than what I'm going to build so to show you what I'm going to build let me just quickly show you right here okay so here is a bootstrap template and if I go to end don't worry I will put in I will create a blog post about this um and there will be show notes about it but if I go and check out the live preview here is what it looks like now I spent a few hours but and a half an hour unless you say I don't know over-exaggerated looking for a decent theme that can really showcase what Drupal can do but also to show you what you can achieve by using the layout builder and other tools in Drupal so we're not going to perhaps build absolutely everything in here because this this theme is a example of how to do slide shows how to create create these pop cards how to do these other type of cards I believe these are cards as well but then if you go up the top here you have a services section you have a contact section with a forum you have four different portfolios that you can do to trust me there's a lot here absolutely a ton of stuff you can do so there's a lot to do here and we may not build absolutely everything but we'll see how we go the blog is pretty good go through here I'll show you how to build all of this in Drupal now I haven't actually built this I haven't tested any of this out this is gonna be a a process yes of Darren saying uninstall yeah layer builder has changed there are some limitations and I will talk about the limitations of layout builder it's not perfect no system is there are things you just have to work around and there are limitations with it about two weeks ago I did a tutorial on using paragraphs and radix where I think it's time now for me to figure out how to do all this using layer builder so but it's not perfect but you know nothing in Drupal is so I really don't know how this is gonna go but what what I hope for but but what I hope for viewers to get out of it is to kind of see the thought process going through on building flight things like this and it's gonna be long but I'll try and cut everything up and I'll to give you time codes they can jump into individual sections because most people will be watching this after the fact and yeah so so I'll do my best to kind of make notes show notes after it so even if you are watching this live or if you are watching this as a recording you know a year from now looking the note video below there should be show notes or something anyway let's jump in so here is here is I don't know we're not doing a Drupal 7 site this is Drupal a Drupal mine's coming out in a month so yeah sorry about that yeah so this is all Drupal 8 by the way and so the first thing we're gonna have to do is set up a local environment now there are many ways to set up a local environment you can use MAMP you can use ramp you can use I'm not you can use any more acronyms xampp docker whatever you want what I've chosen is lando now if you google search lando you'll probably get yet not lando from starwars you've got lander norris the formal one driver but I'm not talking about him Lando dev you'll go so there is a docker based environment called Lando and me being on a Mac docker is notoriously slow I mean what decal is this let's be honest um but I've been playing around with this lately and I'm pleasantly surprised how fast it is now I do hope that you can all keep up because I'm using a lot of CPU cycles live streaming this but I hope my MacBook can handle it and it is a docker based environment and already gone ahead and set stuff up alright so there's a quick question here about using cast or used Drupal 8 after Drupal 9 release yes so Drupal 8 will still be really still be maintained for another 6 months now I will mention and I will I will mention this about Drupal 8 in Drupal 9 Drupal 9 is just is essentially Drupal 8 with deprecated code removed so you should be able to upgrade easily sure okay air quotes it should be a simple upgrade so yes that's all I'll say research it yes as Darrin says in a chat docker is just half speed on Mac that is true I have experienced that myself but I've been pleasantly surprised with with Lando and the thing is though with docker it's about your setup it's about making sure you don't have too many files shared and synced and trust me I'm being these close of buying a Windows machine because I still unfortunately I just can't use Linux because I I need the Creative Cloud to do video editing and with my videos and things like that so I can't just use that and I don't want to machines anyway I'll be I'll start off by using Lando okay so the first thing we're gonna do I'm not gonna install it I've really gone an installer go check it out I hope everything works during this life thing but what I'll first do is I open up my terminal and the first thing you'll do is you will simply download download Drupal so I've got my trusty command here so what we're going to do is just download Drupal and I'm gonna put it in a directory chord oh no it's not correct da to dd8 BS so that means bootstrap not the other BS build so we'll give that a question sorry oh yes somebody's not asking can they ask a question yes go ahead this is a live stream so it's all a relaxed environment and yeah it's best to ask questions when composers run English composers very slow that's nice that's nice I'm fair let's just give that a second so hopefully that will download pretty quick I have my Internet's not going slow because the internet in Australia is notoriously not the greatest my waitin it's not that bad I've been pretty lucky with it but uh but hey it's uploading and I can see myself on other we can assume restream yeah everything's working everything is ok here we go everything's downloading which is great and chickened out strange okay perfect all right so now we have drupal so we have drupal in this DHBs which is exactly what i want and now if we look in here we have a copy of Drupal nothing fancy at this point okay this is just a downloaded version of Drupal now what we need to do is set up a lando so I'm gonna just copy/paste some of my commands now the one thing about lando is that what I can do let me just pop this in now I'm not a landowner expert so look so look at the documentation but essentially once I've downloaded Drupal with composer all I need to do is run this land oh c'mon Lando init's and then you won't be prompted but but you can also just add in things yourself so here I'm just setting up the sauce I'm giving it the recipe of Drupal 8 the name is d8b abs build and then the web root ease web because there is a folder where but then he says fall don't really know what that means anyway let's hit that so this will just set the in it's perfect alright so here we have a question what are the best and CMS ways of deployment to production well that we can cover in one of these videos I wouldn't mind pushing this up to Pantheon but yeah that's a conversation for once this website that we're going to build is built okay so now what I'll do is let me just quickly load up my trusty editor because it needs time to index let me just set this up so that we have phpstorm and what I'll show you just so you can get a good understanding of how everything works where is it now that's Ari come on come on here we go so I use phpstorm as my pool of choice and I forgot to change the font size one long change font size 24 yeah I think 24 is a good size so everyone can see can you see that I think everyone can see that let me just check my I actually have a standard-size that I upload at and that is not it content eBay 24 yeah 24 at that perfect okay all right so let's just jump going back into my notes all right cool all right so a few questions here is paragraphs better then layer layout builder they are two different things even though everyone likes to keep them the same but in my opinion they are two separate things paragraphs and I've been meaning to write a blog post about this paragraphs paragraphs yes can be used for what layout builder does but layout builder just allows you to build a layout paragraphs allows you to group fuse together so if you have a comp complex data model that needs to be attached to the node so for example if you if you create a car content type and you want to have different different engine types or different engine specs that type of data has to be attached to the car so the car entity so then you would use paragraphs for that think of paragraphs use use paragraphs to group fields okay that's probably my best explanation layout builder is used to control the layout now yes in the past before layer build our paragraphs was used for absolutely everything nested galleries and crap like that but it gets very difficult to maintain trust me very difficult to maintain so paragraphs now is great for grouping fields but we're still at this funny point where layout builder the UI fillet Abdullah is still a little a little flaky I still prefer the I still prefer the the workflow the layout the actual arm where is my OBS just give me one sec okay yeah I still prefer the UI for paragraphs but that's kind of the very basic question answer to your question I would I do plan to cook to actually do a proper video to explain the difference but that's for another time okay so here is Lando so when you do Lando in its it just generates this dot Lando file and I've got group will call in here so now what we need to do is let's go back to terminal and just type in and we go clear us you can set up the topic and type in Lando's start and hopefully everything just works because the images docker images have already been murdered anyway let's see how taxing my computer gets okay this question here will we be showing us how to use get with Drupal in this series oh I guess I can yeah I mean using gear with Drupal is the same as using git with anything else actually no that's a great idea um I could I could actually upload the code base for this onto github that's a brilliant idea let's do that now okay so to answer your question about using git yeah so what you first want to do is grab this examples dot get ignore and then just remove example and what you want to do is you want to ignore these files make sure you ignore all of these for these things especially bender as well and [Music] is also I believe in knowed packages what is it the node one so what I'll do is I'll leave that one in there and also creates a dot what is it get ignore at the front and I'll put in vendor Binda those walls I don't want that to be stored okay few more questions how do you panels displace we see ICD with get lab runner you ask a lot of questions here mate so we are going to be using display suite in this example panels know what I'm gonna be using panels using CD CDC I at this point you have to agree with that sorry again this is more of a site building we could later on look at doing this with some Pantheon why not I'll try I can figure it out where you push in to get labs and then get labs pushes it directly into Pantheon there are there's doc there's documentation about that all right so now I've got a head let me write has this started up we had it's nice let me just actually let me go ahead and install Drupal and why isn't this working arts gave me one second a Webroot all right we need to change this so one top tip make sure this web root is correct or else where is this let me bring this up all this happens okay would be yeah so this happens which isn't the greatest okay so as a company would be great to have a Q&A session watch them maybe something like an organized D s bad practice a saying display sweet Brad bad practices Mitchell okay need a now fix that up why is that not working now the reason why that's not working is because this Webre didn't change without where it changes what I want out whatever all right let's do Lando Raj is it rebuild so is the is display sweet bad practices or you think display Swiss bad practice and at the end of the day see I'm not gonna get very I don't have this ideology about what's perfect and what isn't at the end of the day your job is to build a website and display sweet I've used it on many websites it does the job honestly like yes and you'll see if you keep watching I'm gonna be doing things through all through the UI for one bootstrap component but hey it does the job and it works perfectly fine and the most important thing is when you think about when you want to get into the whole ideological discussion about the best way of doing things one thing about Drupal is that you want to try and do things so that when another Drupal developer picks it up they don't have to spend time searching for things and displace where in my opinion is a common standard for a lot of Drupal devs so if it works it works alright let's test this out don't don't oh wait what's the port number was 800 now is it going to work don't don't turn a there we go all right so let's just go ahead and install it don't know how long it will take my CPUs getting taxed all right let's go through this and then we can quickly set up a github oh no sorry no get so with Lando you want to pop in I see Buchan up going nuts anyway with Lando you this is pretty much the credentials username password database they're all here so just the 8 d 8 d 8 the host is database so what you want to do is type in Drupal 8 Drupal 8 Drupal 8 but then you want to change the host to database and then click on save and continue and now let's just leave this to do whatever it has to do and I do hope it's quick it was quick when I wasn't live streaming Oh anyway alright so let's go here let's set up what is that gets you know done that's Pauline what is it all right let's look on to slow alright so now let's just go ahead and add everything I just want to make sure it doesn't add too many things right so I just give it one section yes I understand you can use docker on Windows but I'm not on a Windows machine you it's gonna be a bit annoying if I get that question every single time yes I know I can use docker on anything else and I did bring it up that it is slow on Windows but that's the situation I'm in right now and okay so now we're running gits which is great everything's in there you can see it it's all in there which is perfect let's have a quick look and just make sure it is all in there unless unless you want to get me a Windows laptop that'll be great but yeah I don't want to run multiple machines alright I think this is all ready to go did that get added no that's not that's ignored which is great so perfect okay cool that is all ignored so now what I can do is first yeah yeah yep first commit done okay now we are there alright so we've got that set up and now to do is have a look and make sure everything is nicely committed and then have a look at what we are going to build wait a minute he shouldn't have committed we should have ignored Drupal core anyway whatever deal with that later and this is still going all right so all right so let's have a quick look at what we are going to build so the way we're going to break it out is well today I want to get this these components sorted out okay so these card components bootstrap what is it for card components so if I come here let me get the latest docks and then go components and then if I got a card so we're gonna be building this type of component right here and we're going to use we're going to use a bootstrap theme called bootstrap 4 because that one works best with layouts builder that's the most compatible as far as I'm aware with layout builder and yeah we're going to go ahead and build that stuff this is nearly finished trust me doc is much faster but I'm a base just said I'm live-streaming everything and chrome is also using up a lot of CPU as well because I've got all the videos running and so and then the so let's have a look at the bootstrap for theme Drupal this one in my experience is the best one when it comes to integration with layout builder I've tried Berio I've tried bootstrap I've tried radix and there's probably some obscure bootstrap based theme that doesn't have the word bootstrap peanuts I don't know about it because I always get comments saying or or I'm surprised you haven't tried out this theme that's got a very obscure name like radix quads you know radix was actually a bootstrap at all just recently and it's got like 10 in store stuff of course I'm not gonna know that stuff so yeah we're going to be using bootstrap for as I mentioned it's got a bit integration with layout builder ok so we're finally coming to the end this is going to be our drupal site that we are going to be setting up there's going to be fun and then now what we need to do is just wait for the our case we do go so thing is let's call it Drupal bootstrap let's get a fake example email address and let's just leave that as it is turn that off and let me put this to my timezone and we can't save and continue okay so we have a working site for now and so here is our working site hopefully something running too slow once it's up and running perfect okay good it's quick enough for me okay so here is our working website so the first thing we need to do is I need to make sure because it's always locks it down yes it does so let me just on lock these folders and then we need to download a few modules so just give me one second everything up stocking finally a few more things so what I'm going to do now is I'm going to utilize the local settings okay because that allows us to use these development services which then allows us to turn on twig debugging and so let's go ahead and do that chucking development service sorry this example dot local leave that set up the way it is what I'll do also is go down in settings dot PHP scroll all the way down that the remove that and I will switch this configure so that it sinks into a file system and also put in config slash sink so that I can do rush configure export and wonk almost got a whistle but I didn't want to annoy people you just downloads what else what else would I ask I think that is it for now I'll keep oh I won't turn off these back end stuff because everything go dog slow typing drush oh wait let me have a look and see Lando uh actually I'm Kirsten see Lando Josh because there is drush integration but I want to know Russian nine or eight or ten I don't know that's we will eventually sing okay let's just just do ad rush CR and make sure that's all working because now what's gonna happen is here you're gonna see settings on local get get picked up that gets chucked in then then this settings gets used so automatically error level is verbose so it's nice and it tells us the error level so when I get a white screen of death or just those stupid messages saying it occurred are they useful and then we also turn off CSS and JavaScript aggregation you can do a whole bunch of other things but one thing I do like is also it switches this stuff skip permission hardening because I think that's what sets the default to read-only which is very annoying all right cool so cash clear and so now first boot up or take them second or two cuz it's clearing all right done now let's get to work all right now again this is kind of like a meant to be a very community orientated build so if you do have any questions please yes all my live streams will be available just come back to the channel yeah yeah all livestreams will be available let me just armed yes see ya there will be a blog post as well following this but no the livestream will be available straight away and then give me a day or two for the live are for the actual show notes because even I don't follow videos and often when you're following along you want to grab snippets of code don't be in the blog post cheese yeah well it's not work for me what is it nearly 10:00 to 9:00 at night anyway alright so let's go ahead and download so I've got a few things to download first thing we need to do is download so let me just close this all right clear so I'm gonna type in composer require spell it's require Drupal /a space week Drupal slash fueled grip and I'll show you why later Drupal slash bootstrap or is the theme I'm just trying to think is there anything else I hope you're with our bootstrap now that's it so this is gonna go ahead and download I was actually thinking that while wild composer is downloading I can play like quake three because I found out that and and this actually shows in my age because you know or you know streamers play games of course I did I did find a web version of quake 3 and it's an it looks brilliant like he looks as good as the day when I when I when I begged my mother to give me money to buy 64 Meg's of RAM 64 Meg ok of RAM I mean this machine I have now has 32 gigs of ram but I remember begging my mother to get 64 Meg's of RAM you know Pentium 2 3 3 Pentium 2 2 3 3 yeah try my age I don't remember any way such as well for this so this is just downloading fuel to grip now field group is pretty cool ok it allows you to feel groups and I'll show you when you use them and alright so this is gone it's nicely downloaded alright so now what we need to do is let's jump to extend and what we're going to do is simply install so we need to install the space way layout builder Media librarian cuz we're gonna be using media library because that I use media library oh what else ah Sh sorry filled group and let's just leave it at that for now it would tell me if I need to install anything else I think that's it yeah okay that's one because what I'm planning to do so my thought process so let's have a quick look students at this alright so I mean creaser so you can see it let me move this oh cool this will be a block type so we're going to create a block type chord card okay and the card will have image image field title field body what body comes with it and let's just leave it at that we can port link in now we'll leave it at that and then to create this grid here we can use a layout for that it would use a display suite layout because display suite now has integration with layout builder and I'll show you what I mean mean about that because I didn't know about this and this is freaking awesome okay this place way allows you to add classes to regions and you can and you can define layouts and all that and before I don't know when this was put in but but normally you'd normally you'd use display suite in the manage display page and you just do everything through that but now you can use it in layout builder which is awesome and it really does change a lot of things so let's go back here everything's been in stored layout builder display sweeper bar go away okay so we've got that installed and now what we need to do is we need to install our theme so let's go ahead and install this boot strap up but we're gonna create a sub thing because it's always good to create a sub theme and I feel like we're gonna be modifying a whole bunch of stuff so I think in this set of videos it's all about just setting everything up and we will be able to get some site building done straightaway and what I want to do yes he's gone come here set this up so four come here beam's custom and what I'll do is type in web Bosch bootstrap for dub dub bootstrap for and this will go ahead and it ever happened don't don't turn or what the hell happened there beam's custom I swear this work worked when I tested it out ok Weizen I'm not sure why it's not displaying errors which is a bit annoying as it should be and let's turn on whereas a error handling I thought that was meant to be on anyway let's do that again now let's get scenario we can just copy things out so it's not a problem okay so it comes enzyme just make sure his path is correct custom yes yes yes bootstrap bootstrap okay Symphony file system class not found yup an idea what's not working okay let's go back here and okay you let us go to performance maybe now that is very interesting it looks as if none of my changes have happened so quickly Lando SSH I let's have a quick look shall we side it's there all right all right let's do something radical Lando stop and Lando start and let's see if this does the job all right so it's coming through which is correct and what I'll do because this stuff should automatically be getting picked up unless Artyom - sitting salt local I skip Harding's to work in there okay alright let's just keep this go a little bit up again and it's not what is it it always switches for a DAT okay Paul 8080 let's jump back on okay you all right this better work see the one time I'm like all right cool let's do a proper proper setup using da car and it's already crapping itself the creation of that our system earlier on so Marshall what's K so maybe there's opcode cash maybe permissions nice on permissions you can't find it can't find it so it's complaining I have a feeling maybe that drush command isn't in isn't connected directly or isn't working for some reason so let's just give this a second to work perfect all right now come along here of course it's not working 8080 alright ok I think we're there now or maybe that could it be any at the Dras command anyway let's give this a go and see what happens go to appearance sittings and they come all the way down here for bootstrap of truth nah still crapping it off do a bit of debugging let's have a look you you okay so let me just bring this in I can actually find its component that's interesting why kind of find it so he's part of Drupal with a safely our system you a triple uses up comparator update you all right you all righty all righty now this is Williams double-check that Symphony our system file system it is not there that is funny that is it is not there let me check my other files just to see I followed the exact the exact setup come on Tommy where is it let me just get back and have a quick look at the other setup and that's what it's come back here yes bender and symphony and symphony file system is not there okay so it's in here why the hell is it in here alright let's have a quick look here bye all system core file system that's all there okay so what was a court file system all right quick search so that is some reason it is not crawling up okay all right now what I want to do if this is broken on this then chances are this is going to be broken so let me just quickly check and see if you file uploads work we're going we can work around it it's not a problem okay image I'm along here all right cool all right let me just upload a file where is mine I'm going to upload one image here and let's see if this actually works if it doesn't with stuff get in there all right cool card one and then let's just hit save all right that works right bugger it doing it different way and I figure it out later all right cool so to copier all we need to do is this copy this across and paste that in there and I'll call this one what is that good strap for and not done add that to the what is it the Reaper I will sort that out myself and what I will do to save a bit of time I did make a copy of this so I'll just grab these from another project that is let me just actually I'm just closed this off quicker and easier I'll just copy it from this project cause I know it's working okay so this is now I've got a copy that's gonna copy no packages as well great anyway so what it's gonna do and I'll show you and then I can run I'll be able to run npm install because we need a compiler sass all right so we have that there and then now you can see the node has been added on what I need to do is also add that to the get ignore so now what is the gist Nerdist node modules give composure I sorry no here to be storm a second to figure everything out you gotta laugh phpstorm it's great but then has to just go in and index things at the wrong time like now what is it node modules there we go but that's going to ignore it I believe that's it that's all it's required to ignore let me just how quick along always forget how to ignore yep no there we go yep node modules so from that standpoint that off call go all right so now we've done that what we need to do is I've gone ahead and and it'll be seen this is war or working so I went ahead and I'll I'm just remember this I went ahead and set up laravel mix and in the in the show notes all point to a link cause I've written about this before on how to set this up but essentially all we're doing here is we are are grabbing this style from the to trap for then we're simply compiling it and that's it okay but this allows us now the benefit of using this booter up for theme is that you only really need to use it if you are going to be overwriting templates I have a feeling we will be overriding templates we will need to do that so that's one thing to be aware of I'm feeling we will be overriding templates so now with all of that set up and let me see if this actually works and this actually compiles so I've got this set up go to web themes custom done that so then it's npm run dev just gonna go ahead it's gonna run at safety actually compiles do the turn and then yep right sway all right so that works so now if we go to appearance and then click on let me go - here we go I'll click on this boot up four which is my one and then all we need to do is make sure the blocks are set up correctly there are npm run dev all that does if you go in your node packages it just runs this script so anything that's under scripts and dev you have to you have to type in in npm run and then devil or npm run and prod and that's it so that is part of the setup of using larvae weeks ok so I do know that if we have a look at our site now it's going to look kind of broken so we still need to configure a few more things okay kind of broken so the first thing I need to do is just save this page I know that because then it saves a configuration and then it should fix it nicely a nice actually let's just use this page for now so everything is centered beautiful beautiful and then if we go back to appearance and I'll turn off logos yep don't logos get getting away and what is it I'll set it I'll set it to this because I know this was set up in the last one just to give us a bit of differentiation between things all right so now we need to set this stuff up these blocks you can say here these blocks are just in on weed State and so now if we go to let me actually do this actually that's a terrible example let's just wait and set it up structure block layout then if I sit branding there navigation there let's just remove form and I will also remove actually I think I'll need that one in there and I think now it's gonna look a bit better what's putting longer still there alright let's get rid of logo I really don't want logo there because it getting away but I do want the site name ah here we go there we go so now I mean open this up in a separate tab well but sorry you all right and if I resize okay it's all working this way all right so now we have a basic Drupal site yeah kind of oh that was fun anyway I need to look at see why this lando didn't download the file system package anyway I'll have to look into that and figure it out anyway so now we need to start building things out so the first thing we're going to do is build out this component so this is a card component if we have a look er where is it and here okay oh let me pop it out like that so this card component is pretty straightforward yeah pretty kind of you have a card card image I'm sorry yeah a card image sorry body card body class so we need to now generate Drupal's mark up like this now the tricky part about Drupal is that there's always 10 ways to do things in football of course you know that's that's I'm sure I'm sure all of you can agree to that like you know that's you know anything about Drupal and you sometimes you know work with developers that I'm very specific or you know has to be done this way it has to be has to be done this way I'm just gonna show you one way how to do it and again a do it that way don't do it that way but I think the good I believe the best way to learn something is to often see how other people build things and that's where I am learned a lot about Drupal when I saw other people do things then I was like wow awesome I don't know you can do that especially when I when I just started programming PHP I've no idea what PHP will do I didn't understand programming you know I don't have a formal you know computer science background and so with this component we're going to try and do it as much as we can in in the backend and then with other components like a slideshow gonna have to write a bit of custom code well with Drupal projects I tend to avoid writing as much custom code and and I try to use and I try and I try and use off-the-shelf parts you know and what I mean but off-the-shelf parts I just mean modules that's it I am NOT against writing custom code well kind of I am sometimes huh well you know Drupal 8 code can be very verbose since sometimes you spend so much time just figuring out which which class to know which which service to passing via a dependency injection and the right markup and all that I do enjoy writing react code I have lately anyway but that's different I've got nothing against PHP I'm not one of those people that complain about PHP I was laughed at I remember one time for telling people that Drupal's built in PHP but you know PHP has stood the test of time and this was 12 years ago and he's still around anyway enough ranting so let's go ahead and build this so the first thing we're gonna do is because we are using layout builder and we're not using paragraphs because we're using layout builder we're going to create a block type now layout builder allows you to create and modify layouts and then every component that goes into the layout or a section in the layout is a block now in Drupal a block often is something that you control through structure layout and you modify it through here okay but now the concept of block can be anything you know a block can be a field on a content type it can be explosed as a block now technically in code it is a it is a block because I'm sure that I'm sure there's a block plug-in which creates a derivative of our block and so on and so forth that's getting low-level don't have to worry about that but just understand that a block is a piece or is something that goes into a region and it's not just blocks that you control from the layout on this page and you add to a region okay you it all makes sense once you see it in action alright so first we're going to do is go to structure block layout and custom block create a block type create new block type will call this card I've call it whatever you want but I'll call the card um defines what is a huge trap card component I will probably spill things wrong so apologies go to manage fields and you can see that there's a body filled already awesome that's exactly what we want so there anything we need to do is add in a media field okay now for people who don't know media field is part of the media module use the media field from now on never just attach an image field directly to it unless you have a specific reason and the reason for that is because the media field allows you to attach different media types and that's kind of like my role now a image an image field and file field should only be used on the media types unless you have a very specific reason to use them the only reason why when you I can think of is if you want if you only want to allow people to upload that image and that's it okay okay so I'll call this one image because you can only support an image all right say field settings perfect and then we'll go ahead and add that in okay so all I've done is I've configured that next thing we need to do is put in a title so if you do have any questions please a sky we'll be going through this as quickly as possible because this is kind of just a raw off the calf chat all right could a reason be having users that sure - options I'm not sorry Morton I don't quite understand your question they talking about GroupWise too many options anyway I'll put this in let's make this title mandatory and I think that is it let's just leave it for that let's just leave it like that description do we need a block description I think we do okay let's move title their body actually let's change let's get rid of the body field because it's body with summary I don't want that and I will get rid of this one and let's call this one um I'm trying to think I'm trying to think let's let's try let's try not be smart with that actually let's just make it description yes I'm sorry there's a question I mean if I have registered users uh nodes were they yes so with so with the media you can reuse so yeah the good thing about media is that you can reuse the assets across a whole site and that's the that's a good thing about it whereas an image fueled as soon as you attach anemic crap or put in the wrong field sorry about that yes so with with the image field as soon as you if you use an image field and you attach an image to that image fool you can't reuse it because it's essentially attached to the image rule and that's it media field allows you to reuse things but there is an extra step alright let's go to text text formatted long call this one description respond that right so Dido and then let's just leave that as it is that's one all right reorder things okay perfect now we've got that set up now what we need to do is we need to go to structure and then we need to switch on layout builder and so what I'm gonna do is I'm gonna create we've got to kind of create things at the same time like give and take give and take so we could figure one thing jump to another thing then configure another thing and then jump to another thing that's that's how you're really doing Drupal because you kind of need is set up the foundation of things alright so we go let's go to custom content types marriage form this Manish managed display sorry and let's switch on first of all the full content View mode this is what I do I always use a for content view mode and the for content view mode is used only on the node /id part and but the problem with using and I and a bit of a bit of our rant right now now I try to avoid using the default View mode especially on content types content types because the default view mode is the fallback of view mode for any of these view modes and I do apologize for saying view mode too many times but let me increase it so you can see it the default view mode is used as a fallback for these so so if Drupal comes along so a perfect example of this okay is see this search index search index View mode is used when Drupal wants to index your content so if you use the standard Drupal search module Drupal will go ahead load up all of your entities using the search index view mode grab all the fields and render em and then and then index all of the mark-up that is coming out of that view mode now if search index is disabled like like this Drupal will then jump over to the default view mode and grab that and then render everything using the default view mode and sometimes you can have issues where if you remove particular fields that you don't want to be displayed but you still want them to appear in the index and so on and so forth you might have issues so my rule of thumb is if you're dealing with the full content view mode I always use just full full content and just and just leave default as a fallback and just leave it as it is now a few versions ago of Drupal you couldn't actually select allow each item to have its own layout customized unless you were on full content unless this has changed so I'm not quite sure so just use for hunting that's all I'm saying listen to Ivan and use for content may go life will be so much better so if you haven't looked so if you haven't played around with layout daughter before you'll see that on the manage display page we have these fields here now with layout builder we have a very different UI oh look at this yes amazing isn't it so it looks very different it has you as you are fully aware so it looks very very very different and what you can do is you can go here and modify things as much as you want but I'm gonna do something crazy and we're just gonna not modify it from here because I want this layout to be very basic so here okay we don't have anything in here because we are going to use layout builder is kind of a page builder and this is what I was hoping lab you I would eventually become even though you can be used to modify layouts it can also be used as a page builder and the reason why we can do that is if we go here we have selected this option okay allow each content item to have its own its layout customized and yes for Morton yes layer builder is part of Drupal core and it is a module you just search for layout builder and search for and you're done yeah is part of core so because we have checked this that means we can create a custom we can just create a basic page and then modify the layout just for that particular entity okay but once you've started customizing so just imagine you have fifty pages and you've customized the layout across all 50 pages then if you come here to the manage display page and modify anything here this change won't propagate to all those 50 other pages so just be aware of that once you customize the layout on individual content create it as content okay created as content so that's just something to be aware of so now if I go to content add content basic page let's search for a supporting now we'll call it home page we'll put in some effort okay we have nothing here right Oh got some spam on twitch as a twitch comment whoa becoming famous by followers god spam absolutely everywhere these days huh funny anyway okay so we have this year empty page there's nothing in there but if we click on layout now we can modify things okay so I can go ahead and add in a section okay so I can say all right I want a one-column I don't know it's called this body ah I'm terrible at naming things to be honest that's quite a body whatever and then I can add a block into that section and then you can add things to it okay so you can add in so if you have a body filled on this on this content type you can add it you can add in any of the custom fields and these are blocks and that's why it's be confusing at first what the hell is a block we can see that this is all coming through okay now now if we so let's go and let's actually close this off so what we need to do is I wonder if I can actually let me go ahead all right let's do this let's just call this main we're going to be rebuilding this a few times and then adblock add custom block you can see up the top here but I can't see it you can now select a different block types I can type in now I can add in these blocks so let me put in card one now this is just the card the title this is a bit confusing because this is the block title that's shown in the administration this title will be shown to the end-user so just cause one block one as well and then we can upload an image or we can select an existing one using layout builder now you can see the UI for this is not perfect but it does the drop in it's better than most most themes then they were reporting you know card one description okay so I've had a decent and let's go ahead and click on save now one thing to be aware of this is something that you that you're going to get well you might figure out or my can ask because when we created this block can we reuse this block all right so I'll give you 30 seconds to put in your answer now just joking no you cannot reuse this block if it's been added to this particular layout because this block is considered an in-line block it cannot be reused so now if we go to structure block layout custom block you won't see it here but I could come up come here and create a card block and then select and do whatever I want with it but these inline blocks cannot be reused so that's just something to be aware of so when you're when you are creating these pages just stop and think it's like okay do I want it to be reusable or don't I want it to be reusable now chances are there is a there is probably a module that can sort this out for you Ivan look for a but a look for it okay so we've done this and then now if we so we've done all this I'm just trying to think think think think think think think think think alright so now what we need to do is we need to turn this into a car so we need to generate this markup like so alright let me just jump back in here and let's just have a quick a quick look for typing Lando I'm still still finding while this isn't working give me one second I think I know why it's not working just give me one second here because I'm not sure if this trash is connected properly ah so why there mmm all right what I need to do I'm just go ahead and [Music] ah just give me one second so I think I need to download I think I need to download rush locally that's what I think is happening so I am just a few changes here because now if I type in where am I composer required drop dribble dribble and dribbles like mere muscle memory all right so let's go ahead and say I would like to say maybe maybe that firewall system is only available with trash I wouldn't be surprised if it is a I will not be surprised if Aaliyah zone now I'll just give this a second so I'm just downloading drush locally Jass I just want to make sure it's all working come on work work work work work give it a second so as downloaded composer let's come through to come along and all right let's let's leave that so now what we need to do is I want to turn on tweak debugging because I want to we need to change this markup to match where is it in one second so installing here we go no installing from there while system here we go here is fall system so I think there's maybe a bug in that theme where it just assumes fall system will be available but maybe fall system is a he's only used shouldn't be using production huh anyway that's good tonight for the future so now if I type in crush CR that's not working one said I need a lot of be logged in do of course so Lando brush info so this should return the site Oh No was a status is in for status I don't know all right so we got that [Music] okay so now what we need to do is we need to turn on twig debugging and so what is twig debugging well if you ever looked this markup you'll see amazing markup Drupal generates the most beautiful of markup that you've ever seen and the annoying thing about all this markup is that you don't know where it's coming from or which layout is getting used which template is getting used speaking about markup I remember using panels in Drupal 7 and you'll be like so me literally like about that much of like Divi Divi Divi Divi Divi duty mind you panels in Drupal 7 was very powerful I'm not I'm not I'm not complaining about it I know I know people either love love or hate panels and it's funny like one of what am I like rudest comments on one of my rudest comments on YouTube is about panels like Oh was there is one person out there that was so angry that I present that I did a video about panels in Drupal 8 that he had to get to you know vent honestly it was it was freakin hilarious it's like sir sir man panels mind you this was before you know the current situation that we're in so I guess priorities were very different back then but panel was in Drupal 7 the most powerful ah I knew it this is different Lando probably in stores and rush eight instead of now I'm using Drudge nine okay now okay now wish I could study some live this live stream again well anyway top tip install drush locally if you want to use it with Lando anyway back to where we were as it has mushroom going yeah everything's still recording cool still live no dropped frames all right sweet hope these people still watching I haven't scared anything off Chuck something into the comments if people are still watching it's saying sixteen people by Marshall if that's correct anyway I love to laugh talking to myself anyway so now what I wanna do is turn on Twigg debugging and so if we search for so the best way to do that is to just Google twig debug Drupal 8 and then go to the first results wait am I even on this one oh there I am that's that that's what I had here somebody just here AAF yeah a CDF well for me it's technically for me it is this because I type in two for AK haha so it's AoE AoE was it a oh you because I didn't actually type in QWERTY I type of type I type into vorak that's a that's a secret that I like to keep so when people jump on my machine when it's even unlocked they start typing in and they like what the hell is this if you don't know what Dvorak is it's a it's a different keyboard layout and it's done in software so all my keyboards are still QWERTY but I just I've just been using it for like last fifteen years so I'll just know straight away anyway so we're gonna do is turn on twit debugging so to do that what you need to do is grab these parameters grab this tweak config and then go into your sites and then make sure you've switched on this settings not local very important because if we go to development but services not yellow property near okay and then now again drush CR I'm sorry Lando drush CR now there is why after typing Lando is because I am on the host machine so Lando if you type in Lando then rush CR it actually goes into the host I started into the container and then does CR and then now if i refresh everything works haha we should see comments that tell us where the template is getting loaded from oh sweet here we go so you can see here a whole bunch of comments that get injected in and yes so so why yeah Firefox does some some funny things with the comments and he comes up as read and listen bad and but if you do it in uh Chrome I'm saying forgot correct of course I've got Chrome open but I've got too much stuff running in it you saw so let me see if it's actually works hope you saw sis where I work us wait he'll go yeah so you can see that chrome shows that a bit better mmm and also what's up with chrome if you inspect it it also shows you the order in the comments it actually shows you the line breaks but in Firefox it doesn't but if you just double-click on it I'll show you the line breaks I like to use Firefox now is my dev tool because here Firefox is pretty good and also use Firefox what is it developer edition all right enough talking Ivan let's get to work okay so now what we need to do is we need to modify this markup ok and so what we're gonna do is we are going to use display suite to handle majority of it pretty much night and I point I'm set of it and so so let's go back to actually let me go here close this close this okay let's go to structure layout custom block and then block types and then let's go manage display on the card row now block types are suitable entities so they will get a managed field to manage this managed form display and manage display same as any other type of content type because it is affordable entity you also have media types of food or entities as well so that will have MANET form display manage manage manage display and also manage yeah manage display manage form display now when it comes to view modes for like blocks I just leave it as the default I'd really don't turn on any of the rest of them now you can actually use layer builder okay you can use layer builder to modify any type of entity so no talk to you if you want to do it alright so now we were going to do is use layout so I think how do I do this last time I'm just trying to think let's use a column and then this place way allows us to add my recent rappers classes the spiced wit allows us to add classes into these particular regions so what I'll do now go here and I'll adding this arbitrary class which is card which is which is required God God okay so now come back here all right so now we can select card so let's go ahead and do that and then if we have a look maybe I need to save the page again Oh No okay we can see you can see this kind of an outline come coming out you can just see it you probably can't see it but I know if I go here scroll all the way up where the hell is that come on need to find the proper deve here we go let me zoom in a bit more so you can really see it has added this card class here now of course group was added in all this extra stuff but most importantly it's a discard class all right so we've done that now what we need to do is we need to clean up this markup so let's remove these and let's deal with title and description because if we have a look the title and description need to be wrapped with a card body div okay now how do you do this without running any custom code wall you could use a module cord field group which allows you to grip tilt hence the name for gripper so if we go to here you can see your group here and then select HTML element and we'll call this card body and click on save & continue' and then we'll adding this extra CSS class and we'll call it just card body and then simply place the title and description below it and then click on save and now description will be wrapped with a div element with the class card body let me just double check that inside correct your cities all right good okay so we've got that working now if we go and refresh all right we have this card body all right we're getting there getting there but we still have all of this markup like yeah all these ton of markup here and then we also have this markup here as well now I think we can get away without putting in this class because if I inspect oh wait no not that one inspect this one you can see that there is card text but it's not nothing's getting actually picked up so I'm not sure what it's getting used but if you have a look here card title you can see that yes there is our margin bottom so we're going to ignore this putting on putting this class on because the reason for that is that the P tag that comes out of that field is controlled by the editor so there's really no easy way for us to just slap on a slap on a class in the first in the first paragraph around it so we'll just live all maybe I've got a feeling if there's more towards duplicate node oh no there isn't yeah so look why sure anyway let's just leave it for now we don't we don't need it but what we do need to do is we need to wrap the title tag sorry the title field with an h5 and the card and the time starts out at the class chord title so let's do that now what we need to do is jump into another screen all right so there there is a company you're saying there are modules there's a module that adds classes to fields yeah there's there's multiple modules but I but I'm gonna do it with with displace weight so if we go into another scream let's just go into structure display suite and then to our settings always forget and then check enable field templates so this allows you to control the fuel templates will switch and modify the template at the field level so now if we refresh you'll see this new option throughout the template and then if I go here I can go absolutely crazy and do a full reset so we only chose the value but I want to choose expert and this ha ha this allows you to change in the markup and put attribute on on the actual field item the third items so there's another diva that wrap support items and then there's an outer wrapper that wraps the fuel items and fueled item crazy yes let me put in NH 5 and then what is a card title on what is it card title oh look a car title now now this is powerful but the tricky part is if you have to conditionally if you have to conditionally add or remove classes that's one thing to be aware of so yes this is great if the markup stays the same and you don't have to change it but if you have to conditionally say adding card title to depending on a bit of custom code then you're up you know shi ite creek that's one thing I've discovered with this when I had to actually do that for a job it's a very messy form old tar for changing arrays so it's kind of like Drupal is great when you go when for one particular use case when you want to modify the content but as soon as you want to add in a bit of extra logic and a bit of extra this and a bit extra that then you need to either write custom code or that all go in a whole other different direction so let's just change that title that is done so now if i refresh should see there we go so now what's happened you can see straight away below card body we have now the card title and the easiest way to sort this one out we don't want this diva round it will actually it doesn't really matter but we'll try and keep the markup as simple as possible let's just remove let's just do reset fool race it and then this will show us a full reset and we'll just show us the P tag which was added in by the actual text editor okay so we're slowly getting there now we need to put these in and we need to when we need to display three at a time that's one thing I want to achieve today I think that's going to be it for today just displaying three at a time okay so the best thing we can do for this okay so let me just put in well okay let's go lay out let me let me have a look at my notes but did play around with this so putting them okay so if we go here what I think we'll need to do you so I'm just trying to think the best way of doing this because there is a funny bug of course is always a mug with layout builder so here we can drag and drop which is fine but I know if I add in a bootstrap a bootstrap layout some reason the drag-and-drop functionality does not work see it just does not work and then if I what if I was to move these yeah yeah it's a funny funny issue for some reason the bootstrap layout you can't drag and drop with the other layouts you can anyway we can work with that it's a it's a workaround that we need to sort out but we can we can work with that we can work with that because it's going to save us from writing custom code see it's one of these things you know gather around people now we know it's not know it's time for older man ranting about Drupal because well this isn't a bad thing I'm just saying like sometimes you need to pick your battles with Drupal you can do something very quick and easy but he may require require an extra step or two or if you want to do it the proper way and save yourself two steps you have to spend probably half a day or two a day to achieve it and write a crap ton of custom code so that's the choice you need to make when you use Drupal it's you know that's that's that's a choice in you need to make now at first I was thinking to implement this this design where is it uh if we ever will go mark up let's have a look at the mark up anyway let me have a sip of the water but I'll just quickly show you I'm trying to move my water away because he makes a creaking noise okay so if you look here you can see that there's a row and then you have a column and then in that you've got the actual you've got the actual card now we can do that okay that's that's not a problem but what we but what but the other thing we can do is we can use these card layouts and what we can do is we can use or is a card grip and on a card grip we can use the card deck so to use these layouts you can see you have a card grip you have a card writes a card group what is that card groups card a deck and also card column and to do that all you need to do is just wrap the cards with a div with a particular class and that's it so that's easy for us because with displace way we can create arbitrary classes and then add them to Regents simple right so what I'm gonna do I'm gonna do with a hacky weight and then over the next other livestreams we'll do things different ways I want to do is grab card deck so where is that okay come let's go here about classes sorry and then I'm gonna come in here in boots are in this place wait I'm call this one card or maybe I already know card a dick call this one card dick not desk dick okay so now what we need to do is if we did you did you did you do I'm trying to think I come here one column layout and then we add the custom class class full layout which would be card deck to add that him still looks a little funny all right we can do with that but then the annoying thing is that we can't move stuff into it okay I have no idea why don't ask me why the idea I don't have really any ideas but if we click on move and then you select the region you want it to go into you can simply say then move all right okay so yeah cool now what I want to do is let me go ahead and quickly save this it's still gonna be what fixed okay just just in his up alright it's still gonna look a little funny so now let's go back here click on place block my legs Ichi and then go to custom block and remove that card block and I mean let me just create another card block to card look let me add it a media no no no that way where's my Boulder of test images there we go to to cut you and then I'll put in a car - car - description I sound like Richard better um this is looking nice okay all right don't worry about the way it's looking we'll fix it up and let's put in card three card three card three at card again we can select an existing card and this is why I want to use media library use it use it okay use it and check that in yes the UI is not that good now one thing I will mention as well is that a lot of the themes out there in my experience especially the bootstrap themes at this point don't integrate that well with this system tray this side thing that appears out from the side so so in my experience it's only been bootstrap for this boot up for theme that worked well with layout builder the rest of them have kind of work so hopefully over time that will get fixed up so I'm just putting card three description that's good check that in and we are done all right hit save save layout and let's look at all of this okay okay okay okay sound quickly let me I sorry I need to zoom out because sometimes these comments get reading the way all right so you can see here now we have this so we have card dick awesome but then we have this block is this deep with this class of block layout inline block card blah blah blah div which is wrapping it which is I think causing a problem because if we remove move this one up and then let's just move this one so I'm just moving divs around to sit crap don't work that do it move that one up as well and then if we move this one up and then let me just remove node delete that one delete this one and delay this one okay you can see that scrap yeah receiver one sec wait what do you see um responsive let me bring this up because the images aren't responsive in bootstrap so responsive images other thing is that I'm J it is still here flawed in which fluid is that it oh yeah all right okay so that just adds that okay cool all right so now if we do a quick fix oh there's a few things we need to do here is his class link done and done okay Hey look at that it's starting to look like card dick and then you can resize it whoo-whoo-whoo-whoo really look at that awesome now of course we've done a lot of things in the in here and then of course if i co refresh it's all just gonna go to crap anyway okay so there's two things we need to do first of all we need to get rid of come on inspect we need to get rid of this where is it where are you where are you another one here we go we need to get rid of this div now luckily for us we have twig twig debug installed so we can see where this where where this actually comes from so this is coming from Class C Class C templates block and then / block okay let's have a look shall we classy name it's got there and then templates was a block tweak I believe this is it so now what I'm going to do is I want to do something that normally I want to tell you not to do but let's just test it and make sure now probably need to refresh and I need to clear the cache all right so what I've done is I've essentially just removed it and to not spend time I'm just gonna go in there rip things out see if he fixes it up if it does the job then we're gonna override the template and happy days all right come back here refresh and then a student worker why did that work I you classy block you no all right so a quick look at this Oh i Chuck this in which is check the scene Oh Bo you let's just refresh this again sometimes what happens with decays at the file syncing between between the host and the container sometimes stops then let's just refresh all right come on mando don't fail me if this is the case and we have to switch back to local site the old-fashioned way alright let's just have a quick look so where's this web what was a cool beam's you or maybe I'm just doing it in the wrong place who knows probably all right so quick vlog No you you yes he's not changing you all right because you find our typing away let's just do this all right well let's just grab it and override it I know that's it yeah I think we have to switch over for the next live stream to a local version simple so we've got that in the back with the inline suggestions what I'm gonna do is I'm just going to grab this so that that's the template so then ago er where is it so where's my stuff books prayed for him here cord templates look you and then you file twig then if I go back to here grab this but I will simply remove this stuff and then I'll type in let's have a quick look and this the safety section for copying across all right it's there and now if I go web themes custom trap and their templates templates easy boys and this always modifying it in the wrong place no way all right really annoyed why this is why this did not work okay let me just copy this again so copy from rip path let's do this again just double-check this you all right yep okay I'm just going there and then if I really saw they cat look theme block people up there my and that's none of its here all right so it's weird I've got no idea why it doesn't matter face maybe something up Coco casual something anyway whatever it's it's in our one which is great so Lando brush could smell that Lando because it's getting pretty late here I just really wanna get this last design or last part done [Music] and I'll be better prepared well actually should I be prepared for the next livestream now who knows all right so now if we refresh it should oh there we go so now if we have a look here and look at wait where's what do we don't want this image oh yes image we need to fix up as well fix up image so let's scroll all the way up so block content card never go up you'll see here nothing is loaded up but you'll see that the block inline-block - - card is so that means now that this template would only be used on the inline block and the car and the block type has to be card so only be used for that that's a bit of a win we don't to worry about it causing problems with other other with up with other setups ok so I've got that sorted out now we need to sort out the image because if you have a look at the image it produces well how long have we been gone for how long 40 minutes my god anyway if you have a look at image you'll see that we have the image tag here but then we have a file item then we have a file items div then we have a article where they are inter and an article element so we have like three or four levels because the media field is when is it the media field is an entity reference field which then references the actual image and so goes down so what I'm going to do is I am going to go to structure after to stop touching my face anyway structure image and I will create a new view mode well I didn't need to go to manage view modes you know and we'll call it bare not as in the animal as in bare empty yeah I I suck at naming things honestly aha struck with any Drupal and what we're gonna do is we're gonna switch on the bear View mode we're gonna go to one and then just hide that and let's change here we go lay out the field templates to reset and so this now shall be very bare in sir no pun intended bear now you've come here we need to refresh this page and then come along here and select the View mode so because this is an entity reference field we can select which View mode we are going to load up load up the referenced into TIA and then click on save and then go there hit refresh and it should be a little better so it should literally be image and then we should say oh well first need to probably just save the page and then now if you're coming here why the hell isn't working Oh yes I need to change this one so they're now so they're on this image field we need to change this one to reset so so just imagine this okay I guess it just imagine is how many levels do you have you have the image fuel which has a wrapping items wrapper then an item wrapper then it's loading up an entity which has an entity wrapper like the article wrapper around it then the image field has a field items rapid Eve and then it's got a food item okay singular not plural rapid Eve then you finally have the image and we just want the image now there is another module which I've used in the past and it's I think it's maintained by friend of mine no but it's a DS triple des chains yeah it's maintained by only Roland's Venus being used I used it on a project and it was awesome it allowed you to essentially grab fields from referenced content so instead of doing all of that what I could do is I could have just got the image field from from here I could have got the image field from the image media type through this entity reference tool it's a shame only this many people use about it it is an awesome awesome module awesome module all right so I think that is it so last but not least I just hit save click on that refresh what do we have oh come on sometimes it's tough gets to be funny right inspect element go to image and we should just say oh my god it's still there so image yeah to something so beer oh we need to reset this one I think this is going to one you okay after view sorry about these people sorry about this dun-dun-dun and see you can see why people take a long time to build triple sights male image we should say card right at the top yes okay so we have image so card image card body and then now let me just remove this you what do Russia cash the other all right now I'll show you the markup give it a second another second now we'll come along here and finally what do we have let's reload everything and then if we look at the mark-up we can see that one we need it for these little contextual things then we have card image body and then card title awesome it's getting there it's getting there and we haven't written any custom code oh well no sorry we have we have well now my fault we've overwritten the template alright so now what I want to do is put in these image fluid on the images so to do that I wore trying to think weirdoes now I can't be lazy lazy I just door through CSS right you know what let's just do it through CSS Oh to hear overrides now let skipping for the entity is custom crédit folder was it card SSS and card i J whoa all right I'm just putting something stupid in for now I just I can see that it's working so don't worry something that just no I'm just doing stupid things yeah so what do you see isn't their car with a card yep so now if i run in npm run run watch let's just do that give that second hopefully it's going to pick up and then so now every single time we refresh or make a change all right cool oh sweet speaking up alright done so now let's go back to our card what is it extend dot IMG fluid is it is that the right markup and it's gonna it's gonna complain if it's wrong nah nah hey I'm front-end man I'm totally front-end there we go I've gone from Drupal just Drupal dev to fully on my fourth I'm a fully stack fully stack front um no what is it full stack now I'm full stack there we go full stack fuel my friends will be proud I can write CSS SAS full stack now okay so now you can see here so all I've really done is instead of trying to screw and this is and now gather around for another storytelling about Drupal especially when you're trying to integrate it with systems like this now yes I could have spent the time to figure out how to add the class to Drupal but sometimes you end up writing so much code here that's it Darren truth fully stat bro sometimes sometimes it's just not worth writing code to figure out which pre preprocessor to use to add the particular class and if it's for basic stuff like this if you can easily target something and use you SAS use the power of SAS and just simply extend and add it to it and you're done problem solved life goes on and there we go so now if we open this up in I open it up in another Brow's are let me just move the mic a little bit close I'm leaning back alright so now if we let me just bring that down and resize there we go so now you can see everything is nicely resized of course when it gets to mobile you can see you have that bit of white there on the right and that is because the width is greater than the actual size of the image whereas here the width is smaller than the size of the image so we can't do things like we can tweak the image view mode or something but this is working pretty well and the good thing about this is that it was pretty easy to configure and set up but to a certain extent oh yeah so alright so we did a lot here now I need to remember and document it all my god so we did a lot here and let's just have a quick look and see what we're gonna be building next not right now cuz III need to go to sleep so [Music] let's close this alright so I think these are just cards right yeah see they are just cards as well oh one thing I didn't do is I didn't put this image top ah let's let's fix it up now sorry remember we're full stack man we're full stack all we need to do stained image was it OMG top car top let me say this actually works did work so now this no now image top you'll just see a nice little like radius at the top hey there we go there we go I fixed it up image top image card yep it just puts a little radiuses that's all what image top does Hey there we go front end front end tick you know awesome before stack again we are absolutely full stack okay so I think that is it for now I'm just trying to see what else we're gonna be doing next I think maybe uh I know people want this freaking slideshow if if you want to tell me what you want me to build next in the chat just hit something like do we want to build this slideshow do we want to build these these pages or this type of like portfolio using views and then using like relator pay getting the reality related projects using views do that but what is the sexiest thing to do you know slideshows people off slideshows I mean in my 15 years of built on building websites nothing has changed you show a client a slideshow they go absolutely crazy for it you show images they go just beside each other boom boom they love it or a massive hero image they go crazy for that stuff who cares about how awesome your tests were uh what else we're gonna build this I need to come up with the solution for this you may not go for with but I brought a solution for it so let's have a look at the Carousel why not care I can't even spell carousel carousel there we go have a look shall we this is gonna be interesting anyway we'll look at this next week now I need to put everything together and so yeah these okay so I think that's it for this evening thank you well if people have actually watched I hope this has been useful this is this is one of my normal webinars where it's all planned and it's all perfectly scripted at times and all that it's just yeah just build things because I haven't actually because I've realised this me being a like a Drupal dev for the last few years I haven't actually built a Drupal project from scratch voice I come on kind of halfway or you know coming towards the end of a project and I'll finish like features and all that but actually just build something from start to finish that's going to be fun anyway so I think that is it for us everything's fine I'm looking at my dock on all that everything's small Dockers running a bit better today it's just this quick I know it sounds a bit slow anyway I'll see if I'll stick with docker maybe with Landon I might change over to something else anyway just a quick plug like I might as will so if you want to learn more head over to web wash dotnet I've got a whole bunch of tutorials here I will post this stuff as a tutorial got a whole bunch of courses as well and yeah check them out most of them are free all them afraid essentially except the master class that's all free but yeah anyway that's it for me and I'll catch you all next time take care okay next to stop streaming recording stop the strain all right thanks a lot down you

Channel: WebWash

Views: 25,779

Rating: 4.9067054 out of 5

Keywords:

Id: iwJW18NA_S4

Length: 116min 49sec (7009 seconds)

Published: Mon May 11 2020