00:00 Hey everybody. Let's see. Oh, my audio looks a little hot. Um, let's see. Everyone's in the chat. Oh,
00:08 channels are connecting. There we go.
00:16 Okay. Oh, there's people. Let me know in the chat. Audio and visuals are good. Um, should be good. Getting green lights
00:25 everywhere, so we should be golden. How's everyone doing today? >> [sighs]
00:34 >> Excellent. Hello, David. Let me get all these extra windows I got going on here.
00:45 Dr. Bob, thanks for popping in. Sweet. Okay. um you know for fun actually before we
00:55 before we get started on total CMS here I'll share a little bit of here let me launch something here share a little something I've been
01:03 working on um go ahead and there we go all right um so this is I've
01:13 been working on an app actually okay and um what kind of spurred it is it supports total CMS which is nice. Um,
01:22 but it is a social media app and uh what it will allow you to do is it'll it will allow you to post. Okay. So, it is
01:31 called post only and it will allow you to post to social media. It doesn't have any sort of fe um you know um you can't
01:40 see any feeds. There's no doom scrolling. You just write your post, send it, and you're done. Okay. Um as you see, it supports a lot of different
01:49 sort of feeds. It does support a total CMS3 feed um which can definitely be used as kind of like a social media feed on your website. So kind of a cool
01:59 thing. Um I don't plan on supporting more than just feed in this. Um I think again this is more for social media. Um
02:07 so you can add things such as Blue Sky, Discord, Threads X, all kinds of stuff even Instagram. Okay, which is pretty cool. And um what's kind of
02:17 differentiating is not only can you just post to a single account, but you can actually create groups of accounts. So like if I wanted to uh you know, we can add in a few different things here. You
02:28 can create your post um and then it'll post the same thing to all of them at the same time, right? So pretty cool. Um I like it. It will be a Mac and iOS app.
02:39 Um so um looking forward to that. Right now it looks quite simple. Uh, I think I'm going to keep the UI pretty simple, but um, yeah, be on the lookout. Um,
02:48 something that I will be, uh, releasing at some point this year. So, um, there we go. Cool. Let's go ahead and, uh, let's quit that. Let me go
02:58 ahead and stop that so it doesn't eat up any resources. All right. Um, but today
03:07 we're going to be talking about total CMS. Okay. And um that was sort of related to Total CMS, but obviously
03:15 um we're going to be talking about how to start from scratch with Total CMS. Now,
03:24 I purposely I don't have anything set up. Um we're just going to kind of wing it. Um I do have the latest version installed. Now, I am going to be doing
03:32 3.5. Okay. So, um 3.5 RC11 was released on the community.
03:40 I think it was on Monday I released that or maybe maybe it was uh recently. Okay. RC11. Um it is very I think production ready.
03:50 Um obviously as we're using it, people are finding little issues here and there and I'm fixing those. Um but there's some things I want to do before launch such as um Oh, I'm not even I'm still
04:01 sharing my screen. Um, such as like the website. I need to get new total CMS website up. I need to get some more uh short form videos out for total CMS to
04:10 kind of explain the basics. I kind of want this to be like I know we officially launched 3.0 in um December.
04:18 I think it was like wasn't it December 31st? I don't know. It was the end of December, right? I officially made it in 2025. But um I'm kind of treating this
04:26 as like a second launch. Okay. So, um now we're going to finally get the website. a ton of features as you know in total CMS 3.5. Um and then uh yeah,
04:35 I'm going to start populating the Total CMS YouTube channel um with short form videos on how do you you know what is a schema, what is a collection, blah blah
04:44 blah blah blah, all that sort of stuff. Okay. Um okay, but um let's see. Uh I got some stuff in the
04:53 chat. Good idea to do a total CMS website from scratch again. So much has changed. Yep. So, um yeah, today we're going to be doing a completely from
05:01 scratch and um I will be using stacks as well. So, going to create a brand new um stack project.
05:12 Where is my stacks window? Oh, there it goes. Oh, it opened up like everything all at once. All right, let's just go ahead and we're gonna I don't know what
05:21 all these are. We're going to just trash all those. All right. Um, we're going to create a brand spanky new project
05:30 and um, let's just call this um, new total CMS3
05:39 project. All right. And I'll save it to my desktop. That way I can give her give everyone this
05:47 project file um, later on. Okay. I have no idea how well it's going to work out. But hey, we're going to simplify this though. I don't need like all these
05:56 pages. We're just going to delete those pages. All right, we got a homepage. Um, let me just strategize. We're going to need an admin page.
06:06 Um, we're going to create a blog page. Um, and a blog post page that will be
06:15 inside of blog. Okay. Um, yeah, I think I think I think we're
06:24 going to stick with that. We'll stick with a home. We'll just do a homepage and some various stuff on it. Okay. Um, a uh a blog page and then your our admin
06:34 page. Okay. Because I know I think that's covers kind of all the basics. We'll we'll add some CMS stuff into the homepage. Um, but yeah, we'll keep it simple. We'll just have those three
06:42 pages. Okay. Um, uh, let's do some site setup here. Um let's do the site title is um
06:51 total CMS 3 website. Okay. Um let's publish this lo I going to
07:00 publish this locally actually. Uh let me go ahead and um file new window.
07:11 All right. We're going to do um sorry I'm going to use terminal a little bit just a little it's a little faster for me to do some things. Um we're going to go into
07:21 uh website testing and let's call this um
07:30 uh live totalcms.local. Okay. Um, that's going to be the website. And
07:38 we're going to do um, and then I'm going to add this. We're going to do WS add um, live dot
07:49 total CMS.local. And it's this directory. And we're going to type that in. Okay. And if you're wondering what what I just what I'm just
07:59 doing right now, this is um a little web server that I built for myself. I did open source it. It's called Patchy. And um yeah, it just kind of creates and
08:07 manages websites. So like if I do um WS list um here's all the websites that I have running locally on my on my Mac. Um
08:16 and I just created live.tcmss.local. Okay. And that's what we're going to publish here. All right. So that should just work now. Um and so here we'll
08:26 verify if I go to live.talcms.lo. Um, all right. It's empty, but it's it's
08:34 there. It works. We'll just leave that up. Okay. Um, so my site domain here. We'll just we'll use that here. My site domain
08:43 is that. There we go. Um, I want my default extensions to be PHP. Okay. Um, always
08:54 use default file extension. Homepage. Yep, it's homepage. Uh, primary theme. We're going to do
09:02 foundation. Okay, why not? Um, and layout. We'll just use the basic layout. Cool. I'm not going to try to work on making
09:12 this like a be pretty website. This this is about total CMS. It's not necessarily about building a beautiful website. Okay. So, um, yeah. [clears throat]
09:21 Let's see. Let's see. We got that foundation theme. I think we're just going to keep with the with the default settings here. [snorts] Okay.
09:29 Let's do um save. And just to make sure that my um my setup is working well here, let's go ahead and
09:40 [sighs] let's just add in uh we're just going to add in some text. Okay. Um we are using
09:48 foundation. Why not? We'll use the foundation stacks. Oops, that's totally TS. Uh here. There we go. All right. So,
09:57 just add in some text. Um, we're going to export this just to make sure I have a functional website
10:06 and we're going to publish to this guy. Open
10:15 and refresh. There we go. Okay. So, now live.talcs.local has my text stack. Cool. Just want to make sure that was all working. All right. Now, let's get
10:25 let's get the party started. Okay, so [clears throat]
10:34 how do we install Total CMS? So, this is a as a brand spanking new project. Um, what do we need to do? First off, let's go ahead and
10:43 um let's see. All right, we're going to go
10:51 into total CMS. I recommend you creating a group. So this is my total CMS group here. Okay, total CMS 3. And so every page needs a CMS core. Okay, so now I'm
11:01 in stack six. Um, so what I'm going to do is I'm actually just going to go to the the basic layout page and I am going to add in CMS core. Okay, just so it's
11:10 on every page. Okay. Um, so that should just work. Okay. So now, um, it's there. Um, I'm not going to create too much in
11:18 the layout stuff, but that's just convenient. So CMS core is now on going to be on every page. Super cool. Okay. If you're not if you're using um stacks
11:28 5, you can go ahead and add in CMS core to every page if you want. Same thing, same deal. Okay. Um but now I need uh an admin stack. So
11:38 what I'm going to do is I'm going to use this admin embed. And what this will do is this is going to um create my admin
11:47 area for me. It's going to use the pre-built admin area. One of the features of Total CS3 is you don't need to build an admin area anymore. Um, this page will suffice for that. So, let's go
11:57 ahead and preview this. Just kind of show you.
12:06 There we go. Right. So, um I now have um my admin area and it is baked into preview here. Okay. Now, now I recommend
12:15 um probably what what I think we're going to do for the rest of this um is I'm going to publish here cuz sometimes
12:24 just working in a browser rather than working in preview, I don't know, it feels more comfortable to me. Okay. Um now, I should have known I should have
12:32 noted that I know not everyone has like this little terminal doohickey that I have. You have access to it. I did open source it, but um you could use M. You
12:41 could use Oh, well, you could use M Pro. Okay. Um, M free. They've kind of disabled some stuff. Doesn't work great with Total CMS3 any longer. They've
12:50 removed some features from the free M. Um, but there is also um I'm just drawing a blank. Shoot, I can picture
12:58 it. Um, Serve Bay um does work great with Total CMS 3 and I think it allows you five websites for free. Um, so
13:07 pretty cool. Check out Servebay. Um, and you can do the same thing that I'm doing here. Okay. Um, there we go. All right. So, uh, just but I did want to show that
13:17 you can go ahead and use preview. And inside preview, you can create all of this stuff. Um, for the remainder of this project, I'm probably just going to be exporting and be building everything
13:26 out here locally. Okay. So, but it does all work in preview very nicely.
13:34 [clears throat] All right. So, we're done uh with the admin page. That's all we needed to do. And um here just for fun, we can go ahead and export that.
13:45 Export to there. Yep.
13:53 Oh, there it goes. All right. And if we just go to um slashadmin here.
14:01 Voila. All right. So, if I go to slashadmin, it now shows me my little setup widget. And this is uh what you're going to see when you first install
14:10 Total CMS on your website. Okay. So, um we're just going to call this T3 live stream. Okay. Select your language.
14:19 We're going to say get started. It's going to check your web server. Make sure everything that it needs is there. There. Cool. Click continue.
14:29 Um now for this, um I'm going to choose the default here. if you can depending on your your hosting setup. I do
14:38 recommend above document route. Um it all depends on your your your setup. Okay. So um I'm I am going to choose
14:46 this for just how I set up my local um you know machine. Um but yeah uh I do recommend above document route. It's
14:54 just where the TCMS data is stored. Okay. It is more secure, but um there are some hosting setups, especially
15:03 shared hosting, that sometimes doesn't allow this to be a thing. Okay, so um yeah, there we go. We're going to just going to choose document root for now.
15:11 Uh I need to give it a uh this create password. We're going to new
15:20 item. We're going to say uh I'm going to edit this just so I know what this is. There we go.
15:30 Going to create. All right. Now, it says, "Hey, I notice
15:40 this is a new license. We're going to set start setting up a trial." So, boom. Says I have 44 days remaining. Score. Um, now this setup here, um, it just
15:49 says, now what this is is if you want to have particular, um, uh, rewrite rules or whatnot, or if you, uh, I recommend
15:57 setting this stuff up on your actual host. So, you're going to want to set up a cron job, you can copy this command. You can copy this snippet and put it inside your ht access file.
16:07 Okay. And, um, yeah, everything should work work well. Okay. Um, just for Yeah. So, here, I'll copy this. Why not? I'll do it. Um, so we're going to go into
16:16 here. Um, now STAX doesn't have an HD access writer, but we'll we'll create one really quick.
16:25 Uh, so let's just go to my website, >> [snorts] >> uh, testing folder. I'm just going to go into here.
16:35 I'm going to create a new file. Call it htac. And I'm going to paste that in. Sweet.
16:46 We're going to save that. All right. And make sure um I'm not going to set up this cron job. I don't need it locally. But again, on your uh web server at um
16:56 on your live web server, you definitely should create this uh cron job. It's a scheduled job that you add to your hosting cPanel. Okay. Um so we're going
17:06 to click continue. And there we go. Okay. So now we are in um we are in the admin dashboard
17:16 and uh we can go in there's a couple things we can do. We can go to project setup and inside project setup we can set up default collections. Okay so I'm
17:25 going to go ahead and do that. I'm going to set up the default collections. We're going to click that button and voila. What it's done is it's created a whole bunch of collections for me. Okay. Um,
17:36 now when I go into the collections view here, you'll see that I have all of the default collections already created for me. Pretty cool, right?
17:46 Um, and uh, so yeah, there we go. Um, actually, some of these should be hidden. Um, that's actually an interesting bug that I just found.
17:54 [laughter] Okay. Um, sometimes doing these things are is useful. Um, this automation trigger actually um shouldn't show up here. It
18:04 should just show up right here. Okay, but that's fine. Uh, we'll work on that. Um, but now we have things like such as
18:12 blog, we have dates, we have files, we have text, we have styled text, all kinds of stuff. Okay. Um, and there are again some things I will evaluate on why
18:22 they are either why they were created and why um they aren't hidden. Okay. All these MCP things should probably be hidden as well. Okay. uh with the
18:31 exception of MCP prompts. We're not going to dive into that today though. Okay. Um but we have our data all
18:39 created which is nice. Okay. If we go into schemas um we see we have all of our schemas here as well. Oh, I I know what it did now. I know why
18:50 that all happened. I know the bug. I will fix it. Okay. Um,
18:58 I won't give a full tour of the entire admin area because we just want to get up and going. Okay. So, now that we have our admin area, let's start creating our content. Okay.
19:09 Um, so let's go onto the homepage and um [clears throat] let's create like
19:18 how about like a a header, right? We're going to need a header and maybe a banner with like a site title or something like that. Um um how about a a
19:27 text area would be nice and a gallery. How about that? Okay. Um so yeah, let's get all that uh kind of handled squared
19:36 away. Okay. So, uh, let's go into our total
19:45 our foundation stacks and let's, um, what I can do is I can kind of build out the page as as if it was just a normal page. Um, kind of a mockup design and
19:55 then we will go ahead and, um, total CMSify it. Okay. Uh, so at the top, we're going to create
20:05 a banner. uh probably have a background image and then um uh a title that we want to edit via the CMS and then um have some style text
20:17 with an image and then a gallery, right? I think that'd be kind of cool. All right. So, let's go ahead and um we're going to do a uh we're going to do a
20:26 container. And inside that container, [cough and clears throat] [snorts] let's see, we're going to make this one
20:35 uh we're going to make it a simple container actually. And then what we're going to do is we're going to make uh we're going to make I have a one column
20:43 here. In this one column, we're going to make it um here just for fun. We're going to do like BG black just so we
20:52 have something. Okay. And then here I'm going to utilize some I'm going to not going to explain everything that I'm doing here, guys, but um
21:02 okay. I just want to make sure that that works. Uh I thought it was height 33 VH. No,
21:12 let's see. Size chart. Oh, no. Snippets. uh classes. My goodness, what a rookie.
21:21 Whoops. That was H 33VH would do it right.
21:31 [snorts] Um height. Oh, I don't have Oh, I do have 33 VH. Interesting.
21:41 Thought so. So, that should work. All right. And then um let's add in alt
21:50 to here. Okay. And then we're going to add in a header. Okay. And uh we're going to set the
21:59 content alignment here to be center.
22:12 There it goes. Okay. Took a little while. All right. Uh now obviously this header we want it in the middle. So inside this one column we're going to do
22:21 uh vertical align middle. I think that should do it.
22:32 There we go. Perfect. All right. Um so let's go ahead and instead of this BG black, we want a um a background, right? So uh we're going to chuck in some
22:42 swatches here. We're going to do a background swatch. Uh let's just call this instead of BG black, uh let's call it banner.
22:53 Okay. And in here, we're going to do banner. We're going to add in a image.
23:02 And just for now, I'm going to I'll select a a nice image here. Let's do like this spacey image.
23:10 Okay. We're going to make it cover. Yep. Image size. Blah blah blah. All right. And
23:19 then uh in order to have a little bit of separation between um we're going to add in a
23:27 uh overlay [sighs and gasps] overlay bg and we're going to add this on banner as well. Um, and make it like
23:40 I don't know, something like that. All right, let's have a look at that.
23:51 There we go. So, as you see, it has we have the overlay between the image and my text so that my text is kind of more readable. Perfect. Okay. Um, now let's
24:01 continue on. uh we're going to have a container underneath that. Um and then uh inside that container, we're going to have a two column. And
24:11 inside that two column, we're going to have a um we're going to have a picture over here. And we're going to have some text over here. Okay. [snorts]
24:23 See, dude. Um all right. And in this picture, we're going to have let's go ahead and find I guess we're doing space theme right now. So, let's uh let's
24:32 stick with the little space, dude. Okay. And we have some text. Um preview that.
24:42 That preview is slow today. I wonder if it's cuz I'm live streaming or something like that. All right, let's go ahead and just add in a little bit of gutter around the areas. Make sure we're all
24:52 looking spiffy.
25:10 My goodness. Not sure what's going on with that. Okay, we're just going to continue on here. Um, and let's go ahead and use the container. And then below
25:19 there, I I wanted gallery, right? So, um I guess I can't I'm not going to build out a non-total CMS gallery just because
25:27 it's going to be so much easier just to do a total CMS gallery. So, um let's go ahead and and publish this page really quick. Let's go ahead and export export
25:36 that. And it's thinking not sure where the progress indicator happened on this on the publish. Okay, let's go ahead and
25:45 let's look at the homepage here. Sweet. All right. So, we have a homepage. We have um my little header here. We have um image text. And then
25:56 we'll have we'll throw gallery in there. All right. So, um let's start total CSifying this. Okay. And um so we're
26:04 going to we're going to have three things. We're going to have a um we're going to have a header. Okay. Then we're going to have an image. And then we're
26:13 going to have a style text area. Okay. Um so that'll kind of cover the trifecta. Oh, and then uh for fun, we'll
26:21 customize the background image here as well. Okay. Um, now there's a lot of ways that we can handle this. And
26:29 actually, you know what? Let's for fun, let's also add in a uh a menu. Right now, we need a menu. Every website needs a menu. So, um let's go ahead and build
26:37 a very simple menu right now. Let's do what I want. Menu. We'll just do a
26:46 normal menu here. Boom. Excuse me. And here um let's do
26:56 home
27:05 blog and admin. All right. And we're going to do uh hold on one
27:16 second. Let's go ahead and do this. Do that. And then here we're going to do
27:25 >> [sighs] >> uh horizontal alignment center. All right. Home is going to link to
27:33 home. Um blog is going to link to blog and admin is going to link to admin.
27:46 Perfect. Okay. And let's go ahead and export that.
28:03 All right. Uh did I like Oh, interesting. I thought I had alt text there. We'll just do uh
28:12 menu styles really quick. And we're going to do um
28:21 banner menu class. And we're going to do
28:33 we're just going to make it white. I'm going to go lazy, guys. We're just going to make it all white. All right. There we go. Uh all right.
28:43 That should be fine. And then that's going to be banner menu. So we're gonna plop that on my menu. All right. Now we
28:51 have white. [snorts] So now we export. And we export.
29:11 [snorts] Sweet. Now we have a white menu. >> [laughter] >> Oh, the hover color. Ah, whatever. It's fine. All right, let's go to admin page. So, we go to admin. And now we're in the
29:20 admin area. Okay, so remember we needed a few things. We needed two images. We needed a background image, the header, a style text area, and this image here.
29:30 So, four things we're going to create. So, what we're going to do here is we're going to go into um let's do the images first. So, we're going to go into the image collection.
29:40 Okay. And let's just call this um uh we'll call this banner image. So it's just banner. Okay. And um we're going to
29:49 create we're going to use a different banner image so we can see the difference. Right? I'm going to I'm going to chuck in this one right here. We're going to save that.
29:59 Sweet. So now we have a banner image. Uh let's add a new image. We're going to call this um I don't know
30:10 home image. We'll just call it home. Okay. Um and it's probably uh
30:20 we'll call it home text. All right. Um you can call it whatever you want. It doesn't really matter. All right. And then we're going to Do I have another spaceman one?
30:36 Okay. Well, we're going to we're going to use the same space guy one. Okay. We're going to use we're going to reuse that one. So, we're going to save that.
30:45 All right. Not sure why I said home text. It's kind of a stupid ID for an image, but whatever. Okay. Um it doesn't really matter. Call it whatever you whatever you'd like. I definitely
30:54 recommend coming up with standard naming conventions, though. Um don't just willy-nilly name things. actually think about think that through. Right now, I'm
31:02 just kind of want to get through the basics with you guys. Okay, but um definitely try to think of um a a good naming standard and workflow for you.
31:10 Okay, so now if we go to our images, we'll see that we have two images. Okay, we have the banner image and the home text image because it's next to the text.
31:19 And uh now we're going to go into our text. And let's add in a new text area. And let's call it um let's call this uh
31:29 banner dash header. Okay. And um hello live stream. And we're going to
31:38 save that. And uh let's go into style text and
31:46 we're going to create a new style text area. And we're going to call this home text. Okay. [snorts] And
31:56 [clears throat] let's do
32:07 all right. Just so we have something in here. I am I want to add a little bit of style um into some of these words here.
32:16 There we go. Save. Okay. So again, what we've created is uh
32:24 we have text and we have the this hello the header banner header in style text. I have um that paragraph that we're going to put here. Okay. And um and then
32:35 we have two images. So let's go ahead and integrate those into um our content.
32:44 So, um, if you ever forget what the syntax is, there is actually a, um,
32:54 well, first off, there there's multiple ways to add content. Okay? And so, there is content stacks here. They're the blue
33:03 stacks. And if you want to add in text, so we're going to add in this total CMS text stack here. And I'm going to delete this header. Okay. Now, in here, um,
33:15 we're going to you have to give it the object ID. And the object ID of this header was banner-header. So, I'm going to put in,
33:23 um, banner- header here. And I want to make this an H1. So, I'm going to make sure that the content that, uh, comes from this text area is put inside of an
33:33 H1 tag. Okay. And, um, before I publish, we're just going to go through go through all of this. Now, instead of the picture
33:42 here, we're going to delete that. We're going to add in a total CMS picture, uh, total CMS image, sorry. Uh, we want
33:52 a galler image. Here it is, the image stack. And I called that, for some reason, I called it home text. Not a great ID for
34:02 an image, but that's what we did. Okay, so we have home text. And then here, you can define the width and size that you would like. Um, so it' be 600 by 400.
34:11 I'm okay for that. It's just a small image for now. Um, so let's do that. Then, um, for this text area. Okay. So,
34:21 what we're going to do is we're going to keep things simple. I'm going to add in a style text area here. And in here, I called that home text as well, I think.
34:29 Yes, home text. So, we're going to say home text here. Perfect. And uh let's go ahead and save
34:39 this. And let's export. And let's think about it.
34:51 All right. And we're done. You know what? I'm going to create two tabs here so we always have the admin area here. So now we have home
35:02 and we have the hello live stream header. We have an image and we have a text area. That is our style text area.
35:10 Right? Pretty simple. Hopefully you're you're guys are following along how easy that was. Now, if any point in time I want to edit this content,
35:20 I can go ahead in here. Um, in my admin area, I can find my live um and let's just call this instead of
35:30 Hello live streamers. Hello livers. I guess that's livers. I don't know.
35:38 Okay. And let's refresh. And voila, it's done. Okay. So now any changes that I make um
35:46 will automatically be reflected on the website. Pretty awesome. Now I did skip this banner image and
35:57 that's maybe a little level up, right? because at that point um you know so far we had integrated and used um kind of the total CMS content stacks
36:08 but with this I this was done with a swatch so how am I going to do that all right so [snorts]
36:16 um so now we're going to kind of go up a little bit up a level here and because inside here we're going to go into our images
36:24 and let's find here's our banner image that we're going to use okay and what we're going to do is We're going to um click on this link button, this image URL button.
36:34 So, I'm going to click on that. And here, we're going to create a um a render of this. Now, by default, it's 12,200 pixels x 600 pixels, actually,
36:44 which is which is fine. I I think that's okay. So, what we're going to do is I'm going to copy this macro. Okay. Now, what's kind of cool with this
36:52 editor is you if you wanted to create something, let's say I want it 600 pixels wide, click preview. It actually shows you and it shows you the size and
37:00 everything. Okay, which is pretty pretty slick. All right, but um we're just going to I'm going to take the default which is um 1,200 pixels. All right,
37:10 we're going to copy that macro and um we're going to go ahead and inside this background swatch, you'll
37:20 notice that I'm going to turn off image and we're going to turn on total CMS. And in here, you can put in your CMS macro. Now, by default, this swatch
37:28 contains a total CNS one macro, but that's okay. We're just going to plop that macro in right there.
37:38 Okay. And now, let's go ahead and publish that.
37:55 Okay. Now, if we refresh this page, we'll see now that now we have the new background image that's managed by Total CMS. And just to prove it, right, if we go
38:05 into this and let's go ahead and replace this image, [clears throat] let's replace it with this one.
38:14 And if I go back here and reload, voila. That background image is now configured and maintained by Total CMS.
38:25 pretty awesome. Okay. Um I said we wanted a gallery. So,
38:35 let's go ahead and add a gallery down here. Okay. So, we're going to go down here. Uh we're going to go ahead and uh we're
38:44 going to drag in a header. Let's just call this um my gallery. Voila. And in the total CMS stacks, uh,
38:56 we're going to add in a gallery stack. Okay. And in here, let's just call it space.
39:05 Okay. Oh, something. There's an issue with the styles in edit mode. Interesting. Okay. Um, so that's space.
39:14 And let's go ahead and create. I haven't created a gallery yet in the admin area. Okay. So, let's go ahead and do that. Uh, so let's go to gallery. Let's do new
39:24 gallery. I'm going to call it space and let's go ahead and add in some images. Oops, it's not what I wanted.
39:36 Let's just do this. We're going to do all of these. So, we're just gonna we're going to chuck
39:44 these in. And we're going to save. Save. [snorts]
39:53 Right. All those images got uploaded. We now have a gallery called space. So, now that that gallery exists, um I said the
40:01 object ID here is space. Let's go ahead and publish that.
40:16 Okay, here. Reload. And voila, here's my gallery, right? And if I click on it, we
40:24 have a full-blown image gallery. Pretty cool. Okay. Now, there's a lot of stuff we can do in the gallery, right?
40:32 There's a whole bunch of like layout options and, you know, grids. Obviously, these are kind of tiny and it shows a lot. Maybe you want them to be larger. There's all kinds of settings here that
40:41 you can adjust all of that stuff. Okay. Um, you can also limit the number of images. You can you can provide the sizing for uh the thumbnails as well as
40:50 the full um uh lightboxed image. Um, you can watermark your images um if you have pro. Okay, you can watermark which is uh
41:00 really cool. So, if you wanted to watermark your large images because you wanted to protect your IP, then you can do that, right? You see that was really easy to add a gallery.
41:12 Okay. Um, now let's go ahead and add in a blog. Okay. Um, I don't see any
41:20 questions so far, so hopefully you guys are following along. Okay. Um but as you see we have uh quite a nice a decent looking homepage where um most of the
41:30 content here is all editable and controlled by total CMS. All right. So now let's do blog. So
41:40 we're going to go into blog now to help myself out a little bit here. Um what I'm going to do is um I want to I'm just going to quickly create some dummy
41:49 content. Okay. So, what we're going to do is I'm going to use something called the factory. Okay. So, inside the factory, um, we can say how many objects
41:58 we want to create in my blog. And, um, I'm going to go ahead and let's up that. Let's create 10 blog posts. And, um, I'm
42:06 just going to say generate fake data. So, it's just going to generate 10 blog. Oh, I said nine. Doesn't matter. It's fine. So, now it generated nine blog posts for me. If I go into the blog,
42:16 you'll see that it generated those. Um, now it actually generated a lot of drafts. Let's go ahead and actually let's just uncheck [snorts] that, right?
42:24 And we're going to save that. Actually, you know what we're going to do? I'm just going to I I should
42:32 probably change that in the factory to be honest with you. I'm going to create 10 more. Just generate. [clears throat]
42:43 All right. Perfect. So, if we go back to blog. All right. Now I have a bunch. There are a bunch that are set to draft. Um I should
42:52 probably make so draft is never set inside the blog factory. Um yeah, we'll make that change. Actually, let let me make a note to myself to turn off
43:02 factory for um draft. One second.
43:14 All right, I'll do that. So now um yeah, in a future update when you use the factory
43:23 for blog, it's not going to create anything that's draft. Okay. [snorts] Um Okay, so now we have uh blog posts
43:32 created and as you see, you can click on any of these blog posts. It actually creates like these little dummy images. It even creates a little gallery. It creates media links and all kinds of
43:41 style text content. It's pretty cool, right? It does. It does a lot for us. Okay. And this is great for just testing layouts and building things out.
43:51 Now, we're going to create something super simple. Uh we're going to go to the blog page. Now, just for fun, I am just going to here. Um let's go ahead
44:00 and I'm going to create a uh partial out of this header. So, we're going to create a partial out of that header. And um we're
44:09 going to call this um site banner. Okay. Going to call that site banner.
44:19 And um oh, I forgot I needed this inside there. So, let's go ahead and cut that. We're going to go into my here.
44:28 Paste that swatch in there. Plop it up there. Hide it. All right. That should be good.
44:36 Uh, and I don't need All right, there we go. So, now I have my site banner. Um, and here, let's just verify. I'm going to Let's export that.
44:49 Make sure that that's all good.
45:01 Oh, oops. There's some Well, I'm using a beta build. So, there we go. There's something some artifacts left in there. That's interesting. Um,
45:12 what is creating those? I It looks like these links. Uh, link instant blah blah blah. That's interesting.
45:23 Here. Interesting. That's a new one. All right. Well, for now, uh, I do want
45:33 to use this partial. So, we're just going to We'll hide the menu for now. Sorry. Bad hack. Whatever. Um, we're going to hide that. And, uh, oh, and
45:42 then on our blog page, we want to add that partial. So, we're going to add that partial here. Sweet. All right. And then below our blog page.
45:53 Okay. Uh, we want to add in a blog, right? So, let's go ahead and now from the stack six perspective, I know you guys are like, you know, new to
46:02 some of this stuff. I'd probably build all that inside the layout, which would probably be better. You have your banner and all that jazz. Um, but I'm trying to exercise partials since it's kind of a
46:11 new thing. So, um, there we go. Let's go ahead and add in a uh container below there. And what here what I want is a
46:21 blog list. Okay. So this is again my blog page which will contain the list of all my blog posts. So if we go to tools stacks here
46:32 um we're going to do a blog grid. So um we're just going to load this in there. And um my blog ID the collection is
46:41 called blog. Now by default that is the default blog collection. Okay. And um you know just for fun uh for kicks here
46:50 we're going to go ahead and let's just build out the blog page too. So we're going to build that out um and then I had a let's see I had a container and
46:59 then inside that container um instead of blog grid we're going to use blog post and we're going to drag that out there. Now the CMS the collection here is blog.
47:09 Um that is what the default blog collection is called. So we should be golden there. All right. Now, let's go ahead and
47:17 export.
47:30 Okay. So, let's go ahead and refresh. Oh, I lost my blog link. Whatever. We're gonna have to just navigate directly to blog.
47:41 All right. So, now I have a blog. And as you see, I have a blog grid automatically made of every blog post that is not a draft. Okay. Um, and if I
47:51 click on them, oh, wait. The the clicking doesn't work. Oh, there's one step we need to do to essentially link this page, the blog page to the blog
48:01 post page. Okay. And that configuration happens inside the admin area. So, when we're inside of our blog,
48:09 what we're going to do is we're going to say edit collection. and inside here. Okay. Um, what we're going to do is actually, you know what
48:18 I'm going to do really quick? I want to go into this page. I actually want to customize the path to this. I want this to be um blog and then post.php.
48:32 Okay, let's go ahead and export that. Uh, yes.
48:45 I actually want to verify that that exports properly. So, we have blog. Oh, created. Um, [snorts]
48:53 going to have to talk to Isaiah about that one. Oh, yeah. Added blog. Blog. Oh, so we just do post.php.
49:02 Interesting.
49:13 I will have to talk with the man about that. I thought I thought that bug was fixed. Okay, we'll live with it. Okay. Um,
49:23 so this is uh let's see what we had blog and then blog post. Okay. So, we're going to do is we're going to
49:32 call this post and then uh we'll keep the the default name. So, that's what we're going to do. All right. We're going to do that. And
49:44 all right, that's what we're going to do. We're going to export that.
49:55 All right. Just so we know, um, if you if you look here, uh, you have the the the actual, which is actually kind of nice. It shows you the actual URL to this page. Okay. So, if we look at the
50:05 URL to this page, and actually I can just click on this and copy that. Okay. Uh, what we're going to do is when we edit this collection, um, you see where it says URL setup. So, we're going to go
50:15 ahead and and um paste in Oops. That's interesting. Interesting. It I I expected to paste in
50:24 the the full URL, but it did just the path, which is actually what I wanted. Okay, which is cool. Um, so what we're going to do is the path to
50:32 the blog post is slashblog/post. Okay. And uh we're going to go ahead and save that.
50:43 So now um now that the CMS knows where the blog post page lives, if I click on these, it now takes me to the blog post
50:52 page. Okay. So if I click on anyone, so per profound responsive neural net. There we
51:01 go. Pretty cool.
51:11 Okay, so that is the basics of getting a blog uh done, right? As you saw, it's really simple. All I had to do is add in
51:20 the blog um the blog list or the blog grid, sorry. Um, and then I created a post page that that loads in the blog
51:28 post. Then all you have to do is configure the CMS where your where your URL to your blog post page is and you're done.
51:40 Total CMS takes care of the rest, right? Um, let me see if there are any questions.
51:51 You need the draft set to make sure the filter is working on the page. Um well yes uh so um by default this um
52:02 uh in this grid okay the uh drafts are automatically when you use a blog grid stack drafts are automatically going to
52:10 be filtered out. Okay. Um so yeah there you actually can't turn that off in the blog grid. Now, um there are more ways of doing
52:21 more advanced layouts. I'm not that I'm not going to go into today where you can actually uh completely do a custom blog layout. All right. There are some
52:29 options here. So, you can do like a compact layout. You can do related related posts and um you can categorize things by links. And so, there are some
52:39 things that you can customize here. Um you can also do um you know a full width. Oh. Uh, this is the blog.
52:50 Oh, yeah. Oh, there we go. Oh, interesting. I'll have to I'll have to talk to Isaiah about that. I was I clicked on this was looking at
53:00 the settings for this stack. And then when I clicked over here, oh, now it's working. H, interesting.
53:08 Okay. Um, you can use custom build, custom layout. I'm not going to dive into that today, but you can build out a custom layout for blog. Okay, I review
53:17 that in a different video. Um, today I just wanted to again we're we're trying to show the basics on how to get to 80%
53:26 or 90% there, right? And um hopefully you guys saw how easy it is um to really get going with Total CMS.
53:36 Um, so that's kind of that kind of builds out everything that I wanted today. Um, to show you guys, I built a brand new website.
53:45 Um, we had a banner, okay, banner images. We saw a little bit of of how to use the stacks. We saw a little bit of macros. Um, I guess one thing that I
53:55 could do is here, um, on this on this, okay, I could have used, um, other things. All right. So, let's let's revisit this um this site banner
54:06 [clears throat] here. I used the total CMS total CMS text stack. Okay. But let's say I wanted
54:14 to use my foundation header there. So, if I go ahead and use a foundation header stack because the foundation header has some nice other features that
54:23 I want. So, how do I get the CMS content inside my foundation header? Well, luckily all the total CMS stacks, they
54:32 actually show you the macro that it produces. So, in order to get the content from
54:41 this particular header, text header, I all I need to do is take this macro and type it into my header stack. So, this
54:50 header stack, I want it to be an H1. So, uh, what we're going to do is I'm going to do, um, curly brace curly brace CMS.ext
55:03 open parenthesis, and then we're going to do um, banner dash header.
55:12 All right, we're going to save that. So you see here, all I did is I I took this
55:20 um this macro that displays inside the total CMS text stack and I typed it inside my header. Now I actually no
55:30 longer need this. Okay, so now this is going to produce the same exact results as we had before, but I get to use my
55:38 foundation header and all the other various options that the foundation header stack has. So this is powerful because it allows
55:46 you to take your CMS content and integrate it into the stacks that you love now, right? Um doesn't matter what stack it is, it can be the data can be
55:55 integrated. So let's go ahead and publish this. Okay. Um so we're going to go back and we're going to export.
56:06 [clears throat] And actually this this page here should actually not change at all. Um it will look the same. Um, so that's done. And here, just to um
56:18 here, just to prove it here, what what can I add to show you that it's the same here, let's do um
56:27 alignment. Let's do it uh right aligned. Why not? Okay. Just just so you can see uh that I'm I'm not pulling your chain here. We're going to export that.
56:43 There it goes. So, it's using the foundation header stack um but it's taking the data from the total CMS admin area that we've that we can then edit um
56:53 and and injecting it here. Could you right click on the macro hint to copy it? Um I I wish. Um we can't do
57:02 that yet. Um that is a feature that I I would like to um add. um it's just not a part of the stacks API. Okay. So, um
57:12 hopefully soon. Okay. Um but yes, I agree that that would be a nice feature to have. So, good question.
57:23 Um well, uh actually, okay, so let me let me correct what I said. Um so, you can do it somewhat. Okay. Uh here, let's
57:33 let's put that total CMS text stack back in there. Boom. All right. Um, and uh I had like H1 here. All right.
57:43 So, if you right click it, if you right click in the edit area, it selects some of it. Okay. You can't it only selects.
57:53 So, you can go ahead and and you can rightclick and copy some things, but you can't like select the whole thing. Okay. So, you can get almost there, Jeff.
58:03 >> [laughter] >> Um, but yeah, you can't you can't copy the entire thing, but there is a yeah, a little bit of um if you right click on it, you can copy parts of it at a time.
58:14 Um, I think that is a side effect of something else that wasn't an intended feature. Um, but yeah, it would be I do agree it would be nice to say, "Hey,
58:23 copy this to my clipboard." Okay. Uh would be nice to have that. Um when you do it yourself instead of
58:33 using yours, uh you need the draft set to make sure your filter is working on the page.
58:42 Okay, I think I covered that. Um okay. Um perfect.
58:52 Um so that pretty much does it, guys. Um, I I think that covers over the raw basics. Um, again, there there is a lot
59:00 that I didn't cover, right? Um, and I know that there's a lot of content, especially like these D these these help layout helpers that could be confusing
59:09 that a lot of times we use for advanced layouts and stuff, custom layouts. These are essential. Okay, but you can do a lot with just these total CMSs content
59:19 stacks because it just gets it and displays it. Um then our our the admin areas that we have. Um it is very simple to use. Um
59:31 again you just go into collections. You have all your collections here. Um if you're using 3.5 I will clean up a lot of these. These a lot of these actually
59:39 shouldn't be displayed here by default. This automation trigger shouldn't be here. Most of these MCP ones preset items sitemap meta. None of those should
59:48 actually be here at all. I I won't fix that. That's a bug. Um so okay um but
59:56 yeah and all of the all of the collections also have relative content stacks right so for example um here let's do a
60:05 depot right just for fun since we have a couple more minutes we'll add in a depot and this is my um let's just call this files
60:14 okay and um we'll oh I guess we need to add some files into it right um so let's go into my uh let's go into my downloads. I
60:24 have no clue what I have in my downloads, but let's add some files in here. Um here is a uh a zip file. Um not
60:33 sure if that's going to be too big to upload. There's a zip. Okay. Um here's a log file. Okay. Um here's another zip.
60:44 Um so any so there's some files I added to my depot. All right. Now, how do I display that depot on my content side?
60:52 So, um let's just add it. We'll add it above my gallery here. Well, here we'll put it below the gallery. Let's just call this my depot.
61:12 Oops. Happened. Uh oh. All
61:21 right, little bug there. Let's go ahead and just I'll just rebuild it here. And then um on the content stacks in
61:30 order to add the depot, guess what? There is a depot stack. So you just add that in there. Okay. And you put in your object ID. I called it files.
61:39 Okay. And uh let's export.
61:52 So [snorts] now I have below my gallery I have my depot where I have all the files that I uploaded. I can go ahead and click on it to download. Um super
62:01 simple. Okay. So using these content stacks are very easy. It's an easy, it's the
62:09 no-brainer way of getting the data from your CMS onto your web page. Um, CMS core needs to be on every single
62:20 page. Um there is a macro builder here that if you um add this to the page um it just
62:30 kind of it's a way of helping you learn macros and you can kind of use this to again it's not copyable but it leads you uh it gives you the ability to build out
62:39 your macro. Okay. Um it doesn't actually display anything on the web page. It's just um kind of an edit modeon tool for you to
62:48 build out macros. Okay. Um, so we have QR codes, SVGs, text, style text, we saw already adding an
62:58 image, um, displaying a number. Uh, we have a a gallery and a gallery image.
63:06 Okay. Um, so the gallery image is if you want to display one image from a gallery. I know that's caused confusion before with some people, but the gallery
63:16 stack displays the entire gallery. Gallery image is the same thing as displaying a single image on the page, but you want to display a specific image from a gallery.
63:26 Okay. Um, similar to how we did blog and blog post, there is a feed grid and a feed post, right? So, if you want to
63:35 create like a little social media po uh feed on your websites, feed is a great way to do that. You can do that with feed grid and the feed post page. If you
63:43 even need a post page, maybe you don't even need a post page. Okay. Obviously, embed is for embedding uh videos. Okay? So, if you have um if you're saving URLs
63:53 to a YouTube video or to an MP4 or something like that, um this will allow you to embed that and create the player on your on your page. We have the
64:03 ability to display dates. So, if you're saving a date, how do you display that? Okay. Um data. Um, this is kind of an
64:14 edge case stack, I'll be honest. But if you wanted if you want to display the raw data from um a CMS, uh, you can do that with that. Okay. Code is if you
64:23 want to output the code u, maybe you're saving meta tags or some sort of JavaScript snippet or something like that. This will allow you to embed that
64:32 code onto the web page. Okay. Um, then we have barcodes um, similar to QR codes. Okay.
64:41 So, there we go, guys. Um, [snorts] when do I need the admin core stack? Good question. [snorts] Um, so if we scroll down, I guess we can
64:50 talk about the rest of the the the kind of the the stacks here. Um, so we talked about CMS core. The rest of these are kind of utility um stacks that you might
64:59 need for debugging or whatnot. X-ray is a cool one. We're not going to dive into it now. Um, data loaders. This allows you to, again, kind of more an advanced
65:07 thing where you can like preload data from the CMS so you can manipulate it. Okay. Um, layout helpers. A lot of these are for um
65:18 either doing loops, so looping through custom data or doing conditionals or um like you know if a toggle is turned on or off right here. That's actually a
65:28 really a really cool one. Um so let's um we'll use toggle. Okay. So I'm going to um we added this depot here. Okay. And
65:38 um I'm going to add this this depot into my toggle. Okay. And let's call this um home files. Okay. Um so we created it's
65:50 going to be looking for a toggle called home files. And if I go into um toggle the toggle collection, I can add a new
65:58 toggle. And I can call that home files. And uh we're going to save. Now by default, let's go ahead and turn that on.
66:07 Okay. And oh, I didn't export that. Let's export that.
66:16 And while that's exporting, okay, so now again, uh, if I refresh, this should be the same. Okay. So, home files is displayed. But now I can go
66:25 ahead and turn that off, save it, and reload. And now it's gone. Right? So
66:33 now whenever I want I can I can enable and disable parts of a web page with a toggle.
66:42 Pretty cool. Okay. Um okay. Next up is authentication stacks. Um so if these are useful if you want to
66:51 create some sort of members area. So if you want to um you know create your own custom members area or um some sort of a
66:59 log when you log in it maybe displays custom data on the web page when someone's logged in right um you'll use these authentication stacks. Now um next
67:11 up is admin core. Okay now it's kind of related to this because there is a login form here. Whenever you want to display a total CMS form,
67:22 that is when you need admin core. So um even if it is a user signup form on your public web page, if you ever use
67:32 any of the total CMS form stacks, you have to have an admin core on the page.
67:42 Okay. Um the rest of these are kind of just little utility. You saw me use the admin embed. I think this is actually a really nice way of doing an admin page.
67:50 Just create an admin page, chuck that on there, and you're done. Okay. You do need CMS core as well, but again, I have CMS core added to my uh my uh my layout.
68:01 Okay. Um so yeah, um admin embed is fun. Uh admin core, it it only needs to be on the page
68:10 when you're building out anything that uses um a total CMS form. That's it. Okay. And then obviously these form
68:19 stacks are for if you wanted to build out a custom admin area nowadays. I think that is very edge
68:28 case. Um I think the admin area here does a lot for you and you can get very far with this. Um you only need to
68:37 justify building out a custom admin area. I know some of you love branding and you want to make sure the admin areas that you build for your customers are exactly only what they want and it's
68:47 branded with your company or their company, right? So, it really gives allows you to create a custom um user experience for the admin of the website.
68:59 Um but again, it is only a nice to have if you want to take the time to do that. Um, the admin area here is pre-baked,
69:08 pre-done for you, right? So, hopefully that answers your question, Matias. The admin core stack is only needed whenever you want to use any of the total CMS
69:18 forms or the login form. The login form is a form, right? So, um, because this contains all the the JavaScript and the
69:26 CSS and stuff like that that style all of that stuff, right? So, that's why the admin core is there.
69:36 Okay. Okay, guys. Um, I went a little longer than I thought, but hopefully, and we didn't go too deep. Hopefully, um, this
69:44 was a nice little um, uh, overview for those of you that are new to Total CMS and kind of wanted a um, a starter video
69:54 on how to get started with Total CMS 3 and how it works and how to install it and publish it and use it and all that jazz. So, yep. Take care. Um, I hope you
70:03 got a little bit out of today. Post on the community if you have any more questions. I'm happy to answer out um, anything that you have. So, thank you very much everybody. Have a great rest
70:11 of your week and go out there and make your websites great. Bye.