Craft CMS Tutorial - Full Website (Part 2) - Image uploads, rich text editor, and matrix fields

hello and welcome to the next video in this tutorial series so the first thing we're going to do is start to make the home page editable in craft cms so the first section of the homepage is this hero section and all it is is a title and a background image so let's start with that so the first thing we want to do is create an image upload field for this background image so let's go to our code editor and let's go to this dot env file this is where our environment variables are stored so we're going to create two new variables one is the asset base url that's the url that comes before the image name or the file name that's uploaded and the second is the asset based path and that's the path on your system where the uploads directory is where that file will live so let's type asset base url and this is just going to be the base url of the website plus our upload directory so slash uploads you can make this anything you want and you can have the upload directory anywhere you want within a reason but i'm just going to let it create an uploads directory in our web directory here and the second thing is asset base path and this is the path on your file system where images will be uploaded to so in my case it's user slash my username and then my local host directory or my apache web root and then the name of my project folder and then web slash uploads so on linux this might look something like var slash www slash html but in my case this is where the project lives and where the uploads directory will live okay so now let's go to the craft admin panel and we'll go to settings and assets and we have to create a new volume which is just a place that files can be uploaded to so we'll press new volume and we'll just call it uploads again we can call this anything we want but this is a good simple name and we want to check this box on because we want files that are uploaded to have public urls otherwise we wouldn't be able to access them when people are viewing the website so the base url is in the environment variable we just created so we can type asset and there it pops up here the volume type will be a local folder you can also upload to an amazon s3 bucket or other third-party places but we're just going to use a local folder and again we already created an environment available for this so we'll type asset and there it is asset base path and that's all we have to do here so let's save this great so now we have a place where files can be uploaded to now we can create a field that is an image upload field that uploads to this volume so let's go to settings fields and let's create a new group of fields called home page and now we can create our first field let's call this hero title this will just be a plain text field and that's all we have to worry about for this one so we'll save that and now we'll create the hero image field and the field type here will be assets and here you can see our sources let's check just the uploads on this is our uploads volume that we just created let's restrict the allowed file types to images only because this is a background image for the hero section so we don't want people uploading video files or spreadsheets or pdfs or anything weird like that since there's only one background image we will limit the number of images to one or the number of files to one and the view mode is just how people view it in the craft cms editor so because there's only one image uploaded we don't have to display a list of images we can just display a thumbnail one large thumbnail and this is some helpful text in the editor so again let's just put something useful here like add a background image and that's all we have to do here so now we have our two fields for the hero let's edit the home page so that you can see what exists there now so if we go to entries home you'll see there are no fields on the home page so you can't edit anything on the home page yet so let's add a few fields to our home page section we can do that by going to settings sections edit entry type and here you can see our fields that we have available to us over here we just created these two and this is our field layout for the home page so let's go ahead and drag hero title over and hero image and save now if we go back to entries and edit the home page we have these two fields available so let's type something in here testing and let's add a background image i'm just going to drag a file in here let's do this one and we'll save that just like that so if we go to our home page and refresh nothing has changed because we edited the content and craft but we haven't changed the template to pull that new content out yet so let's go and edit our template for the home page so we'll go to home.twig and here's our hero section we just have a hard-coded image in there and a hard-coded title so let's start with the title first let's delete this and we'll say entry dot title actually entry.hero title is what we called it in the fields so let's save that refresh perfect now let's do the image so instead of putting the whole image field in here i'm going to create a variable for it first so let's do set which will create a variable we'll call that variable image and we'll say this is entry dot hero image dot one so even though we've only said that people can upload one image to this background image field images still come back in an array so it'll be array an array of one image so we have to say one to get the first one now that we have an image variable containing that first image we can go in here and just type image dot url so let's save that and refresh perfect so this is all working although this isn't a very uh good image for the hero section because it's not very readable so let's go back to craft and change this let's put our original title back in here now that we have it editable and craft and let's change this image out for the one we want which is this hero background image and craft is very nice here where you can just drag things right into it without having to select it from the browse window or anything like that so let's go ahead and save this and refresh perfect it's as if we never made it editable to begin with but we know that we can't edit and craft so that's nice all right so the next section on the home page is this featured story we're going to skip this for now because stories is a whole separate section type that we're going to create and uh we'll just wait till we get to that part before we start trying to figure out making this editable so the final section on the homepage here is this meet the writers section so let's make this editable in craft so we have a rich text section here where we have a heading and a paragraph and then we have these three repeated elements so for this first one we want a rich text field so let's go to craft and by default we don't get a rich text field with craft we have to use a plugin called redactor to get rich text fields so we'll go to settings actually sorry we'll go to plugins plugin store and we'll type redactor in the search and here it is it's free so we'll just go ahead and install this all right now let's go add some fields for this meet the riders section so we'll go to settings fields we'll go into this home page group because we're still creating fields for the home page new field we'll call this writer's intro content because it's the content at the top introducing the writers section here and we're going to choose for field type we're going to choose redactor which is just a rich text field rich text editor we can leave everything here default the only thing i like to check is show the html buttons for non-admin users because i like for people to be able to click the html button to edit things if there's extra spaces or line breaks that they weren't expecting other than that i'm just going to press save and finally let's create a field for the writers themselves so again we have these repeated elements we have a photo a name and a little description so this is a perfect use case for a matrix field so a matrix field lets us create a group of fields that we can repeat so we'll go press new field we'll call this one riders it will be a field type of matrix and we're only going to have one block type here we'll just call it rider and it has three fields photo name description so the first one will be photo this field is required because we don't want there to be two people with a photo and one without it'll mess up the layout a little bit so for the field type let's choose assets we want to just choose our uploads directory we can choose all but if we add other volumes in the future then they will be selected here by default so let's make sure we just be explicit and choose the one we want which is the uploads volume and again let's restrict the allowed file type to images because we don't need people trying to upload a pdf for someone's photo we'll limit it to one image and do large thumbnail and we'll just put some helpful text here add a photo perfect so that's the first field photo the next field is the writer's full name this will be a plain text field and let's just say that this is required because we don't want anyone without names in there and the last one is description and this can also be a plain text field and let's make it required but let's do one thing here where we allow um multiple uh we just want to create a larger text box so instead of one line text box let's have it be a couple lines tall like two lines tall for the person's uh bio or description let's go ahead and save this and finally let's go to the home page and add these fields again so we'll go to settings sections edit entry type now we could just add the writers and writers intro content right underneath the hero fields so if we look at the home page in the editor again here we could have the writer fields right down here but since there's a separate section on the home page why don't we separate it out into a separate tab so we can do that by pressing new tab we'll call this riders and we'll drag our fields into that and i'll show you what this looks like in a moment let's also rename this tab to hero so if we save this and go back to the home page and refresh we now have these two tabs here one is the hero section and one is the writer section and this is great if you have a lot of fields for an entry and you don't want them just displayed all the way down the page that makes it really hard to figure out what your find what you're looking for so this is a nice way to break them out so let's just put some test content in here and let's add a few riders here just to test it out test one let's add some images for these people here i'll just upload all of their images now actually and heck why not i'll just put in the actual people's uh names here rather than coming back later to edit it so we have henry potter and then we have sarah bradberry just copy this content over there's sarah and finally we have jack star field all right so for the rich text we might as well just put in our actual rich text content so i'll paste that in here all right let's go ahead and save this and let's edit our homepage template to use these new fields so if we go down here let's get rid of this hard-coded rich text content and let's get rid of the repeated people here and just keep one which is our base and if we look at what this looks like in the front end now we have no rich text and we just have this first hard-coded one which we'll use to loop over so let's start by putting the rich text in here so it's entry dot the name of the field or the handle of the field so let's look again at what that was let's go to fields so it was riders intro content so entry dot writer's into our content let's test and see if that worked yes perfect and then the next one was riders which is a matrix field so here's where we'll loop through that matrix field so we'll say for rider in entry.writers.all so this is that matrix field and we're going to get all of the blocks within that matrix field so we added three routers so we'll get all three of them and we'll just loop over them here so four and end four is our for loop and let's just test this out perfect we get three people in here we haven't replaced the actual text yet or images but we'll do that next but it is loading three items so that's great so let's start with the names so we can use rider and then we gave them a field called full name and here is their description so we'll swap this out writer.description let's test and see if this works yes perfect their names changed this text was the same either way but that's being loaded in properly the last thing to do are their photos so let's get rid of all this and let's create a new variable here for their photos so we'll say set photo equals writer dot photo dot one so again we only allow one image to be uploaded but we'll come back as an array so we just have to get the first image in that array so that's how we do that and then we can just add the photo.url here so one other thing is we have this alt text on the image let's just make this the writer's name so there's some good alt text there and let's check this out alright perfect that is working as expected so one nice thing about matrix fields if we edit the home page again go to the writers tab we have these three people and because they're they're separate blocks in a matrix field we can actually reorder them any way we like just by dragging them so let's use this little handle here and we'll drag jack to the front and save that and by the way in craft cms you can do command s or control s to save and it will just save and stay on the page rather than leaving you can also do save and continue editing and that will keep you in the editor for this page as well so let's check this out we just moved jack to the top let's refresh and there we go he moved over to that side so that's it for this video thanks for watching

Channel: Luke Peters

Views: 3,253

Keywords: craft cms, tutorial, code, programming, web development

Id: PGUEKPwIonw

Length: 18min 6sec (1086 seconds)

Published: Wed Mar 10 2021