Transcript

00:05 There we go.
00:10 Okay. My goodness, that was some technical difficulties.
00:17 Stuff wasn't wanting to work.
00:21 [Music]
00:24 So, sorry about that everybody. But uh yeah, I had all kinds of technical difficulties today. First, my my desk wouldn't I have a standing desk and it
00:33 would wouldn't come up and then like I don't I won't go into it all but yeah, all kinds of stuff wasn't working. So, excellent. Sounds good. Thank you very
00:41 much, David. You knew I was going to ask. Um it's been a few weeks. So, yeah, it's been a a really super busy few weeks, and I have to admit I'm super
00:50 busy right now, but I didn't want to skip um yeah, sharing uh some awesomeness with all of you guys. Okay.
00:59 Um I already see some questions in the chat. Mr. Cole is wondering if Total CS3 is out of beta yet. Um it is not out of
01:06 beta yet. Um but I feel that what is there isn't beta
01:14 software anymore. Okay. Um the reason that it's still in beta um is
01:22 that you know there there's just things that I need to get done um such as as of this week I'm actually working on like
01:30 the whole new licensing and purchasing of licensing systems. So like you know that stuff doesn't interact with the you doesn't mess with the functionality of
01:38 the product at all. Obviously it's not bug free. I still have a bunch of fixes that I will get in this next beta hopefully by next week. Um but with that
01:47 said um the CMS itself is rock solid. Um there's already been some really amazing
01:54 websites built with it and uh yeah it's definitely production ready. Um, the only thing that's waiting on me is
02:03 allowing you to buy it and actually get licenses. Um, which I think you've already purchased a copy, uh, Mr. Cole.
02:11 So, um, you can go ahead and use that.
02:13 Um, eventually once I get the licensing system built and up and running, it I'll I'll send all of you, everyone that
02:20 purchased a, uh, a license. Um, and there's other things I need to do such as like documentation. I need to, you know, polish the stacks up a little bit.
02:30 Um, you know, the stacks currently don't have unique icons and, you know, stuff like that. It really isn't necessarily
02:37 the functionality of the CMS. It's all getting the adding the polish um to to the app, right? Um, so anyway, there we go.
02:48 Um, excellent. It's been a minute. Yeah, it's been about three or four weeks. So,
02:55 um, you know, four weeks ago, I came up with a, uh, a goal for myself to ship
03:02 six products in 3 weeks. And, um, I missed it. You know, probably, if you guys saw my my newsletter, I I did miss
03:10 that goal, right? Um, I officially shipped four products in 3 weeks, which is still pretty darn good. Okay. And I
03:18 have one more that the product is actually done.
03:21 um Prince, but I uh I haven't released it yet because well, this week is WWDC and if thing if anything I've learned
03:29 over the past 15 years is thou shalt not release on the week of WWDC. So, I'm not releasing it um until next week
03:37 officially. Um but you'll guys get a tour today. Um so, there we go. Stax Pro. Um STAX Pro is Steve. It is now
03:46 called Stax 6. We've dropped the pro from the name. It's just going to be called STAX. Stacks version 6 um is going to be the app um that is currently
03:55 in beta as well. Um and actually Isaiah just was posting on his Discord channel today some screenshots of it of it
04:04 already running in Tahoe. So um yeah, he's going to wrap up uh this current beta release with a little bow. He
04:12 wanted to um see what surprises Apple had in store for him this week um before he shipped a beta. So, I know he's
04:20 working on a few things to make sure that uh you know, some things are fixed and uh yeah, then he'll we should have a
04:27 new beta pretty soon. Okay. I was hoping we get it. I I think if this week wasn't WWDC week, pretty sure we'd have a beta
04:35 this week, but because of WWDC and and some surprises Apple shipped or didn't ship, um yeah, we're we'll probably have
04:43 to delay that. So, uh, I don't want to give you a time frame cuz I could say next week and then it'll be two weeks from now. I don't know. But pretty soon we should have a new a new beta for STAX
04:52 6. Um, I will confirm that it has um it has a bunch of background fixes for like
04:59 um some sparkles, some stacks update stuff. There are some crashers for you know opening up various project files,
05:06 crashes for pasting stuff for between your existing stacks of projects in stack six. Um, and then PHP. Um, big
05:16 major update to the PHP engine in preview. So that stacks like feeds and whatnot. I will confirm that feeds now works great within preview. Um, I still
05:26 need a little bit of work and this is on me. Some work on total CMS 3 within stacks preview.
05:33 I had to do some special magic to get it to work in rapid weaver preview. And stacks preview is just slightly different. So I have to come up with a a
05:42 new uh a new fix for that. Okay. So some new tweaks so that so that total CMS3 will work. Total CS3 the stack itself
05:50 will work just fine. If you're willing to publish um maybe either locally or to your server um it will work 100%. Um
05:58 it should um again I haven't tested that because yeah I'm still working on getting the preview working of that. So anyway okay um but anyway that's enough
06:07 about the betas. you have you guys have any more questions um about any of that, happy to answer more at the end. Okay, but let's start diving into some of the
06:16 awesome new products. And I have two new product two products that aren't even mine that I'm going to show off. I don't know if Yan is here at all. Um but yeah,
06:24 we're going to we're going to show off two products of his. I don't have the stacks itself. Um but we can go ahead and look at the product pages. Okay, so um let's go ahead and share my screen.
06:37 Uh, okay. And then we'll uh we're going to dive in and let's go ahead and look at I'm just going to open
06:45 up a browser. We're going to go to um the first first stack. Um which seems like I
06:55 released this so long ago, but it was only three weeks ago that I shipped fit text. Um crazy. It really feels like I
07:03 shipped sh I I shipped fit text like months ago. It feels like that's how much I've worked in the past 3 weeks. It
07:11 was only 3 weeks ago I released this. I guess technically four weeks ago. Okay.
07:15 But um we're going to count it. Um three and a half. Three and a half. Okay. Um
07:22 so what is Fitex? Okay. Uh hopefully you've watched the uh the video on this page. Super short. I think it's only like a four minute video, a three minute
07:30 video. Okay. Um, but it allows us to um nicely dynamically size um headers,
07:39 right? So, really cool. Man, it feels like I've shipped this so long ago and I know I've never showed it on a live stream. So, here we go. Right. Um, as
07:47 you see, it allows us to dynamically the the headers will dynamically size um for the browser. Okay. So, no matter what
07:54 the browser is um it will dynamically fit the text. Okay. Um there are it comes with two different stacks actually. It comes with uh Fitex and Fitex.js.
08:04 Okay. Um now you might be wondering um what's the difference here? Uh if we look at this particular
08:11 one here, we'll notice that as I as I um resize the browser, the text is dynamically sizing with the browser.
08:19 Okay. Um but this one down here, it kind of waits a little bit. Oh, oops.
08:25 It kind of waits a little bit. Um, again, our our users aren't going to be doing this anyway, right? But, um, fit
08:32 text.js ensures that the the header or your text automatically fills up the
08:38 entire space. If we look at the, um, R here, we'll notice that it is um it is always going to be to the end of that
08:47 box, right? Whereas this one here, um, it's close. Um, but this one uses just
08:55 native CSS. Um, this one uses some a little bit of JavaScript to accomplish that. So, um, if you don't need a header
09:02 to go full exactly with and fill an exact area, I'd recommend just using the normal fit text fit text stack. Um, else
09:10 we do have the fit textjs which use again uses some JavaScript to ensure it's like pixel perfect width, right?
09:18 Um, here's a cool use case of fitext. um you know it's some some cool like little banner um kind of banner text uh which is uh always nice. Okay.
09:30 Um I guess here we'll uh we'll go ahead and um we will open up the project file
09:40 and most of the project files today we're going to be looking at them inside stack 6. Okay. Um this is the fitex demo
09:49 file. This actually ships with the stacks. Every stack I release from now on will come with a stack 6 project
09:58 file. Okay. Some uh I get a lot of people asking what's this fitex.stack folder in my download. Well, if you have
10:07 stack 6 installed, it doesn't look like a folder and it looks like a project file. So, um here I'll just show you show it off. Let's go and um go into I'll find fit text. Um, so there we go.
10:19 It is um it is a stacks file. Okay. So there we go. This is what comes with a stack now. Um maybe eventually we'll
10:28 stop shipping wrap 8 projects. Okay. Um but yeah, here is the actual stack. Here is the stacks project file. And if you
10:37 don't have stack 6 installed, this will show up as a folder. Okay. But um hopefully everyone here has stack 6. Um, if you don't know where to get it, go on
10:45 the community on the Weaverspace community and you can there's links there in the announcement and you can uh download the latest beta for stacks.
10:54 Okay. Um, actually in any stack I ship will also have a a link here um to the
11:04 down to the stacks download. Okay. So, um actually, you know what? I didn't even test that. But anyway, I think any
11:12 stack that I've shipped since I think last week, so Fitex actually might not have it. Um should have a link to uh the
11:19 uh the stacks thing. Let's go ahead and uh it'll look like it'll look like that, right? So, it'll
11:27 be stacks app download. It'll be that little icon and uh if you double click on that, that will download stacks.
11:35 Okay. Um, so there we go. That will download the STAX app. Anyway, let's get back to this project file. Keep talking
11:42 about STAX 6, which is awesome. Um, here's the demo. Uh, again, this is the project file that ships with Fitex.
11:51 Okay. And you'll notice that we have, uh, two stacks. We have Fitext and FitexJS.
11:56 Okay. And the settings are going to be very, very, very similar. Okay. Um because yeah uh the sizing in fit textjs
12:05 uses this CSS um so that you get really close to the size that we need um and then it uses then the JS kicks in to
12:13 allow that uh you know that full width guaranteed. Okay. Um but here basically what you do is you you supply what HTML element you want for SEO purposes. Okay.
12:24 Um you supply the minimum size and at what breakpoint. So here by default at 30 320 pixels it's going to be 32 pixels
12:33 tall and then at um 1240 pixels it will be 94 pixels tall. So any everything in
12:40 between there it's dynamically sizing it. Okay the CSS behind this is actually pretty nuts. It actually uses algebra in the CSS to predict the linear um scale.
12:52 Um, yeah, I had to like calculate y intercepts and and and slopes and y intercepts to do all that if any of you know what any of that is. Um, yeah,
13:09 configurations really easy to use. If we go and preview in this, we can just, as we can see, we can dynamically size that.
13:18 Okay. Uh, and here's a demo of it being used inside of like a, you know, a classic kind of banner, you know. Um,
13:26 then down on the page, you'll notice that it not only comes with fit text, um, and fit textjs, but it also comes
13:32 with swatches. Okay? So, um, in this demo here, I'm using FitexJS.
13:38 Okay? And this is a fit.js swatch that I am running on this banner right here.
13:46 Okay? Now, if you want to see how I did all of this, um, you know, I used some various swatches to kind of, uh, if we preview this again, you know, to make to
13:55 make change the fonts on some of these, to change some of the weights, to change what, you know, the size and the color um, on various lines. If you're curious
14:02 how I do that, this is all with some spans inside of a header. Okay. Um, so
14:09 yeah, I I just in my header stack, this is just a straight up um I think this is a Foundation 6 header or this could be a
14:17 starter pack header. I think it's a starter pack header. Um, but same same implementation goes both ways. Um, you can go ahead and add spans to do all of
14:26 your So I can target each individual line here, right? Um, yeah. And then you can go through these styles and kind of see how I did that. you can, you know, do, you know, I can target the um spans.
14:37 I can target the even ones. I'm using the nth child even and then I'm using nth child odd to do other stuff. And um
14:44 and then the fit textjs makes it all fit beautifully, right? So, uh yeah, pretty cool there. That's how we can get it all
14:52 to fit in this cool little text block like that. That's a perfect use case for fit.js JS because I want to make sure
14:59 that all the lines are uniform on both sides.
15:04 Okay, so anyway, go check out that's all for fit text. Um it's super simple um
15:11 stack to use and yeah, a lot of people have already said, "Wow, this is their new favorite stack, right?" And they're
15:18 using it on all the headers and whatnot on their sites. So go check that out. Um are there any questions on that? Okay, cool.
15:29 Um, hey Rion, thanks for coming in. Just saw your chat. And we got uh Scott Williams
15:38 in the house, too. Cool. Um, the next stack that was released. Okay, we'll go through all all my stacks first. The
15:45 next one is Eclipse. Oops. If I can learn how to type.
15:51 Okay, now Eclipse, this is a new version. Um the prior version of Eclipse basically did um background slideshows
16:07 okay, is that you can add background video and slideshows to anything. It can still do your website background, okay,
16:16 but um the power is that you can add it to any container that you want, right?
16:22 So perfect. Like as you see right here, I had the video that then transitions directly into a static image. Um, you
16:29 can also, if you notice, this one is a slideshow, but I've added an overlay and a blur effect, right? And we also have
16:37 like a little timer at the bottom, so you can kind of see when things are, you know, going to change. And all that settings inside the stack. The stack's
16:44 um, pretty easy to use. I think it's pretty cool. Okay. Um, so as you see, you know, we got backgrounds, you know, a slideshow here and this and you can
16:53 mix actually video and images. Okay, which is really cool. Um, I think here if we I think the next slide is going to be uh video.
17:05 Nope, I think it's slide number two. Hold on. Let's see.
17:14 Ah, whatever. that you can you can intermix video and images. Um, as you saw in this one, right? It had an a video and then an image. Okay, so it's
17:22 really cool that you can do that. Um, as I said, it has overlays. Okay, so here's uh it actually ships with uh 30
17:31 different overlay images that allow you to add a little bit of um kind of a barrier between your background image
17:38 and the content. Right now, this one here uses like a um just a solid color, uses like a transparent black, and then obviously we apply a blur effect, right?
17:48 But these um overlay images, as you see, it gives you a little design as well, like it's either a grid or a mesh or something like that. So, they're
17:56 extremely small PGs. Um I have light and dark versions. Actually, if we click on this overlay gallery, um you can see
18:04 examples of all of them. And in this gallery, if you hover over, you can see the image with and without that overlay
18:11 image, right? Um that that's a feature of just of the demo page. So you can kind of see that. It's not necessarily a feature of the stack. I don't think it's
18:19 really something you probably want. Um so but it is it allows you to kind of see the difference on what that overlay
18:25 does. And because overlays you can also do like opacity on it, you can really make it subtle or kind of in your face
18:33 if you need to. Okay. um such as this one right here is kind of in your face a little bit. May maybe it would look better if I made this this particular demo here maybe increase the opacity a
18:42 little bit or something. Right? So, as you see, there's a lot of um you know, demos here. Um as you see further down,
18:49 there's these are the light demos and there's dark. So, there's dark overlays and light overlays.
18:55 Okay? And all these overlays exist inside of the um stacks library um in the images tab. Okay.
19:06 All right. Let's go back.
19:10 Um last this last demo is really interesting in that you know I had an idea of well what if I don't want really
19:18 want images like images can maybe it's too heavy for my uh layout. I just want something super subtle and nice. So I
19:25 give you the ability to have just a simple colored background slide. And as you see here, this is a gradient and we have different colors kind of fading in.
19:35 So it's doing a slideshow, but it's a slideshow of just colors, right? So it gives a very interesting effect. Um, very subtle, but can add some
19:43 eye-catching, you know, uh, sections to your site. Pretty nice. Okay. Now, built for performance. Um what this means is
19:51 um while you can't see this okay um whenever eclipse goes out of the view
20:07 we don't want to use up uh a you know a systems resources especially on phones and mobile um when we don't have to. So,
20:16 um, when these are scrolled out of view and it's paused, okay, if you notice, if I scroll back down, it's still on that
20:23 same slide that it was before, right? It didn't transition. And that's because it paused when it was out of view, right?
20:30 So, really cool. Um, same thing for videos. Videos will pause when they're out of view. Okay. Um, I I skipped over the full screen demos. Let's go ahead and click on that.
20:40 So here here's an example of, you know, a video that can be used as the background of your website, right? Um I
20:49 think this video is just too cool. I saw it and was like, I have to use that in my demo, right? Um so anyway, yeah, this
20:56 is an example of how you can have a full screen video um as the background of the website. Now, when it's the background of the website, if we look at this next demo, we'll kind of see how that
21:05 behaves, right? So here we have a background video, okay? But um when I scroll, you'll notice that the it is the
21:12 background of the website. Okay. So um the content will scroll over it. Right?
21:21 So that's how the effect works when you're using Eclipse to fill in the background of a website. This is basically what Eclipse used to be. It
21:29 used to be just this. But I think um you know giving the ability to have it on anything you want um gives us a lot more
21:37 flexibility. makes the pack the stack uh much more usable. Okay.
21:44 Um let's go ahead and uh let's have a look at the project file. Let's go to Eclipse 2. And again, this is the stacks project file that comes with the stack.
21:56 Um and let's just go ahead and look at um here is the first demo. Okay. And uh this is the one that has the video and
22:05 the uh image, right? It's that first demo that we saw. And in Eclipse, you'll notice that there there actually aren't too many settings.
22:14 It it does a lot with just a little bit of settings here. Okay. So, we have a delay and fade effect. So, how long do we want to pause on each slide and how
22:24 how long do we want that fade transition to happen? Okay. A lot of times for normal like sliders, you want a fast transition, but I found for something
22:32 like this that's in the background, you want it slow, right? you you don't want it someone to notice that it's changing.
22:39 So you really want it in my opinion to be slow. So that's why you know a lot of my demos here I have it four to five 6 seconds between the the fade
22:48 transitions. Now you definitely want to make sure that your fade is lower than your delay or else it's not things aren't going to work well. Okay.
22:58 So your delay has to be a bigger number than the fade. Okay. But um here if you want to add it to be a site background and you can shuffle slides you can loop
23:06 through the slides if you have loop like this demo once it reached the last slide which was the image it stopped right um
23:14 so if I didn't want that to happen I can turn on loop slides and it will just kind of keep going um in a loop um you can fade in first slide so
23:23 basically on page load it'll fade that that background in instead of just being there. Okay. Um, you can show or or hide the timer and there's options for that.
23:33 And then obviously you can show or hide the overlay. Um, if you if you don't want an overlay tile, just leave this image blank. Um, and then you can drag
23:41 in the images from your library into here, those tile images. Okay? And then you can adjust the opacity. And if
23:49 again, if you want a colored background, uh, you would add that there. And you can adjust that opacity.
23:56 Um there's also custom classes. So you can tweak this as much as you want with swatches, right? So as here I have, you know, I've added padding and a border
24:04 radius and I've given it alt colors, right? So these aren't necessarily obviously aren't Eclipse specific, but
24:11 um a really great way to show how we can use swatches with Eclipse um to give something like those rounded corners that we saw in the demo here, right?
24:21 Um now adding slides is super easy.
24:24 There's a little child stack. Um, now you can add whatever content you want in here. Here I just have a couple headers, but you can add in, as you see in here,
24:31 I have um a lot more columns, you know, a three column content with some icons and whatnot. And below that, I have all my slides. Now, when we go ahead and add
24:40 our slides, you can add in Eclipse videos, an Eclipse video, an image warehouse, an Eclipse color. Okay. Um,
24:49 so yeah, and each one of those will have its own um settings, right? So a video obviously has you have to give it the URL to a poster image, a URL to your
24:58 video and we allow you to have uh you know small, medium and large videos.
25:02 Same thing for images where you can have a small, medium and large or default image and then you can supply custom ones for medium and large if you wanted.
25:09 Right? So super flexible there. Um now actually one thing that you can we can do if we look at this particular demo.
25:18 Um now on the eclipse slides you'll notice when we added an overlay um we just had three options. we have a a color you can you can actually add a
25:25 transparency to the color and then you can add an opacity to the overall um overlay. Okay. Now
25:33 if we look at the overlay settings here in each slide. Okay. Um a you can add a custom overlay for every slide. So maybe
25:42 every slide you want to have a different color overlay or some different settings. But one feature we extra we get when we add a slide is that we can
25:50 add a blur. Okay. Unfortunately, the way the overlay happens at the the entire eclipse level, you cannot do blurs.
25:59 Okay. Um it just it things don't work.
26:02 It just it works only if you add it to every single specific um image. Okay. Or slide, I should say, because you can add
26:10 it to video as well. Now, a quick way if you want to quickly do this is just kind of select all of your stacks and just do option uh or commandclick all of them.
26:20 Um, and then oops, uh, commandclick all the same slides. And then you can adjust the settings. Okay. If I command click the video, the video is a different stack, so it doesn't show any settings.
26:30 So in this case, I have a video and four images. I could select all the images and then um, yeah, show that.
26:42 Okay, next up.
26:46 So, uh, yep. And then if we look at further down, here's an example of um
26:53 oh well the tiles are super small so you can't really notice that there's an image in there but there there's a there's a tiled image dragged into there. Okay. And then here's example of
27:02 color slides right where I have I just have a color in the slide. Now this one in particular actually have a class um
27:10 that uses a gradient swatch and applies a gradient um you know to to that particular slide. So something a little
27:17 bit different that uses a swatch. Um swatch is probably somewhere on the top.
27:21 Oh, right here. Right. Sar just uses a normal gradient background swatch um to create this custom gradient. So pretty cool.
27:33 Okay.
27:45 Um, all right. Next up, we're going to look at uh the two accordians that I
27:51 shipped last week or last week, week before. Okay. Time
28:02 flies when you're having fun. Um, so the first one we'll look at is kind of the simpler of the two and that is drawers.
28:10 Okay. And um drawers is just a simple nononsense accordion. Okay. Here we have
28:18 an example of an accordion where um yeah a particular uh drawer will open one at
28:25 a time. Uh it has a nice animation. It kind of has that traditional accordion look. Um and this example down here we can actually have multiple open. Okay.
28:34 So you see we we can style things slightly differently. I have here I have no little marker. Here we have a little open and close marker. Um, that's just
28:42 kind of simple, right? Um, obviously we've styled things slightly differently. Here it has a background that's tied to it. So kind of each one
28:50 looks like it's kind of this individual little item. Okay.
28:55 And then the last kind of a demo we have here is kind of your traditional FAQ look where um each individual one is just kind of a a text box. We don't
29:04 really have like a a block look to the title. Um, it's just some text that when you open it, it shows off the content in
29:11 the background, right? Um, now what's also really cool is where do I have in this demo here? Um, you can actually
29:19 link directly to a drawer. So, when I click on this particular link, it'll take me directly to drawer number two.
29:25 Now, what's cool is you can you can link these from um a link on the page or you can link them from an external page. So,
29:33 if you want to link to a drawer number two from a different page, you can do that, right? Um, so it's really, really easy to do that. Okay. And let's see it.
29:41 Let's see how uh hard that is to or easy it is to use drawers.
29:48 So, as usual, this is the demo file that ships with drawers.
29:52 And um here is the drawer stack. And just like a lot of other stacks that you know obviously have uh various child
30:11 So um here we have in the drawer stack.
30:13 Let's look at some of the the main settings we have in the parent drawers stack. Um we can have one drawer open at
30:21 a time. First we can open the first drawer on load. Right now, what's powerful about this, which is different than many other accordians, is you can
30:28 drag and drop these, right? So, you know, I can drag and drop um these accordion items around or these drawers and change the order.
30:39 Um but sometimes you just want to say, "Hey, open the first one on load." That's it. Uh whether or not we want to show markers or not. Okay. Now, I do
30:48 have to say um with markers um inside preview sometimes the if you especially if you use a custom marker, they don't
30:56 they don't necessarily change. Okay. But if you preview in the browser, you'll notice the markers are are what you would expect. Okay. Um so you can do
31:05 custom markers here. You can obviously you can change the size of the marker.
31:10 Um and then we can have custo we have two animations. Uh just to keep it simple. Uh we have one and two two different animations that you can toggle
31:17 toggle between. And then the timing basically how long does it take to open and close. Um the content background by default it's going to be transparent. So
31:25 basically you just set this to be opacity zero. There's no content in the drawer content. But you probably want to have padding, right? So we can change some add some add some padding there.
31:34 Now for the titles we have a lot of options, right? We have a background color option, text color options, borders, um you know, gutters in
31:43 between. So, do you want any spaces in between? Um if you want to see if I set this gutter to zero, um they're
31:51 basically going to be right on top of each other. Now, if you have a border that you probably want a gutter, it doesn't really look great there. Um but
31:58 yeah, if this particular demo, like if they were touching each other, they'd probably look pretty good. Okay. Um so, there we go.
32:08 um obviously font size, padding, and all that jazz. And then obviously it's like anything you can apply classes. So you can use swatches to style stuff. Um now
32:16 inside the individual drawer stack, um the the main setting here is if you want to link to an item, you have to turn that on and then give it a unique ID.
32:25 And this ID has to be unique on the page. Every drawer can have its own unique um link. Um and basically how you
32:33 would link to that is how you'd seen it many other times. is you just link to the hashtag. So you do hashtag and then the ID and that's it. It's all you got
32:40 to do um anywhere on the page or if you add it to the URL from a different page um just link directly to that drawer. It
32:48 will scroll to that drawer and open it all at the same time.
32:55 Franco said in some themes he noticed markers do not show up. Um, I shipped an update, at least I hope I shipped this
33:01 update that, um, this show markers box is on by default. Just make sure that that's on and it the the update that I
33:10 just shipped last week, I think, um, should show the markers because actually on on my Weaver Space site, um, the
33:17 markers were not showing. So, um, I made sure I ship an update that allowed, uh, you know, to kind of force those. So, it's controlled whether or not this
33:25 checkbox show markers is set. If it is turned on and you still don't see your markers, let me know. I'll have a look
33:32 and I'll get another update out. Okay, but this should be pretty pretty good.
33:37 It should be pretty stringent, but let me know if that ever happens. Franco, thanks for letting me know about that. Okay, so that's drawers everybody.
33:45 Again, it's just a simple nononsense accordion that works really, really well. Okay. Um, now let's go up to the last or the the last new demo from me.
33:57 Okay. And, uh, let's go to uh, Squeezebox.
34:08 Now, Squeezebox is kind of like the big brother of drawers. Um, it is still an accordion, okay? But we just have a lot more styles and custom customability.
34:18 Okay. Customizability. Hm. I don't know wordsmiths out there. Is that a word? Customizability.
34:26 The ability to customize. There we go.
34:28 Okay. Um, so yeah, there's just a lot of different options. Now, you might think, "Oh, those don't look all that great or, you
34:36 know, they don't look all that special." It's always the little minor details, guys. Okay,
34:45 if you talk to any major I so if you know David from Foundation Box um so what what made me kind of go down this
34:53 route with Squeezebox was he showed me one of his project files and the number of swatches that he needed to customize
35:01 the Foundation 6 accordion to look good in all situations was insane. Okay. So I
35:09 was like I need to make sure that all those settings are taken care of in a very smart way and let me talk let me let me give you some examples here.
35:19 Okay. So let's look at these demos. Now first off this first demo here is actually what you get out of the box. So this is an actually an instance of
35:26 Squeezebox with zero changes. This is what it looks like out of the box.
35:32 What you'll notice is that we have dividers in between each one. Okay. And now when you when I open it, you'll
35:40 notice that the there's a content background. It kind of looks like one unit, right? Um when I open this, the the bottom border is gone. Okay. Um I
35:50 have round corners set, but it only sets the round corners on where it makes sense, which is around the outside of
35:56 the box. Box two doesn't have any border radius, but box three does on the bottom. Now, when I open this bottom
36:03 box, you'll notice that here, because I have a background here, the corners on this are now square and the round
36:12 corners are down here. Right? So, all these little attention to details is what makes this smart layout work. Now,
36:20 let's look at this example with no borders. Okay? So, here it kind of has a a an a uniform look of a box. There's no borders. When I hover over it, we have
36:28 different styles. And when I click on that, now this is different. This there's no background color here. It's
36:35 it shows the background of the site. So in this case, Squeezebox does something different. What it does is it actually
36:42 adds round corners to the bottom and to the top of this one, right? So that no matter Now if we I open box two, the round corners are here and here, right?
36:54 So, all these little details make a big difference for something that's very polished. Okay. Um, I won't dive into
37:02 all the other things, but that that is just one little thing. You know, there's things with with borders colliding, making sure that we we don't have like
37:10 in this example here, um, I I can't have a border on this and this because that would look bad with two lines, right?
37:17 Just like kind of kind of like what I saw when when we had the borders with the with the no gutter and drawers, right? Um, Squeezebox takes care of
37:24 that. So, it eliminates that. So, we only have one thin border line, right? Which is nice.
37:31 In this example here, um, each one kind of looks like its own individual boxed component with a gutter. Um, the the
37:38 border in this case goes all the way around. Okay. You'll notice that we have custom animations and custom icons over here. Okay. Um, here we have no border.
37:48 Okay. Another custom icon with a custom animation. Um, and here we have again that kind of the look like we had up here, but with gutters. Now, when we
37:56 have a gutter, we want to make sure that the round corners are always visible on everything, right? But on this one, if we notice here, it we have the round
38:04 corners, and when I open it, the round corners are at the bottom of each individual item. All these are just kind of various small little details that
38:13 make squeeze box different and set apart from everything else. It does a lot of the hard work for you. Okay. Um, so
38:21 here's again another traditional kind of layout. Um, kind of the FAQ style layout that you can also do with Squeezebox.
38:27 Okay. And just like with drawers, you can link to a particular uh Well, let's close it and then click on it. You can link to a particular um, you know,
38:34 section and and do that. I kind of like this actual this custom animation is kind of cool. I like it how it kind of it grows when you open it. Pretty slick.
38:49 Uh, oh, David says I can show the project file. Um, David is going to be releasing something pretty soon. Um, I don't know if I have the final version
38:58 of the project file, but I'll uh I'll definitely open it. So, um, or I don't know if that's a project file
39:05 you wanted me to show off, David. So, I don't know if you're cool with that. Uh, but may maybe I'll show it off. Okay.
39:11 Um, I'll give you a sneak peek to to people. Uh you you give me the thumbs up if you want me to show uh that off to
39:17 people, David. Okay. Um sweet. That that does it for um the stacks that I've already released. Okay.
39:28 To give you guys a little break, let's jump over the community. And Johan has released a couple of really amazing products um that I think are just kind
39:37 of different. Um I really like them. So um first one's Pagionator. And let's go ahead and have a look at that.
39:48 and pageionator. What it does is it allows you to um uh oh it's still thinking. Okay. Um it
39:56 allows you to add pageionation to any kind of existing layout that you have. Right? So in this case here he has
40:03 columns pro um and he's just pageionating through the items in columns pro. Right? Pretty clever. Okay.
40:10 Here he has an example of of a block grid and he's pagionating through that, right? And actually I like the if you I
40:18 think if you click on I think it was on mobile I did it. I the interface for this pageionator is actually quite nice on mobile as well. I think you can like
40:26 tap this and it gives you like a little thing but you can also type in I think if I wanted to go to page two or something like that you say go and
40:33 voila. Right. So it's a nice um interface. OS allows you to uh navigate through. Here's a example of Bento.
40:41 Okay. And you can pageionate through Bento, which is interesting. Okay. Um, here's a total Well, I didn't even Oh,
40:48 yeah. I I don't think it this demo wasn't here before. I don't think maybe it was. I I totally missed this one.
40:53 It's kind of interesting where you can pageionate through a total CMS one blog list. What? Pretty pretty crazy.
41:01 Awesome. Uh, pageionator image viewer.
41:05 Okay. Not sure what's behind it, but there we go. Pretty interesting.
41:15 So, there we go. That's the pageionator stack. Uh, pretty slick. Um, go check that out. Uh, it is on the community.
41:22 Uh, just go to the announcement section and it's currently the top one, right?
41:26 So, check that out. But he had another one that was released that um, actually it was on that that demo actually had a
41:34 demo of it. But um I think this is a pretty clever little stack.
41:40 Okay. Um and this is a different this is called PDF first look. Okay. And um it
41:49 is really interesting. Okay. Um I have to say uh I'm quite impressed with it.
41:55 Uh and basically what it is, you give it a PDF and it displays the first page of your PDF as an image. Okay. Um, and uh,
42:05 you can either download or you can just say show the PDF and it will take, you know, take you to the PDF. Maybe you can click on it and use PDF Pro or something
42:13 like that in a light box or something like that. But yeah, you can click on download PDF. It looks like maybe you can also round the corners off. Some of
42:20 them have Oh, I think he has different styles. This one has like a little glow to it. Um, so yeah, different different shadows, uh, round corners. So you can
42:29 add a lot of, you know, kind of styles to that. Wonder if you can use swatches to style them. I don't know. Um, again, I don't have the stack, but very clever.
42:40 Um, I like it. It's something different that I've I don't think I've ever seen this on the web. So, good job on that, Johan. Um, I like it. PDF first look.
42:49 Check that one out. Okay.
42:54 Okay. Um, let's see if David sent me the the latest version of something here.
43:01 Let's go ahead and download.
43:05 All right. So, David has a new project file coming up.
43:11 Okay. And let's preview it online. Okay.
43:16 Um and super cool. Okay. Um it's his first project file in quite a long time.
43:22 And another first, it actually comes with his first ever released stacks, which are right here. these little um
43:29 here if we reload the page you'll see it has these little graphs that have little um little thing that counts up and these
43:36 little things that count up as well. Um so yeah, those are his very first ever stacks. I believe you get those for free
43:43 if you buy the project file. Don't quote me on that, but I think so. Okay. Um I think he has a light and a pro
43:52 version. Uh the pro version um comes with a full admin area that's you know built with total CMS. Um I believe it
44:01 currently uses total CMS one but he has it ready for total CMS 3 for when that's ready since you know everyone's still
44:08 using total CMS one a lot right now right? Um so yeah I think the purpose of this web page or this project file was
44:17 to kind of show off a nice portfolio or like an online resume. Okay, super nice.
44:25 Very elegant. I um you know, we got the banner up here. I think this is actually using Eclipse, the new Eclipse that I just showed off. Um I love when when
44:34 this goes sticky, it kind of has a new kind of pill look that shows off everything and it gets a drop shadow.
44:41 Super elegant. Love that. Okay. Really, really love that. Okay. Obviously, we have these these new stacks here that
44:49 kind of um are the dynamic counters. Um, again, I'm not sure exactly what options are in here. Um, I actually do have
44:56 these stacks, but um, I haven't played with them. Okay, so um, sorry about that, David. Um, here is the accordion
45:04 that now this is a Foundation 6 accordion. Okay, but David showed me the swatches that he used to build this
45:11 effect and wow, it was a lot. And when I saw that, I was like, okay, I I need to make that better for people. Um, hence
45:19 squeezebox happened. Okay. So, um yeah, this does use the uh Foundation 6
45:25 accordion with a ton of swatches, okay, to style it like this. Okay. Um as
45:33 as another thing that's great, I think in the background, this uses parallax, my parallax stack that as you scroll up and down the page, um you get that nice
45:42 it animates side to side as you scroll, right? A really nice effect. Okay.
45:49 Obviously, we have a a slider with a nice accents. I like the uh the font choice here on the names. Pretty cool.
45:56 Okay. Um here's an example of um here where you can add in your education and basically like your work experience. And
46:03 what's really cool is this is just a normal total CMS blog list, right? So, you add in your education via a total
46:10 CMS blog and it will dynamically build that here. Um build the timeline out for you. really cool. Again, no special
46:20 stacks here. It's just total CMS blog list. Uh, pretty slick. Okay. Now, down here, um, we have the portfolio. Now, I
46:28 think for the for all intents and purposes, this was intended to be like a onepage website. Again, kind of like a resume, right? But um when you want to
46:36 display your portfolio, you want the pages to you know you want you want to have more especially like if you have multiple of these like if you
46:45 have a large portfolio that you want to display um you know if you click on this basically I think will it work? Yeah, it takes you to the portfolio page, right?
46:54 So that way you can list out some portfolios. You can go back to view all projects. Um, and there is a project specific page. Okay, so if you go to the
47:02 portfolio page, oh, that's the portfolio section.
47:06 Oh, I'm not sure how you link to that portfolio page, David. Um, but yeah, you you can click through to the individual
47:13 projects and then you can see all projects via the all view all projects.
47:18 But um Oh, there it is. Um not sure how you how to get to this page from the homepage though, David. Just uh just
47:26 saying. Okay, sorry about that. Let's go back to about. All right. Um so anyway, so yeah, um here's the blog list. You
47:34 can add individual projects. We didn't even dive into this. I love the simplicity of this page, right? Super clean, super simple. Um yeah, just very
47:44 elegant. Um, I love the the kind of monotone. You let the images give you the um the color, right? Everything else
47:53 is, you know, the content is king on this page. I like that a lot. Good job.
47:57 I love this actually. This the date style here is very well done as well. A lot of the little things very nicely styled. Good typography. I I like the
48:06 font choice. It's clever. Very nice. All right, let's go back.
48:13 Um, we were at the portfolio section, I think. Yep. And at the bottom here, you're obviously cool. We're at the end.
48:18 So, we're at the contact form, um, where you can contact, you know, you or whomever this is. Have a nice little map over there. Um, so yeah, super nice
48:27 project. Um, and I think he just sent me the latest project file and I do want to share that because
48:35 let's find it here. Oops. I know it downloaded it. What happened?
48:43 Download. Continue to download. Oh, sorry. It's downloading now.
49:13 Now, what is I think going to set this project apart is it's the first project file released
49:21 after the folder stack. Why is that important? Because I mean, come on, look how beautiful um this is, right? Oh, da.
49:32 You need to make sure when you ship this, it's shipped with maybe with them all collapsed. Okay. So, when someone opens it up, it's like And make sure you save it with the homepage. So, it opens up in the homepage. Little things here.
49:44 There we go. Look at that. Look at this homepage. Okay. Um, so he up at the top he has nicely styled kind of
49:52 instructions, but only that like this is a perfect example of why. Now, if you don't have my starter pack, okay,
50:07 off on folders and pen and everything else in that stack set, um, it's pretty insane what you get, okay? You get a lot
50:15 of stacks for free, okay? And, uh, it even has swatches now, okay? Which is something I also shipped in the past month, okay, swatches for everybody, which is pretty cool.
50:26 Um but anyway, um this update that I shipped for folder, was that this week or last week? I don't remember. All the
50:33 time's blurring together now. Okay, I think it was last week. Um where now when you collapse a folder, it
50:41 automatically shows all pens that are inside. So you can kind of see a nice hierarchy of everything that's inside of
50:48 that folder. This is a gamechanging way to organize our project files, okay?
50:53 because there's no longer uh if they're properly organized with folder and pen stacks um you can easily see what is
51:08 like where is where is site styles? I don't know where it is. Right? And so now we can we have the ability to now
51:16 David has it right up at the top which is nice. Okay. But um you know you have the ability let's say where's my where's my mobile menu.
51:27 Well here it is right. Um here where's my side menu at? Well look there it is right there. Oh where's that jobs accordion? Oh there it is right there.
51:39 Right. So I know it's inside this folder. I can go into it and I can find stuff. Pretty cool, right? So, I'm not going to dive into all the details of
51:47 this project file, but I I just wanted to show off um the amazing ability and what David's done with folder to kind of
51:55 organize to make the workflow of of using a project file and finding stuff and organizing your projects way better.
52:03 Okay, so this is just a testament to um yeah, and also thanks for David. I mean a lot this project file we used a lot of
52:10 back and forth with how can we optimize folder and pen to make this better and I think we've definitely
52:19 nailed it. Okay. So um yeah project files moving forward hopefully people are going to be using you know concepts like this where it can make organizing
52:28 your pages so much better. Okay so pretty cool stuff there.
52:36 Yeah, David. Yeah, all the little little things I I nitpicked about. I'm sorry picking on you. It's not released yet, but yeah, pretty cool. Okay. Um, I really love this this little pill thing.
52:48 Um, it reminds me of like a toggle but like flipped, you know? Um, or rotated, I should say. I like it. Love it.
52:58 Wonder if it'd be Man, wonder what some kind of animation like you can make it so it like drops all the way down and like I don't know. That'd be kind of crazy. Not sure what you could do, but
53:07 like you I I want to make I want to make that thing go down for some reason because it kind of reminds me of that of a sideways toggle. You know what I mean?
53:15 Um so anyway, check out Career uh when it's released. Okay. Um yeah, if anyone wants to check it out, go to career.foundationbox.studios.
53:25 Sorry if I leaked that and you didn't want to, David, but I did anyway. So go ahead and check that out. Okay. Um, and
53:32 yeah, so very elegant project file, but what what else would we expect from David? Okay, so there we go.
53:40 All right, we got one more last thing to show off. And I'm already at the 1 hour mark, but I did start a little late, so I'm not quite at the 1 hour mark. Okay.
53:49 Um, let me go ahead and uh let's quit that. We don't need that.
53:57 And let's go into stacks. And I don't have a demo project made for you. I think it's just in my sandbox project.
54:03 Yeah, here we go. Uh oh, where is Uhoh.
54:08 Hold on one second. I have to install the latest version. Give me one second.
54:14 Uh shoot. I might have to rebuild that, too. Um
54:29 I guess I was working at the latest version of my laptop and I messed up. Let's see if this updates.
54:38 Oh, it does. Cool. Score.
54:42 Okay. Um, so this is Prince. Okay. And
54:50 man, is it cool. Okay. Um, it is a new gallery stack. First off, let's look at the old let's let's go ahead and look at the old version of Prince. Okay. Um.
55:01 Oops. Let's see. Let's open up browser again.
55:12 All right. Um, prints.
55:16 So, first off, the the the old the old color is is ugly. Okay. I'm going to keep the icon. I I quite like the icon, but this yellow has got to go. So,
55:25 definitely ditching that. Okay. Um, and yeah, I one thing I like about prints, one thing, one of my favorite little
55:33 features is this little, as you hover, it kind of randomly rotates images, right, in different directions. Um, it's
55:41 quite cool. I I liked that. Okay. And it's just a simple little light box or, you know, a simple gallery. Okay. Um,
55:49 now this there there's no ability to kind of go between the next uh and previous images. you kind of have to close the images and then, you know,
55:56 click on the one you want. So, um, yeah, but but to me, I felt like the the kind of the feature of Prince was this little
56:05 this little hover effect. I I really really liked that. And I thought, okay, on top of that, let's just make this
56:11 gallery a little bit nicer. And, um, let me introduce you to the new version. Okay.
56:18 Um, so the new version here. Now, I don't I'm not sure what settings I currently have set in this project, but we'll find out in a second, won't we?
56:25 Um, there. Actually, let's let's just use preview. We don't need the library. All right.
56:33 Um, so here. Oh, why is that? What is that? Oh. Uh, okay. I was testing that one. Let's Okay, there we go. All right.
56:44 So, here we'll notice that we have that same kind of hover effect. I I've refined the shadows a little bit, but you know, every time we we kind of hover
56:52 it randomly rotates a particular direction, right? There's all kinds of things. Um, also it it works. Uh, the
56:59 other demo all the images were the same size, but you'll notice that I have portrait images and landscape images kind of all intermixed and all just kind
57:06 of looks good. Now, when we open up um the images, you'll notice that we have a we have the ability to go next and
57:14 previous. Okay. And it is just super fast, super responsive here. I could just
57:22 super quickly through all the images, right? Um, now I'm doing that. Actually, what's kind of cool is you can't see me.
57:27 I I was using the the keyboard to actually navigate all of that. Okay. So, this gallery is 100% keyboard navigable.
57:34 Okay. I'm not sure how that works in preview. Oh, it does. As if you notice as I tab through these, I can hit the enter key. And then here, I can either
57:43 tab through the buttons. Okay. Okay. Or I can hit the um the next and uh the arrow keys on my keyboard just to go next and previous. Hit escape. I can just tab through the images. Hit enter.
57:55 Next. Pretty cool, right? Okay. Um so yeah, uh pretty slick. All key keyboard navigable. Um let's go through some of the options that we that we have here.
58:06 Um there are there are a lot of options, okay? But they're they're kind of broken up into logical sections here. So let's
58:14 break them down a little bit so that it looks a little less daunting. So if we look at the prints grid, this is kind of settings for the actual grid that we're
58:20 building out. Okay. Um you you can display uh alt as caption. So like every image can have have an alt tag and um
58:29 yeah, we can go ahead and display that as a caption. Uh when you enable that, you get caption settings. We can change the colors, the size for small, medium,
58:37 and large. And then we can also center that caption as well. Okay. Um, we'll leave captions on. Why not?
58:46 Okay. Um, we can preload the full image on hover. Now, for performance, what it does is when I hover over an image, what it's going to do is is in the
58:54 background, it's going to load the full resolution of that image so that when I click on it, it it's already there and loaded, right? So, so things feel super
59:03 quick and and zippy, right? Just as like when I when I open this and hover over this button, it knows what the next
59:11 image in there is going to be. And if I click on that, it already loaded that image in the background. Okay. Um, so
59:18 yeah, pretty cool stuff there. Okay. Um, very performant and uh, yeah, I I think it's pretty cool. Uh, and then obviously
59:27 for the grid, so we can have um, the max width, which is the the max width of width, and then max height. The height
59:34 is important for portrait images because if I didn't if I didn't have a max height setting here, this portrait image, especially this one here, would
59:42 be gigantic, right? Because it's super thin and tall. So, having that max height option um allows us to kind of
59:50 reel in those portrait images so that they look good with our um our wider landscape images. Okay. And obviously
59:58 the gutter, which is the um the gap in between each image. Uh, what's kind of interesting, I don't know if I like it very much, but you can actually set this
01:00:06 to be zero, right? And and it kind of looks like they kind of, you know, go on top of each other a little bit. Okay.
01:00:14 So, kind of interesting. Um, you can you can exasperate that a little bit if you throw some negative margins on some stuff. Um, but anyway, um, I think
01:00:23 having them spaced out is just a little bit nicer. All right, so that's the grid. Um, thumbnails,
01:00:30 uh, pretty similar, right? Uh, pretty simple stuff. I'm not going to go through all we have. Border options, rounded corners, shadows on hover and
01:00:38 standard. Uh, the scale. Do we want it to, uh, scale on hover? So, as you see there, it increases by 5% on hover.
01:00:45 Okay. Rotate variance. This is the, um, setting plus or minus 5°. So, when I
01:00:52 hover over this plus or - 5°, it's going to be um it's going to vary that. So, it's going to tilt plus or - 5°. If you
01:01:01 want no rotation at all, set that to zero. And now you have kind of a standard gallery um that doesn't rotate, but you still get hover effects. Okay?
01:01:12 And you if you don't want the scale, you can just turn that off. Okay? And and now we just get even more traditional
01:01:19 kind of boring gallery. Okay? So, let's turn some of those things back on. All right. Um, next, straight on hover.
01:01:28 That allows it so when we um when we hover over it, the image will always go straight. If you turn that if we were to
01:01:35 turn that off, essentially um it doesn't guarantee that the image is going to be straight when you hover over it. Okay?
01:01:42 So, it could be that plus or minus 5 degrees when you hover. It could be straight or it could not be straight. It's kind of a a random behavior. Okay.
01:01:51 And then um obvious we can shuffle the rotation which means if we turn that off essentially now um it'll rotate them on
01:02:12 So when I unhover it always goes back to the same rotation it had before. Okay.
01:02:17 Um so that's kind of options that the thumbnails have. Um captions we already saw caption options. Now modal. So this
01:02:25 is the um what we see here the light box. Okay. Also called a modal.
01:02:30 Uh we can also display the caption inside the modal. Okay. So that one I guess doesn't have an an alt tag. This
01:02:38 one does. Okay. So here we have captions. Uh and we can display the backdrop which is this or we can have no backdrop. Um you can say the max sizing,
01:02:48 border colors, this is border on the image. Okay. And the size and the border radius. Um the reason I give I give
01:02:55 multiple options for border size is a lot of times on a bigger screen a big fat border looks great but on a small
01:03:03 phone a big fat border doesn't look great, right? So I wanted to give the ability to to provide multiple border
01:03:10 sizes depending on the size. Okay. U and obviously we have options for the modal caption as well just like we did the other one. Okay. Um next is the modal.
01:03:19 If you have a backdrop enabled uh you can adjust the color and the blur of it.
01:03:24 Okay. Um so it will if there's a lot of content on the page when you open an image um it will blur. This one covers
01:03:32 the entire gallery but it'll blur that background. Um and you can adjust that blur size.
01:03:38 And lastly is the navigation which is the forward and then previous and next buttons. Okay. Um you have the colors of the background, the colors of the icons.
01:03:47 Um you can have the size of the icon, the opacity of it. Um padding obviously of the buttons and then you can also
01:03:55 position the buttons on the outside, right? So you can have the buttons on the outside and then you can also have custom icons. Now, custom icons, by
01:04:04 default, these are just text characters, but you can actually paste an entire SVG into here, and that should work perfectly as well.
01:04:13 Okay. And uh last but not least, let's look at the the individual image stacks.
01:04:19 Okay. There aren't a lot of settings in here that uh they should all be pretty obvious. Okay. Obviously, we have the thumbnail um and the sizing of the
01:04:26 thumbnail and then the full image and the sizing of the full image. If you don't supply a full image, it just uses the the thumbnail. I was lazy here.
01:04:35 Okay. Um so yeah, if you don't supply the full image, it will use the thumbnail image as the full image. Okay.
01:04:43 Um and then here, by default, the alt tag is going to be used as the caption.
01:04:50 Okay. But if you if you want, you can actually supply different alt tag and captions, which is pretty cool.
01:04:58 Okay.
01:05:07 thumbnail is a square thumbnail. So, at this point, this would be different dimensions than this than the full one, right? So, there's that. Um, there are
01:05:15 multiple different types of images that you can add. Um, as you see here, we have drag and drop, but we also have a prints URL, which allows you to add uh
01:05:23 used warehouse URLs. Okay? or I came up with a new concept which which is quite interesting and this is a print image
01:05:32 CMS. Okay. And what this will allow you to do is this will allow you to add in like total CMS macros here. Super easy
01:05:41 or feeds macros, right? So, um, so yeah, if you're going to be using prints to automate a a gallery, um, using total
01:05:50 CMS or feeds, you can use this and it just makes the edit mode experience a little bit nicer. Okay. Um, so yeah, if
01:05:58 you if you're curious uh just to how that would work, I I'll just show the edit mode. I won't
01:06:04 build out the actual um, you know, uh, entire thing because I know we're running late here a little bit. Uh,
01:06:12 where is it? Show me. Oh, I need to be in the full one. And do prints. Prints, too. All right. Let's just add a new
01:06:20 prints stack to the page. Okay. And um we'll delete prints image here. Uh I
01:06:28 don't need that right now. Let's just hide that. Okay. Um basically what I'm going to do is uh we'll use we'll use feed since a lot of people have that
01:06:36 instead of total CMS3, right? Um, Joe mode is not enabled in stack 6 yet.
01:06:44 All right. So, what we do is we would add feeds into here. And what you would do is you would add a print URL into there. Okay. I wonder why this is doing
01:06:52 that. Let's There it is. Okay. Um, so at that point, you would add your feed, right? Maybe it's a total CMS blog feed.
01:07:02 Okay. And then you can create a gallery or you know a gallery of images from total CMS or a gallery of images from whatever other feed you want. Right? And
01:07:11 at that point this would create uh prints images inside of the print stack.
01:07:16 So that's the setup there. Okay. Um if you're using using this with total CSS3
01:07:21 okay what you would do is uh total CMS3 you could use any of the loop stacks
01:07:29 right. Um, so you you if you were doing a loop gallery, you can do a gallery, you could do a normal loop, whatever, right? But you can do um inside gallery,
01:07:37 you would loop through the gallery, then you'd have your prints image in there. Okay? And that's how you would do that.
01:07:43 Some reason images aren't working well right now in edit mode. Okay. Um, so there we go. That's how you would do that. So you loop through the gallery
01:07:51 and then you you'd plug in all your various macros here.
01:07:56 Okay? Okay. So, you'd go into total CMS um into the images, go into the the link generator, create the the style of thing
01:08:03 that you want, copy that, and then you can create your uh paste that macro into here. Okay.
01:08:10 So, yeah, just kind of a Now, you could still use the um you know, image URL, okay, option. It has all the same
01:08:18 things. Um I just think this just makes things a little bit nicer since we have a text box right here. Okay. Um, so anyway, that's kind of a nice a nice
01:08:26 thing to to have in prints. Okay, actually this made me think that I should probably add that to um Eclipse
01:08:33 actually, right? So if we wanted to add Eclipse, I could add like a CMS image um you know CMS image video and maybe CMS
01:08:42 image you know image um that then you know and even color maybe like a total CMS color that could be kind of cool
01:08:49 too, right? So, um, yeah, we could have, uh, CMS versions of all of these slides.
01:08:55 Um, I think we'll we'll definitely do that. Um, so yeah, that'll be nice. So, then instead of having, uh, in here,
01:09:02 like normally you would use this image warehouse URL and you put the macros into the into here. Um, but yeah, I think it just nicer having these as text
01:09:10 boxes and then you could just plug in plug in your macro directly into that. I like that. Um, so anyway, what do you guys think of that? Um, let me see if
01:09:18 there's any questions. Um, I think we're pretty much calling it quits. You guys are probably tired of listening to me.
01:09:28 Um, I don't see any questions yet. So, sweet. Thank you very much, guys. I hope you enjoy um, you know, all the new
01:09:36 stacks. I know a lot of you have already purchased a lot of them, so hopefully you'll uh, you continue enjoying them.
01:09:42 If you haven't seen them yet, glad these overviews hopefully they helped a little bit and give you a little sneak peek of Prince uh which should be released
01:09:50 definitely by I'll probably have it released on the community um by the end of this week. Oh, it's already Wednesday though. Hopefully by the end of this
01:09:58 week maybe I'll maybe I'll have something up. Um but it'll definitely be out and released by next week. Okay. Um hey Johan's here. Excellent. Or Johan.
01:10:08 Um so thank you very much for all your hard work, Johan. uh your good work. Very good work. Um I I love I
01:10:16 love what you've been you also. Have you added those to made for stacks? Pretty sure you have an account over there. Um I haven't checked. So uh there's a quick
01:10:24 little plug if you guys haven't. All right. Let's let's check to see if Yan's done his work here. Oops.
01:10:30 Um made for stacks.
01:10:36 Uh oh, nuptuals here. Uh okay. Uh let's see if we did uh first. Oh, it's there.
01:10:44 Look at that. He's already added it.
01:10:46 Cool. Um so there uh check out if you haven't been uh on made for stacks. Cool
01:10:54 place that lists all the stacks that are available. Nice little search. Um eventually this will probably be revamped with total CMS 3. We can make
01:11:02 it even better. Okay, but uh right now this is all powered with Total CMS one.
01:11:07 Um pretty cool stuff. So, thank you, Johan. Glad to see that you already added your stuff. Here, if we go to I think it's it's probably under rapid pages.
01:11:17 Voila.
01:11:18 Look at those awesomeness that he has there. Pageionator's there, too. There we go. Go check out Johan stuff.
01:11:25 Go check out David's stuff, too. Foundation box.
01:11:33 There we go. Career is not here yet, but I'm sure it will be soon. So, oh, I wasn't even sharing my screen. Damn it.
01:11:40 I hate when I do that. Go check out made for stacks. There's David's stuff.
01:11:47 Here is Rapid Pages, right? There's all the stuff Yan's done. So, yeah, this last two ones, pageionator blog clones,
01:11:55 another cool one. Um, I don't think I've talked about that one on a live stream.
01:11:58 Allows you to actually clone a blog post. Man, talking about bringing Total CMS 3 features into total CMS one.
01:12:06 We need people to upgrade. Gohan.
01:12:10 Cool. Anyway, cool guys. Um, have a wonderful rest of your week, a great day. I'm going to get
01:12:17 back to working on Total CMS 3 licensing. Okay, I'm building an entire licensing server. I thought it was only
01:12:25 going to be a couple day project and I'm already 3 days into it and uh the end of the tunnel is really far
01:12:34 away. Um you think licensing is a simple thing but uh so many little edge cases for you know upgrading here and going
01:12:42 from this version to that version and doing this and that and wanting you know extending having trials and doing all that stuff. Um yeah so many things to
01:12:51 think about and to code for. So um it's fun but uh I am enjoying it but uh yeah
01:12:59 a lot of work to do. So uh take care everyone. Um, just side note about Total CMS3 as well since we're kind of talking
01:13:06 about it. Um, if you want to play with it, it is, as I said earlier, it is 100% production ready. It is super powerful.
01:13:16 Um and I it is by far the um it is so good and uh yeah you can buy it um in
01:13:25 the announcement section um just search uh for you know total CMS 3 beta um and there will be an announcement post saying open access total CMS beta
01:13:34 there'll be links in there it is a paytoplay okay so if you'd like to uh play with it um you have to pay okay um
01:13:42 that's just the way I have it for the beta um hopefully by the end of summer. I'm hoping to have um live purchasing and upgrading maybe.
01:13:54 Um I don't know if it'll be officially launched by then, but I should have all the licensing done and integrated into
01:14:08 Friday at the hangouts. uh basically a half hour from right now, but on Friday, a lot of fun. I'm sure I will be there
01:14:16 this week. I missed last week. Um so I'll see you guys then. Take care. Have a great rest of your week. Go out there and make your websites great. Bye.