00:04 Okay, everybody. Sorry for being a little late today. Um, yesterday I uh upgraded to Golden Gate and uh when I
00:13 launched some of my streaming software, it was it required some uh some rejiggering of things. So, had to install Rosetta for the the chat app
00:22 here, which hopefully is working. Let's see. Oh, there it goes. Mr. David, thank you very much. Okay, good. The chat's working. I had to
00:32 install Rosetta for that. Um, kind of sucks, but whatever. Mr. Chris Powers is in the house.
00:42 Okay. Also had to go get some water. I was running a little bit late. So guys, um, there is a lot of exciting
00:54 things happening in the community right now. Man, my glasses are very dirty. Um, and yeah, I thought I'd I'd start today
01:04 off a little bit with just kind of uh looking over some of those things. Um, I'm not going to dive into all of them because there's just so much stuff going on right now. And uh, but yeah, I just
01:14 want to give a quick little little rundown and update. Um, I'll probably send out a newsletter tomorrow that, you know, talks about all that as well, everything that's going on in the community.
01:25 Okay. Um, so let's go ahead and share my screen and we'll uh we'll dive in. All right. Um,
01:35 just go to the community really quick. Um, we got Man, so much really cool stuff. Um, okay. So, uh, Johan has a new
01:45 stack uh for the Livid um network. Okay. Um, I don't know if he links to it. Okay. Livid is a video service. Vimeo is
01:55 kind of dying and so a lot of people are looking for a a good service, an alternative and Livid is uh where a lot of people are going. It's currently a
02:04 deal on AppSumo. I did pick it up. It looks decent. Um I even added support for it in Total CMS3 already. Okay, so
02:13 um yeah, let's see. Uh then we have uh let's keep going. Let's just go to the announcements. I think it's all in the announcements thread here.
02:24 Okay, Johan also has an app called RW Mover. Um, I'm not going to give a demo of it today. I'm going to convince Johan to come on because um yeah, maybe maybe
02:34 in the next coming weeks I'm going to I'm going to convince him to come on to the live stream and uh he's going to show off all the amazing like he builds so much amazing cool stuff. Okay. And um
02:44 he's built an app called RW Mover that will allow you to migrate your projects from Rapaver to Stack 6.
02:53 Okay. Really amazing. It's going to save people so much time. Okay. Um it is free. Okay. Free. That's amazing. So, um
03:05 yeah, as payment, go ahead and buy some of his other stuff just because this is going to save you countless hours migrating your your rape projects into
03:14 stack 6. Really cool. Okay. Next up is uh Josh actually has two apps. Okay. He has one called Copia which is currently
03:23 in beta. Um but here I just go to the announcements. It's the ability to like sync folders. Okay, if you're a technical person, it's basically a Mac
03:32 app around arsync. Okay, I'm underelling it. It's really cool. Ask Chris Powers. I know he's in the chat and he uses it and it's already
03:42 integrated into his daily workflow. He can't live without it, I don't think. Right, Chris? Okay. Uh, next up is Shrinker Pro. So, as you
03:52 know, for years I've been um talking about an app called Image Shrinker. It was free. It was open- source and uh
04:02 coming up with the next Mac OS 28. It's going to die because um yeah, it's Intel only and that app will not work. So Josh
04:13 took the open source project and he completely rebuilt it, added a ton more features, um, and called it Shrinker
04:21 Pro. And so it is amazing. Go check it out. And it is also free. Okay, so really amazing resources from both of
04:31 those guys. Um, just chef's kiss on both of them. Uh, well, Copia, I should say, is not free. I think I think you're allowed like one sync uh, setup for
04:41 free. I I forget the it's currently in beta. Uh and for for beta you can have unlimited syncs for free until it's officially released. Okay. But yeah,
04:50 check that out. Okay. Um and I think that's it. Okay. Uh there's more. Uh I think I already talked about Johan's got
05:00 a lot of really cool Total CS3 extensions, but we won't dive into that. Okay. Um so that's some really exciting news that's going on in the community.
05:09 um awesome new tools and software and a lot of it's free. You can't beat that. Okay, so check those out. Um next up is
05:18 literally I think it was less than an hour ago um beta 70 dropped of stacks. Okay. Um and yeah, so beta 70 dropped
05:30 and uh it supports as you saw I had two I had two files open. There was a bug in 69 that uh didn't allow you to open up project multiple projects. So, um,
05:39 voila, you can have multiple project files open again. Thank you. Um, I forget what other fixes are in this. I think there were some some exports, some
05:48 some caching issues um, in preview. Um, I can't think of what else, but um, yeah, and it has all the amazing AI
05:57 stuff and the new publishing stuff, which I think I reviewed. I don't remember if it was I think it was on the live liveream. I don't remember. Okay. 69 had a whole new
06:08 publishing setup. Um, really cool stuff. It even has remove old files when you publish. Pretty exciting. Okay. [clears throat]
06:16 Okay. Today we got a lot to do today. Um, I originally was going to Well, actually, okay. Before we dive in, I
06:25 actually have one more thing. Um, and I'll tell you why. I was actually going to pre-build a little website and then kind of show you. Um, but I went down a
06:34 rabbit hole. Okay. And um I started building Foundation 7. Okay. Um now it is far from done. Okay. Um and right now
06:45 it is just the web open source framework. Um haven't even thought about the stack side yet. Okay. Um but um
06:54 yeah, we got uh I'm not going to give a full tour of it right now. Um but we have a documentation site for it. I literally just launched this last night.
07:02 Um, and yeah, it's just got a bunch of really cool stuff. Uh, here's here's a kind of a cool demo. So, here's like the card layout where you can resize it. You
07:10 can kind of see how cards go and and whatnot, right? You can view the code for that. So, um, yeah, Foundation 7
07:19 already have a lot of it built. Um, it's awesome. Okay. Um, I'm super stoked about it
07:27 and um, it is tiny. This morning I just I compete I wanted to compare the size of what found uh oh yeah I do have to
07:36 also say uh the framework side I I I'm going to be keeping the stacks called foundation it'll be foundation 7 um but
07:44 the the open source project has been renamed to Yeti okay so um now the foundation is the overarching project and it has three different products it
07:53 has Yeti inky which is the email stacks okay and then proton okay so um three different projects, Yeti, Inky, and
08:01 Proton are a part of Foundation. Um but again, that's the code open source side of things. Um the stacks itself will still be called the Foundation stacks.
08:10 Um so there we go. Um so yeah, super stoked. What I what I was was about to say was I kind of compared the size of
08:19 what Yeti is to the foundation framework and right now it's 23% the size of Foundation 6. Okay. So, it's
08:29 so much smaller, um, faster, more nimble. Um, there's only 4 kilobytes of JavaScript. Um, because all of this,
08:38 even like here, let let me show you. Okay, let me geek out a little bit here. All right, watch this. This is pretty cool. Okay. Um, this is a carousel.
08:47 Oh, man. Um, this is Darn it. I This demo is broken. Darn it. God damn it, donut. Okay. Um,
08:59 sorry. That line is from a book I'm reading called Dungeon Crawler Carl. God damn it, don it. Okay. Um, yeah, kind of weird. Sorry, off the cuff. Very weird.
09:09 Great books though if you want some entertainment. Dungeon Crawler Carl. Okay. Um, I listen to it on Audible with my son in the car. Um, it's fun. Um,
09:20 darn the uh carousel was a it's a cool demo. Obviously, I broke it somehow. So, oh well, I will uh let's find we can do
09:30 like accordion. Okay, accordion. Um, so it, you know, it's a traditional accordion, but what's cool is zero JavaScript, right? Absolutely zero. So,
09:38 most of the components here have no JavaScript. It is pure CSS, and I'm working really hard to keep it that way. I I only want to have JavaScript for
09:48 things I really, really, really need. So, um, yeah, I'm trying to keep it nimble and fast. So, and that's what we're doing. Okay. Um, enough with that.
09:59 That's still quite a ways away in the future, but um, yeah, just want to let you know groundwork is getting laid for that. Um, so yeah, pretty exciting
10:07 stuff. [snorts] Okay, now what we're going to do is um, I want to build a site. So again, I I I
10:15 wanted to build a site with Total CMS and I wanted to show you how to integrate SEO into a website um, built with stacks.
10:24 I didn't get to build that project file because I was uh I was busy building uh Foundation 7. Um so
10:32 we're going to do it live. All right. So, um while not intended, this will kind of be maybe interesting if you guys hadn't seen a building something with
10:41 stacks and also integrating total CMS into it. Okay. Um so, we're going to go ahead and I'm going to start a brand spanking new project.
10:51 We're going to do a new project file and um let's call this what are we going to call this? Um let's just save the project so we have it something saved.
11:01 Save with my desktop. [sighs and snorts] We're going to call it Yeti. Why not? Right.
11:10 Yeah. All right. Um so we're uh we need we'll do a couple just I'm not going to try to make this an insanely beautiful
11:19 website. Uh we're just going to go ahead and do stuff here. So um we have uh we're going to do a
11:30 new page. What are we doing? New page. Okay. So we have home. What about like about um let's do like I don't know maybe a
11:39 blog. Okay. We'll just we're just going to stick with that. We have a homepage, an about p a blog page, and an about page,
11:48 right? And I guess everything needs a contact us page, right? So contact us. Okay. Um, so let's go ahead into our
11:57 site settings. Um, we're going to say like um Yeti Bros. Whatever. Okay. Um, site. Let's do um [clears throat]
12:08 we're going to do uh uh Yeti Bros. test. Okay. Um,
12:19 And uh let's do uh file. Let's do the base extension. It's going to be PHP. Okay. Always use the default extension.
12:30 Homepage is home. Um primary theme. We're going to we're going to use foundation as the primary theme. Primary layout is basic layout. Okay. We don't
12:40 want jQuery compatibility. All right. And just to see. Okay. Cool. that loads. All right. Well, it doesn't
12:49 load. Let's go ahead and uh let's set up the web the web server so we can actually export this. We're going to export this. Um I'm going to put this in
12:57 my website testing folder. And I'm going to do a new folder. And we're going to call this Yeti Bros. test. Okay. And all right, just for fun,
13:10 we're going to go ahead and uh I use I use a little internal web server
13:19 that I called called Patchy. Um, so I'm just going to go ahead and um we're going to add that um Getty
13:29 uh Apache add um Getty Bros. test
13:38 here. Um no,
13:48 sweet. Now I can go ahead and we'll go to yeti Bros. test once I finish this. Oh, I need to uh export that. All right. Oh, let's go ahead and let's uh verify
13:58 the page settings. So, we go to uh Oops, I did not want that. I don't if it's a Golden Gate thing.
14:07 I've noticed I've since I've installed Golden Gate, like I've accidentally dragged things or zoomed things by accident more than normal. Like I'm I'm
14:18 wondering if it's something has changed the sensitivity. I don't know. Just something to think about. Uh and how did that change? Uh homepage is home. All
14:27 right. There we go. Um all right. So homepage is folder name there. Uh this is uh folder name is going to be blog.
14:35 Um about is about and contact us is contact- us. Perfect. Right. And uh let's go ahead and uh make homepage.
14:46 There we go. [snorts] And we're going to need a a blog post page as well. Right. Right. So, let's go ahead and let's add one more page.
14:56 And we're going to call this blog post. Okay. And we're going to go right there. Okay. And in here, we're going to do um
15:06 blog and this is going to be post.php.
15:18 Oh, interesting.
15:27 I'll have to talk to Isaiah about this naming thing. It wants to do blog post. I want it to be blog post.php, I guess. Here. Oh, we'll just just do this. Put
15:36 it out. are going to be um blog post.php. Perfect. Okay, I'm good
15:45 with that. So, we have uh home blog uh blog post um about and contact us. All right.
15:53 Um we'll we'll build some sort of Oh, and we're going to need an admin page. Okay. So, let's go ahead and um admin page.
16:05 Admin. All right. Um, now the admin page though is um, all right, I'm not going to explain it everything in detail here. We're just going to go I'm going to make
16:13 this a blank uh, layout, right? And it is exactly that. All right. So, the blank layout has Oh,
16:23 wait. It does need uh, it does need the content stack.
16:33 Oh, there it goes. H interesting. That was seemed an odd workflow. Let me add that. Let me do that again, guys. I'm just going to do a test
16:44 layout. And if I go into here, interesting. All right.
16:53 Before it wasn't, it didn't have that. I don't know. Okay. Um, so now we have a blank layout and a basic layout. Uh, my admin page, I want it to be the blank
17:02 layout. So, we're going to go here and I'm going to go here. I want that to be my blank layout.
17:11 Perfect. All right. And [snorts] I know on
17:21 um in my blank layout, let's go to total CMS. This is going to be my admin page.
17:29 Okay. We want Let's go to total CMS. Need to have CMS core on there. What is going on here?
17:40 Something is eating up my machine here.
17:56 All right. Admin page. All right, there we go. So, I want CMS core and then
18:05 [sighs] I need the admin dashboard. Let's do the admin embed. Sorry, admin embed. That's what I meant. All right.
18:15 So, now we got CMS core admin embed on my admin page. Perfect. [snorts] Now, for let's start building in the the general layout for all of our pages. Okay. [clears throat]
18:26 Uh in the basic layout, uh I want my uh CMS core on every page because it's going to be a total CMS site. Okay, so there we go. Um and then let's just
18:36 build out we'll do a little container here. Okay. And in the settings, we're going to do
18:47 um we're just going to do a simple container. We're going to do a height of h colon
18:58 uh 50 vh. Okay. Uh right. Actually, no. We're going to
19:06 uh we're going to do one column in there. We're going to give that a height of 50 VH.
19:17 Okay. Um I'm not I don't want to spend too much time on styling, so I'm just going to be lazy. I'm going to do like BG black. Okay. Um, and we're going to
19:26 make this an alternate layout. So, we're going to do alt. Um, and then in here we're going to do uh vertical align middle.
19:36 And then we're going to add a header. Okay. And then um in here we're also going to do content alignment
19:46 uh center. Okay. And then um
19:58 actually I we called uh total CMS SEO core. All right, that's the demo we're going to be doing today. And let's just
20:07 preview that really quick. There we go. Okay, so we got uh my
20:17 little header takes up half the CMS core. Perfect. Okay. Um right here. Yeah, let's just keep it with that. And then uh down below, we're going to need
20:25 a container to hold our content. Okay. Um and uh inside of this container, we want our
20:36 page content. So that is going to be page content.
20:45 What happened here? Uh oh. What was I doing? Oh, I built that all
20:55 on the homepage. Oh, man. That was stupid of me. All right, that's fine. We're just going to uh we're going to cut that.
21:04 Get rid of that. And we'll go into basic layout. Paste it in there. All right, there we
21:12 go. All right, now we're cooking with Crisco. All right. And we're going to add the container. Uh, and then we're going to go into the move that. All
21:21 right. And then let's do like uh py colon 32. All right. There we go.
21:34 Let's preview that. Perfect. All right. Let's close that. I don't need that error. All right. So now, um, so this is my layout. So now um
21:45 we're just going to stick with that layout on every page. So now I'm on on my homepage and it looks like that. All right. So let's go ahead and start
21:54 adding a little bit of content. All right. So [clears throat] we're just going to keep things simple
22:02 here. Get some water. Uh let me make Okay. Make sure you get if you have any questions while I'm if I skim over
22:10 something a little too fast and you're like, "Hey, can you explain that a little bit more?" let me know in the chat.
22:18 I'm just doing some very basic stuff. All right. So, here we're just going to um just so we have a little bit of we're going to say home. Okay. And um
22:29 forum going to be a little bit lazy here. Uh so now we have that and there's there's our homepage, right? So we have uh the
22:38 hero header that's defined inside the layout and here's the homepage. Okay. Um, I guess we need some sort of menu, right? So, um, that's kind of
22:48 important. Um, but that could kind of be in the in the uh in the layout actually, right? My goodness. See, I am dragging and dropping stuff all over the place.
22:57 That is so annoying. Um, okay. Let me know in the chat if anyone else is experiencing that cuz uh
23:06 that's like seriously annoying. Not sure if it's my trackpad, if it's is me, or is it Golden Gate? I don't know.
23:14 Okay. Um, where were we adding a menu? Um, so let's go ahead and add a menu
23:24 really quick. Uh, menus right here. Let's just add a simple simple menu.
23:32 And we are going to add it inside of container. There we go. All right. So, in here, um, we're just going to do, uh,
23:45 home. Okay. And we're going to link this to the homepage. Okay. And, uh, we have blog, about, and
23:56 contact us. All right. So, in here, we're going to be, um, blog, and that's going to link to the blog
24:05 page, right? And then in here we're going to do um about and that's going to link to the about
24:14 page and this is contact us
24:24 and that is going to link to contact page. Sweet. Okay. Um, and
24:33 all right, let's do alt, right? All right, I'm gonna do alt color. Uh, actually, hold up. I did
24:42 uh Oh, I did alt here. So, does that mean if I go into uh theme settings?
24:52 I think this doesn't use this uses. Yeah, let's do alternate links. Let's just do I don't know something
25:05 there. And on hover we'll do like uh something
25:15 70% something like that. All right, let's do that. Um, I think I'm going to have to have a mini swatch to style that the way I want, but
25:24 let's see. Hello. Where is it?
25:34 Oh, if that means there's caching going on here, let's let's try the the page. Look at that, dude.
25:43 Again, so annoying. I am like that is really driving me crazy now. Um, all right.
25:55 Where's Oh, there's my menu. All right. We need to Oh, we need to spread it out. And All right. Let's go back into our uh layout.
26:05 Um, we need to add in a Let's do a swatch up here. We're going to add a menu
26:14 swatch. any new styles. All right. And then inside here, we're
26:23 just going to do um just do demo and then
26:32 text color. And we're going to add demo to here. Okay. And then inside there, we
26:40 want to do uh white All
26:52 right, we'll do something like that. All right, so now if we go back to our
27:01 page. All right, now it's white. Uh, don't love the hover color. Whatever. Doesn't
27:09 really matter. All right. Um, but just to keep things nice, let's do um
27:18 let's do justified.
27:34 Don't love justified. Let's go to Let's go back to our layout. I think it's just
27:43 autofill. I think I think autofill is the best for what I want. Let's see.
27:52 Yeah, I still got it some issues with caching on uh in layouts. It looks like
28:01 I'm I'm pretty good. Vertical. Uh let's see then text alignment center.
28:11 Yes, there we go. That's what I wanted. Okay, so now we got home, blog, blah blah blah. Perfect. All right. Just so we have a menu. Now we have a proper site.
28:20 Okay. Um now, um Okay, we're just going to be super lazy here. Um and uh or let's see, on the about page, we're just
28:30 going to do about. Okay. and the contact us page. We're just going to do contact us.
28:42 Okay, pretend I put in a big huge form on this page. Okay, doesn't really matter. Contact us. About, right, blog. We'll
28:52 add a little bit. Okay, blog. We're actually going to build out. All right, so now um let's go ahead and start creating stuff with the CMS. All right,
29:01 so we can then add our blog and our blog post. Again, I'm just creating a super simple little site here. And uh so let's look at our admin area. Let's go into
29:09 the admin area. All right. Um and inside here, since I've never um I didn't set up this project yet, we're going to go ahead and
29:19 set up the project. Okay. And we're going to say setup default collections. Sweet. And now if we go into default
29:28 collections, like I have a whole bunch of collections. Um, now today we're really going to be looking at blog. Okay. And, uh, let's just go ahead. I'm going to go into the factory and let's
29:38 just create some blog post. Let's create like, uh, like 15 blog posts. Okay. Uh, create.
29:46 So, we're going to go ahead and it's it's creating blog posts for us. And it's done. Okay. So, now if we go
29:55 into blog, I now have blog posts. [snorts] Awesome. Okay, pretty cool. We can go ahead. As you see, this is all just dummy data,
30:04 placeholder images, and whatnot. Okay, but that's okay. Um, okay.
30:16 So, now, uh, let's go into the blog page, right? And, uh, let's build build out our blog. All right. So, I'm going to do
30:25 something super simple. We're just going to go here. We're just going to say, I don't know, uh, my blog. Okay. And then, um, below that, we want to start
30:34 displaying our blog posts. So, we're going to go ahead and [gasps] we're going to do [sighs] where is it? Blog. Blog grid. So, we're
30:44 going to do a blog grid. Um, actually, for fun, let's do a load more blog grid, right?
30:55 Uh uh here. Let's We're going to keep things very simple. We're just going to do a normal blog grid. Right. And thinking about it. Voila. Right. So now
31:05 I have a blog post. Okay. I have a blog list. I mean I can go ahead in here and voila. I have a list. So let's go ahead
31:15 and uh we need to make sure when we click on these um it actually navigates to the blog post page. Right. So let's go ahead in here. And what I'm going to
31:23 do is I'm just going to add the blog post stack. Okay. So this will add in the blog post details for us. Um then um
31:32 there's one important bit of information. Okay. Um it was when I click on this, it needs to know where to go. Okay. Um so just show you the blog
31:42 post page. Here's a blog post page. Now you might be wondering where the heck did it get this information from? Oh, interesting. 403 forbidden. Uh, wonder
31:51 what dummy URL it put in there for the media field. Interesting. Um, okay. So, uh, here, let's see on this page here.
32:00 Let's not put the media. All right. [snorts] So, now we have image, some content, gallery, and related posts. Pretty awesome. Okay.
32:11 And, uh, yeah, didn't really have to do much, but um, when you're previewing a blog post, it just randomly picks one. So that make sure that that you actually
32:20 preview data. Okay. But we need to make sure that when we click on a blog um inside this view, right, it actually goes to that particular blog post. So
32:28 let's do that really quick. Let's go into the admin area. Okay. And we're going to go into my
32:37 blog. We're going to edit edit the collection.
32:45 And then we're going to go right here object path. So we need to say uh the page to that was slashblog/post.php.
32:57 Okay. Um so that is the URL um to uh our blog post page. Let's go ahead and save that.
33:09 So now when I look at my blog and I click on that, this says compatible exuding access. Let's see. When I click on that,
33:18 it takes us to our blog post. Pretty cool, right? All right, let's go back to our we navigate, go to our blog, click
33:26 on another one, robust composite instruction set. Okay, and voila, we're at that one. Okay, so we have a fully functional blog now uh within a few
33:37 minutes. Okay, hopefully that that uh kind of showed you guys how easy it is to set up just a very simple blog. Okay. And get all this dummy data.
33:47 Okay. Um, so awesome. Now we have a simple site and let's go ahead and
33:57 start working on some SEO for it. Uh, and actually to do this, uh, what I'm going to do is, um, actually let's export. So I'm going to go ahead and
34:06 we're going to export this, uh, to my Yeti Bros site. Let's go ahead and export that now.
34:19 And if I go into uh let's go what was it? Yeti bros.est.
34:30 Voila. There is my Yeti Bros test site. Okay. And if we go to blog um
34:39 Oh, interesting. We need to go Okay. Um, we need to go ahead and go into the admin area because I published it. This is now a completely separate instance of
34:48 Total CMS than what we have in preview. Okay, no big deal. Um, let's go ahead and, um, we're going to call this Yeti Bros.
34:58 Say get started. Uh, thank you. Um, let's do document route.
35:06 Uh, okay. I have to set up my account here.
35:15 Um, oh, that is my email. And, uh, I guess
35:26 we'll just save it. Why not? Okay, we'll save. Sure, we'll save it just for fun. Yeti Bros. All right. Going to create an account.
35:35 Uh, we're starting a trial. Um, share data with developer. I don't need to do that right now. All right. [snorts] Um, and then it's going to say, "Hey, we
35:43 got all this cool stuff we need to do. HD access files and all that jazz." Uh, I'm going to copy this snippet. And, um, as of right now, STAX doesn't
35:53 have an htax editor. So, we're just going to go ahead and create one really quick.
36:13 Uh, okay. We're going to do new file htac. Paste that in. All right. Here we go.
36:27 Save that. Right. We'll just minimize that in case I need that later. [snorts] All right. So, that's done. Uh, this the chron job. I'm not going to
36:35 worry about that for for this demo. Okay, but you'll want this if you're ever setting this up on your live server. Continue. All right. So, we have our project set
36:44 up and just like I did with the with the one inside uh the preview, uh we're going to set up the default collections. Um and then we're going to go into blog.
36:53 We're going to go um let's edit this collection because I know it's going to be um slashblog/post.php.
37:03 Okay. Um, and we're going to save that. And then we're going to go into the factory and let's just create a bunch of
37:12 ones. Let's do 15. Create.
37:21 Sweet. All right. So, now we're blog. I have a bunch of blog posts. Score. All right. Um,
37:30 let's go to the website. So, now I have my homepage. If I go to blog, I have my blogs. If I click on one,
37:39 takes me to that blog post, right? And I get down at the bottom, I have galleries and all that jazz. Okay.
37:47 Go back to the blog, so on and so forth. Pretty cool. Okay. Um, all right. But the whole point of today was uh a that
37:56 was kind of a fun little exercise to have a a new site with stack stack 6 and total CMS3.
38:07 But now what we're going to do is we're going to look at SEO because that's obviously obviously an important part of
38:16 of what we need for websites, right? So let's go ahead and um we I want to inject all the various SEO
38:26 meta tags. Now um obviously uh a lot of you probably have u my SEO helper stack. Okay. And uh if you don't uh let's just
38:37 go ahead and look at that. What the heck? Oh, I'm I need to be in
38:46 uh there isn't Joe mode. Forgot about that. SEO. There we go. So, SEO metatags and you could add SEO basics and there's
38:55 all kinds of stuff. Okay. Now, um what SEO core will do for us um inside total CMS um is essentially it will
39:05 replace this SEO basics for us. It does a little bit more. Um it doesn't do all the structured data and all that jazz yet. It it does well let me it does do
39:15 some it does do organization. and it'll do website, but it doesn't do some of the very specific structured data. Um, eventually I will be coming out with an SEO pro extension for total CMS that
39:25 will have all of that. Okay, but the core functionality will get you the basics and even what I say a little bit more than what the basics are um to get
39:34 you up and running. Okay, so um since this site is going to be ran with total CMS uh and I want to try to go all in with that um let's do that.
39:44 Um, okay. Now, I have to admit actually this this setup that I'm about to do live right now, um,
39:52 I actually haven't integrated I haven't played around with how to get SEO core data into a STAX published website. I have it working in my head and which is
40:03 why I haven't actually shipped this. Um, so yeah, I thought today it would be kind of good to show you what it does and then try to integrate that into stacks. Okay. Um, so for those of you
40:14 that are familiar with uh total CMS 3.5, um, yeah, let me show you what it does
40:24 first on a live functional website. Okay, so uh, let's go ahead and I'm going to let's look at the totalcms.co website, which is the total CMS website,
40:34 which is obviously built with total CMS and it actually is fully functional with SEO core enabled. So if we go ahead and look at this the page source here
40:46 um let's go ahead and go in the header on this we'll see in here
40:56 oops a little bit wider all this SEO data in here so we have the t you know the title
41:07 the description um the canonical URL all of the various OG, you know, titles and OG URLs and site names and images and
41:17 Twitter cards and all that stuff. All this stuff. Okay. There's also a little bit of structured data here. Um, well, quite quite a bit, which is this is all
41:26 that you get now with uh SEO core. Okay. And yeah, and it's all managed by
41:35 total CMS inside the CMS. You can change it and edit it however you want. Pretty cool. And I thought it would be good to show
41:43 you an existing implementation. So, uh before I try go ahead and try to implement it all inside the uh the this new demo site that we just created.
41:57 All right, let's go ahead and I'm going to go into the admin back end of uh the total teams site. Oops. What the heck?
42:10 [clears throat] So, um there are three levels of SEO configuration
42:19 and uh we're going to go through those right now. Um, inside of the main uh
42:27 collections, right, there is a new collection called site SEO. And this is something called a single object collection. Uh, you click on it
42:37 and instead of seeing like a whole list of objects, you only get one object and it's called the same thing as the collection. So the object is called SEO
42:46 site. Okay. And here, this is what you're going to
42:55 define as like your sitewide settings for SEO. So, here you have like what is your site name? Um, what is the base
43:03 URL? If you don't define the base URL, obviously it's going to know it's going to use what you the currently base URL of the site is, but you can hardcode it if you need to. Um, you can provide a
43:13 template for the titles. So, um, if a page has a title, it will use that. Okay. Um, what's your default dis metatag description? What's your default
43:23 social sharing image? Um, what is your Twitter handle? Um, so on and so forth, right? So, what is your organization name, social profiles, organization
43:33 logo, blah blah blah blah blah blah blah. Okay, so again, these are your site level kind of sitewide defaults for
43:42 when um, Total CMS doesn't know what to use for a page. Okay, next up is
43:53 if we go into our collections, let's go into our let's go into this features collection. Okay, this collection is a
44:01 list of all features of total CMS. Okay, and if we go into edit collection here, I think this has some of it. Yep, we
44:10 have some. Okay. So inside if when you edit a collection now this defines the defaults for the object
44:20 pages for that collection. Okay. So um here the structured data is uh is going to be either a website. By default it's going to be website but you can select
44:29 it to be an article. Okay. You can define what property is used for the title, what property is used for the
44:38 description. Is there an image property? Okay. And then uh those are going to be used for those particular object pages.
44:49 Okay. So again, so for all the the pages for each of these features, what is the title going to be? What is the image going to be? So on and so forth.
45:01 Then I said there was three levels. The third level is um now this website is built 100% with total CMS. So, it uses
45:09 the new uh site builder um feature. And so, in here uh what you what you can do is inside inside total CMS 3.5, you
45:19 can actually build out your entire website inside of Total CMS. Don't have to, but you can. And uh if we go into uh let's say I go
45:28 into this features page, what you'll notice here is you can then on the page level set up information that will then get used for this page.
45:38 So like for example on this page I don't have a special social sharing image. So eventually it would go all the way up to the and use the default one set at the site level.
45:51 Here you can define um a a specific title for this page. You can also do a a different title for social. Right? So
45:59 sometimes the title that you want for SEO a aka the title tag that's in the page you might want different than your social sharing title. Okay. So you can
46:08 have actually two of them here. You can have the uh the default type. So if you wanted uh this one to be something spec if you want it to be article essentially
46:17 right now it's either article or website is kind of what um SEO is is used for but I I expanded it to potentially grow in the future.
46:26 Um canonical URL. Most time this is going to be uh automatically determined by the page you are on and you won't need to set that. Okay. Uh the
46:35 description for this page if you want it to be no index and no follow so on and so forth. Okay. So again that's the three layers. We have page specific SEO
46:45 and then kind of object level stuff defined in the collection and then default at the site level.
46:54 Okay. Um I I haven't seen anything in the chat for a little while. So hopefully you guys are are following a little bit [clears throat]
47:02 now. Um how do we inject like how does all this data get created? How do all of these meta tags get added to the web
47:10 page? And essentially um I tried to make it super simple. And uh actually be oh
47:20 before I go into that um I'll just show you really quick in here before I go
47:28 I think it's in the base layout. Um it is this line right here. Okay. Is
47:37 this this one line this uh CMS uh can I make that? Oh. Oh, excellent. Okay. This guy right here. CMS or SEO.head and then
47:49 you give it the page. Okay, so that's it. This one line um then puts puts it on everything. Okay, which is pretty
47:58 cool. Okay. Um so yeah, and if we go into the docs [snorts] and we go into I think it's in site
48:07 builder SEO. Okay. Um there's full docs on this as you see here. Here is a um an example of
48:15 how you would do this with just twig. Okay. So you you could add that into your head. I'll probably eventually uh I
48:24 need to think of a way actually on having maybe like a checkbox or something like that um so that when this gets you know you can just add it easily
48:33 uh from CMS core. It needs to be toggable because maybe if you already have an existing site that's using SEO helper or something like that and you don't want to use this, it needs to be
48:41 able to be turned off. Okay. [snorts] So, okay. Um, so yeah, this doc goes over a
48:51 bunch of other stuff that it it kind of does. It's kind of all in the background. Um, it just shows you how things are mapped and and all that jazz. But if you set everything up, all you
49:02 need to do is have this one twig statement there and we should be good to go. Um, and actually I one second here.
49:18 See if this Oh, it's probably uh not published to this. Uh, I need to get a different snippet for myself. Uh, because I did update something if you
49:29 don't mind me. Really quick going to my development server really quick to get
49:37 um
50:05 Oh, here it is. Snippet right there. That's the golden ticket. This guy right here.
50:14 Right. So, for for a stacks page, um this is going to be the golden ticket that we need um for to get. Uh I added this a few days ago uh cuz I knew I was
50:23 going to be doing this and uh I haven't fully tested it yet. So nothing like uh living on the wild side. As you see this
50:32 is for pages that are not rendered by total CMS. Okay. So hence stacks. Okay.
50:41 Um, you know what? Just just for fun, um, what I'm going to do is, so that we're going to go into this basic layout. And
50:49 for now, what I'm going to do is, uh, just to keep things simple, uh, let's go ahead and get an HTML stack
50:58 right here. Just going to add that there. I'm just going to plop this directly in HTML stack.
51:08 Okay. And that should should do it. It'll it'll it should put in the meta. It won't put him in the head for right now, but at least it's something that we can just quickly
51:17 inspect and and verify is working. Okay. Um [clears throat]
51:26 Okay. So now what we need is we need to populate the meta tag data
51:35 for all of our pages. So, how are we going to do that? Um, so inside of
51:46 where are we going to do this? Let's do this in the browser just because it's a little bit more more fun. Uh, let's close the all these tabs I don't need. All right, here's my Yeti Bros. test.
51:55 Um, let's go into the admin area and I'm going to go into the site builder. [clears throat]
52:05 Now, this site isn't used isn't using the site builder to build the website. Okay. Um, however, what I'm going to do is I'm going to replicate the pages that
52:14 I have built here so I can manage them inside of total CMS. Okay. So, um, we're going to go new page
52:22 and uh this is uh we'll just say home. Okay. Uh, the path is a slash. Um, page
52:30 template doesn't actually the page template doesn't matter because we're not rendering at that. And uh here we're going to manage the the homepage. So let's go ahead and say um homepage
52:41 for Yeti Bros. Okay. I'm just typing something that I know is going to be unique uh from here. Okay. Um
52:51 and uh actually for the social title um we're going to say come check out the
53:01 Yeti Bros. Something like that. Okay. Um description. Um
53:12 Eddie Rose are awesome. Okay. Whatever. Doesn't
53:20 really matter. Let's do a social image. Um I'm going to be lazy. Let's just find something here that uh
53:32 I have a do I have a foundation one here? I think uh h this is foundation six, but it works. We're going to use foundation six. Boom. Okay. So, there's
53:40 a foundation six one because it's a Yeti. Okay. Um oh, apparently it's really low quality, but whatever. It's fine. And okay, so we're going to go
53:50 ahead and we're going to save that. Oh, interesting. page template is required, right?
54:01 That is very interesting. And little little hiccups along the way.
54:10 I am going to add in a page template and make it a page. Um, and let's just call this default
54:19 or let's call it let's call it stacks. Why not save that?
54:33 Hope that hope that one little hiccup that I did not think about isn't going to mess this up. Let's do home, right? Uh we're going to do slash page template
54:42 is stacks, right? Oh, I should have copied and pasted that stuff. Okay. a homepage for Yeti
54:51 Bros. Um, come check out the Yeti Bros.
55:00 Okay. Yeti Unite. Okay. And here we'll just do warm up some gibberish so we have something. All
55:11 right. And social image. And let's just do do the that one again. Voila. And save.
55:21 Okay. So now I am very interested to see um let's go ahead. I'm going to reexport
55:30 this entire site again because I added the meta tags to the homepage uh to the layout. So let's export this.
55:47 And just to make sure that this Yeah, it is the homepage. Okay, cool. Did that ex uh Yeah. All right, cool.
56:01 Drum roll. All right, so now we're going to go to Yeti Bros. test. All right. So, now we're on the homepage and in theory,
56:10 um, if I inspect this, I should see the meta tags. Um, where did I where did I put them? Inside the >> Could you try again?
56:19 >> Um, Siri's thinking I talked about to her and I did not. Um, okay. So, it's right above. Okay. So, it's the very top of the page. Cool.
56:27 Let's just inspect this. Drum roll, please. Boom. Yes. Okay. [laughter]
56:38 Yes. So good. Okay. Oh, yes, dude. So, so good. Okay. I'm I was giving this like a maybe a 7030 chance. Like, uh, so
56:49 happy. Okay, cool. Look, it's got our title tag. Okay. Um, and it's got the meta description with Yeti Unite. It's got
56:58 the connect the correct canonical URL. It's a website, the OG title, which is different. Come check out the Yeti Bros. Uh, same description. Okay. Uh, the URL,
57:08 the site name is the Yeti Bros. Um, super cool. Like, dude, love this. Okay. Really, really, really, really, really
57:17 happy. Okay, so now um all of our metadata, if I go ahead and go to my admin area and go to my uh my home here, let's go ahead and oh, let's update it.
57:27 Right. So, um, instead of homepage for, let's do home of the Okay, refresh that. Save it. And
57:36 now, if we go and refresh this page, uh, boom, the title now says home of the Yeti Bros., right? I just made that
57:46 change in the in the online, right? So now um we can manage all of our SEO from site builder from within um the pages.
57:57 Okay, pretty fun stuff, right? Um really, really, really cool. All right. Um but we're not done. We have more pages to do. Um I'm I'm really
58:07 interested to actually do the blog. Okay. I'm I'm very interested to to try that out. Okay, so um bear with me.
58:17 Um, so let's go ahead and I'm going to do a a new page. Okay. And uh I'm going to do the path is um slashblog.
58:27 Okay. And the SEO here is going to be um Yeti blog. Okay. I'm going to be a
58:35 little lazy here. We're just going to do Warum. Okay. Um social image. Actually, I didn't I never even set up the the default social stuff in here, so I
58:43 should probably do that. Um, and so let's go ahead and save that. Oh, what's Oh, I didn't give it a page title. Uh,
58:51 my bad. Uh, blog, right? And, uh, stacks template. Okay. I'll rethink whether or not page template ish.
59:01 Yeah. All right. So, now we have blog. Okay. And so now if we go to here and we go to
59:11 our blog page, I do have Yeti Bros. And I didn't fill out everything, right? So, but it has it does have the metadata. Um, it doesn't
59:21 have an OG image cuz I didn't put one there. Um, but it does have the Yeti Bros. Oh,
59:29 wait. I did Hold up. Uh, slashblog stacks. Oh, I did Yeti blog.
59:37 Interesting.
59:51 What's different here? Slashblog. What's this route here? Oh, interesting. I wonder if I do
60:02 Oh, interesting. Okay. If if I if if the route is /blog not /blogindex.php,
60:10 then okay, we'll have to talk to Isaiah about why this um links to index instead of slashblog.
60:18 All right, we'll talk to him about that. Um let me make a note of that. That's actually an important one. Uh one second.
60:34 Where is Yeah, that's fine. Yeah, right here. All right, made a note of that. All
60:45 right, so now we have uh if we go to we went to slashblog. Okay, without the index, it works, right?
60:54 Maybe I can add some logic into uh CMS to if it if it sees the route has index to kind of strip that. I think
61:04 that would be good. Yeah, I'll probably end up doing that too. But there we go. So now it has the
61:12 title, our description, the canonical URL, um the title tags, descriptions, URL, all that jazz, right? It's got it all, which is just pretty awesome.
61:25 um has everything [laughter] like like that's really cool. But now I now now this is the the next test for me um is I
61:34 need it so that we go when we go into a blog. Okay, it um yeah it uses it uses that. All right, so let's go
61:44 ahead and do this. Um now to do that actually we need to enable pretty URLs. Okay. So, um, what I'm going to do here is, uh, we're going to go into edit
61:55 collection, and I'm going to go into here, and we're going to do slashblog slash ID. Okay. And we're going to set
62:03 it to use pretty URLs and save. Okay.
62:12 [clears throat] So, now, um, let's just make sure pretty URLs work first, right? Let's uh
62:30 oh uh because I'm st I because I'm using stacks. Another step if we want to use pretty URLs um is we need to go into the
62:39 um pretty URL builder. Okay. And we're going to set up our pretty URLs.
62:51 generate server rules. All right. So, this um I already saved I had already done this work manually. Um if you if I would have went here, I could have said
63:00 save collection and it would have saved the correct thing that I just manually typed into the collection. Um and now what we're going to do is we're going to go ahead and copy this.
63:10 And I'm going to I need to go back into that. Where is here? Into the HD access file. And we're going to save that right
63:19 here. There we go. Don't need that again. Okay. Interesting. Where does that go?
63:29 Does that go before or after this? I don't know. Let's see. U. Let's go ahead and save that. So now if we refresh this page and if I
63:38 click on this. Excellent. All right. So now I that that's working. Now we have pretty URLs. If you look now I have pretty URLs. Okay. Now let's get the
63:49 let's get the SEO working. And this SEO is going to be pulling it from
63:58 the collection. All right. So inside, let's see what what or what meta tags are added right
64:08 now. Right now, it has the title tags of Yeti Bros, which is the defaults. All right. So now,
64:16 um, this is where I think I might need to, uh, do some enhancements. Um, so in here, we're going to go into edit
64:24 collection. We're going to go into SEO. Right. This is an article. Okay. So all of these blog posts are articles. The title property is uh title. Uh the
64:37 description or yeah description property is going to be the summary and the image property is the image.
64:45 There we go. We're going to save that. Okay. So we're going to go into here.
64:53 We're going to refresh. Interesting. [clears throat]
65:04 Okay. Uh, darn.
65:13 So, I I got pretty far. I think I'm going to have to do a little bit of work to make sure that this workflow that I just showed you is going to work. Okay.
65:22 Um, wonder if do I need to add a page.
65:41 All right. So, I do slashblog um slash. Maybe I need to add in a parameter like this. Okay. So, yeah, we're going to
65:52 match that. And then we're going to do stacks is that. And then we're going to do Okay. Then we're going to do um I think I think this might be it. We're
66:01 going to do um title. Okay. Um title.
66:10 Uh [snorts] uh I'm gonna say it's article. Actually, we're going to say collection default. And actually, what I want to do is I'm
66:19 going to I'm going to leave all of these blank cuz I want to see if what it does is pull in
66:27 Oh. Uh, I need to give it a blog post. All right.
66:39 Okay. Let's see. Ah, darn it. Oh, wait. Blog post. Okay.
66:48 blog post. Wait, that is I forget what I did in this was blog post ID. Okay, this was
66:57 okay. Got it. This is the that's the main blog page. And if I click on that, it's giving me the same. Okay, need a
67:06 little bit of work on that, guys. All right. Um, excellent.
67:17 Let's see if I did um yeti post
67:26 just so we can kind of see something unique there.
67:37 Oh, we are getting something. It's here with the title does say Yeti post. Oh, interesting. Okay.
67:47 But it should be okay. It's not getting the data from the actual blog post object
67:58 and injecting it. All right. So, what if I do um Yeti post
68:06 uh I do title. Let's do that.
68:18 Title just says get the title information and Okay. See, it [clears throat] literally does it.
68:26 Okay. Okay. Um Okay, guys. Um I'm not going to continue
68:35 troubleshooting this. Uh obviously I there's a little bit of work. Uh I got pretty far um with it working. seamlessly. But uh yeah, but that gives
68:44 you kind of an idea of how to uh manage SEO with a stacks built website. Um I
68:53 will have to do a follow-up um with how the solution for you know object pages, okay? And how to manage how to get that
69:01 SEO working. Um I have it working if you use site builder. Um but if you're using a STAX built website, I'm going to have to uh figure out the workflow for that.
69:11 So, um, stay tuned. Um, obviously I will get that fixed and and, uh, it'll be in the official 353 update, which hasn't
69:19 shipped yet. Um, some other really cool things that I think are in 3.3 that I wanted to uh, kind of show off a little
69:28 bit, is 3.5 added a bunch of kind of sidebar nav items. Your brain hurts again. Sorry. Um, okay.
69:38 Uh if we go into settings now and we go into dashboard, uh you can actually hide menu items now. So let's say you know you're not going to use builder or
69:48 mailer or um automations, right? And data views, you can go ahead and select those inside the dashboard settings and
69:56 click save settings. And if I refresh my page, those are all gone now. And they're they're not
70:05 totally gone. you can you can get access them through this little more menu um option. But uh yeah, a nice little thing. That's that's pretty cool.
70:15 Another uh new thing is there is now a uh video URL or or a video field. All right. So,
70:25 let's go ahead and I'm going to create a new video. Let's just call this YouTube. Okay. and let's put in a YouTube URL.
70:39 Right. I think this is actually this live stream we're on right now. It'll be interesting to see how that works. Let's go ahead and click save.
70:47 Okay. Um and it is. So, um what's kind of cool, so you just put in your video URL. It supports many different services, but um you put in the URL. It
70:57 discovered that it was YouTube. And if you notice, it actually loaded in the thumbnail from YouTube. But hopefully uh this uh shows you that hey I can still
71:07 upload an image here. Um and so what you can do is you can say oh yes I want to upload my own image. And when you upload your own image it says poster and then
71:16 you get all of the the fancy image works options like we do when a image is managed by the CMS. Okay. So pretty cool. Um in this update there's also
71:26 going to be a video stack. But let me show you um really quick. If we go into uh the playground,
71:34 we're going to do um CMS. And then our ID, which is YouTube. Okay.
71:43 Um so that's all we need. I'm going to click render and voila. Okay. But what's really cool here, um a it used my image thumbnail.
71:53 Okay. Um, and in order to improve and make sure that we have very fast page loads, the player is not loaded. It's
72:02 loaded on demand. So, what we do is we get our thumbnail. It adds a little play button for us. Um, and when you click on that, the player is then loaded
72:12 dynamically. And funny, look, kind of see the lag there. Um, wow, that's like a minute behind it looks like. Um, or oh no, no, that's inside playground. Um, so
72:22 yeah, pretty cool. That is the And boom, there it goes. It works with live streams. Actually, someone asked me, will this work with live streams? It does. Okay, pretty cool.
72:34 Um, so yeah. Um, other things that were done group here that is stuff that is very internal to Total CMS that you might not
72:43 ever use. Kind of see how Total CMS uses. It's just kind of an uh it supports uh podcasts now and podcast feeds and all that jazz.
72:53 Um I think a couple other uh minor things here or there um to um before 3.6 comes
73:02 um if you're curious what 3.6 their marketplace for extensions um total CMS and stack 6 um I thought
73:10 hopefully you learned a little bit on how thing um and yeah more ships. So, thank you guys. Um, I appreciate um,
73:20 yeah, I appreciate you guys. Hopefully join us on Friday. Uh if you have more questions, I'll probably up and ask