Transcript

00:08 Mr. Jones is in the house.
00:13 Uh, did it say we're streaming? I think we are. Yes, we are. Cool. Okay. Excellent.
00:21 Thanks for popping on, everybody.
00:23 I know it's kind of short notice, but it's good seeing some uh some faces that aren't always here.
00:32 So, I I do have to admit I was racking my brain. I was like all last night and this morning I'm like, "What am I going to stream about?" And my my brain just
00:39 couldn't come up with a new topic. And I was like, "You know what? Let's just do a hangout." There's so much new stuff that's come out and I'm sure you guys got a lot of questions and and whatnot.
00:48 So, yeah, I just open up the floor. Uh if you guys want me to show off anything that you'd like or you have any questions that you need help with, let me know and we'll uh we'll tackle that.
00:57 Oh, if before we hop on that, if anyone is watching the YouTube stream and wants to hop on the Zoom, go to the Weaver
01:04 Space community or in the email that I sent out and click on the join the Zoom button, okay? Or link. Um, so that way
01:12 you can join us here, okay? Um, without further ado, yeah, guys, open it up. You guys got any questions or something?
01:23 Nothing. You're not. Okay.
01:27 all the world's problems. I'll ask I'll ask a quick one hopefully. Um in Total CMS3
01:35 uh in uh when you're creating a custom schema um can you add you can add a a
01:44 file depot is there a stack is there a stack for doing for for that in the admin you know
01:51 when you create a custom admin section I believe there is um did I did I forget that one I could have forgot that
02:07 have a gander. First off, I I do have to tip the hat here because we we do have a Total CS legend in the house. So, if you
02:15 guys didn't know, Total CMS might not ever exist if it wasn't for Dave Hitting right here. Okay. So, we can all thank
02:23 Dave um because he he was working on a website for his his son's rock climbing business. Yeah. and wanted to show like
02:32 a little a little drop down on his son's thing. And we hacked together a solution with my markdown stack and a foundation
02:39 one form and got it working and then it just it's turned into this massive
02:47 application now and wanted to show like a little a little Uber decided to mute you bud had a lot of feedback.
02:56 So anyway, thanks Dave for that. Yeah.
02:58 And that was years ago. Yeah. Yeah. Does your son your your son still have their rock climbing business? You know what?
03:04 He he uh sold out to a venture capital firm earlier this year. Oh, nice. And uh he's actually doing quite well with it.
03:11 They've they've given him a three-year contract and he's the vice president with him and part ownership in the vice in the venture capital firm and he seems
03:20 to doing great. So, we'll see what happens. But yeah, he still has it.
03:24 Nice. Yeah. Score. Yeah. Oh, nice. He should have went into the rock climbing business. Exactly.
03:32 Exactly. It worked out well for him. Excellent.
03:38 Hi. Worked out well for us, too. Yeah. Exactly.
03:46 Um, okay. So, so you can you can add the field in the schema, I assume. Correct. Yes. Yeah, it works. It it works there. Okay, cool.
03:56 just when you try to build out the custom the custom form.
04:08 Yeah, I ran a code report on obviously I'm working on CMS3 a lot this week as well and uh ran a little code report and
04:15 it's currently up to 50,000 lines of code. Crazy.
04:22 All right. Um, I'm going to take your word for it, but let's just have a gander. Maybe I'm uh being dumb here.
04:30 Get rid of these zoom windows.
04:33 Turn off the auto. Now, if you if you enable autobuild form, I assume it works, but you obviously lose the
04:40 ability to customize the form. Um, so let's see. It is not there.
04:47 Let's see. Let's see if it even exists. Let me just hop into my code.
04:59 fields. Oh, it does exist.
05:07 Uh, okay. It exists. Let's see if we do Let's see if we can just get to it right now. Let's see if we do show hidden stacks and just search for depot.
05:22 Oh, that's Oh, that's a depot form, but not a field. Yep. Okay, I'll add that to my to-do list.
05:30 Um, it'll be in the next beta then.
05:35 Uh, the stack exists. I just need to add it to the Yeah, and there there's no way of currently accessing that right now.
05:42 Sorry. Yeah, not a big deal. Uh, let me add that to my list because
05:52 form field. Okay. And while we're here, yes, before you go, you have the style
06:08 those little the greater than less than signs. Yes. Mhm. when I when you try to use the style
06:16 uh when you use the options to add all the different kinds of things like uh superscript and whatever. Yep. You you
06:25 lose that and I don't know what option to add to put that back.
06:32 Oh, you lose the HTML. Oh, you lose the HTML brackets. Okay. So that yeah because he copied he copied the custom
06:40 settings which which if you go to the website you can see all the different options you have. I I can't figure out which option it is. Sure. It's just HD.
06:49 It's just HTML. It'll teach you and then and then it's just HTML. Okay. So yeah.
06:53 So if you just go to So obviously if you click on this settings. Yeah. Right. And it takes you to this thing that has just a a buttload of settings. Right. Right.
07:03 So we want to look at we want to find the toolbar. So it is toolbar toolbar buttons. Okay. And then inside here
07:13 you'll see everything. And if you just I mean all these are are the buttons and then what we want is just uh it's just
07:20 HTML. Got it. So but you have to add it inside of the toolbar buttons. Right. So um we go let me just go into here.
07:31 Uh let's just go in uh we'll just go into the docs and the field settings.
07:36 So as you see here like as a part of the settings I in here I have toolbar buttons and then um and then you can kind of group them you know the buttons
07:45 inside these little square brackets you can kind of create little groups of buttons and wherever you want that button you just put a comma and then
07:51 HTML. Very good. So I I do plan on update upgrading this to have a maybe a better default and some more examples in
08:10 And it's helpful to understand how to read the the settings on the other page, too. Yeah. Um, so what's what's also
08:18 well, there's also one thing you'll notice right now. It'll be fixed in the next one. Um, but so if you define toolbar buttons like this, uh, and then
08:27 you shrink your screen down, you'll actually notice that a lot of these will start disappearing. Okay? And the and I I fixed that, but right now it's it's broken in your version that you have.
08:38 Um, and the reason is there is so there there's toolbar buttons, okay? But then there's also toolbar
08:47 buttons MD, toolbar buttons SM, and toolbar buttons XS. And what what are
08:54 what what that means is for you um you can actually define different toolbars based on the size of the screen, which
09:01 is kind of cool. Okay. Um but previously in the version you have basically uh whatever you put into toolbar buttons um
09:10 it was overwriting it for all these other ones. And I right now whatever you define in toolbar buttons will default for everything. Um but it is nice to
09:18 know that in the future if you really want to you know give yourself a headache and go ahead and customize toolbars for medium and small and extra
09:25 small you can do that. Okay. Um a little excessive but hey um it you know if you want to have a lot of stuff on desktop
09:33 and only a few options on mobile I guess it makes sense. Yeah. Yeah. And then my final question in this area, can can you
09:41 go to um in total CMS one when you have a style text you can or in hipwig you can go to kind of full screen for the
09:50 full page for the uh editing? Yes. Um does that also work in in this one? Um
09:58 it full screen. There it is. full screen.
10:06 Okay.
10:08 And I'm pretty sure that does require a plugin, but I'm pretty sure I have all the available plugins enabled. Um, so
10:18 yeah, uh, let me know if it doesn't work, but yeah, if you just put in full the full screen button, that should enable it and the plugin should already be installed. Great. Thanks.
10:29 Sweet. So, so much fun having a good time with it.
10:34 Yeah. Um, you know, I love the the the level of customization that you can get.
10:38 I can understand it could be a little daunting, you know, but having the ability to do it, I think, is is a lot of fun. So, um, sweet.
11:08 Um let me look and see what what have I done recently that I can is there anything cool that I can show off.
11:16 [Music]
11:22 I fixed a lot of little bugs lately, but nothing no huge features to show off.
11:27 But I can show off something pretty cool.
11:31 Okay, as you guys might know, um I've been um for the first time ever, I took on a web
11:40 design client called the Greener Camping Club in the UK.
11:45 And um I took it on because I thought it would be an interesting project for Total CMS
11:53 3. And I thought it would be an really amazing way to um test out total CMS cuz
12:03 there's nothing like testing a product like actually implementing it on a website, right? And not I mean I I
12:10 implement various small things but like doing a live production site for a client is just a little bit different than doing a bunch of little test websites for myself and whatnot, right?
12:20 And um yeah, I'll eventually redo Weaver Space and I'll probably find lots of cool stuff to do with that. But for now, this guy came to me and he's like, I
12:27 need this or else I'm going to jump to Web Flow or whatever it was, right? And I was like, dude, Total CMS3 will be
12:34 perfect. So, um yesterday, uh I, you know, for the past few weeks I' or months, I've been working on the design
12:40 for it. And um just this week I uh we finalized the
12:49 designs a few weeks ago and I and we've been planning all the data and we finally Yeah. This week I finally got
12:56 all of the um everything kind of loaded from the CMS now. Right. So here is um the page. I think I've shown I've shown
13:05 sneak peeks of this before, but uh yeah, all of these camping grounds now um this directory is all loaded from total CMS3.
13:14 There's 167 of them. Um so yeah, lots of them. I haven't uh while this is this actually this entire filter form is
13:23 actually built with total CMS3. Um like all these little style things and all these these are actually built out with CMS and I'll kind of show you a sneak
13:32 peek in the back end of that. Um, but the the actual form doesn't function yet. So, um, it will, but you'll be able
13:39 to like click on multiple things and then, you know, filter and it'll filter out the list and all that jazz. Um, but again, that doesn't work yet.
13:48 Um, but if we we can click on any of these, you know, click on this, we can go to the, you know, all these are obviously this is the the main image for
13:55 a campsite. And then, um, these three, if I refresh this page, these should Yeah, they do change, right? It randomly picks. There's a gallery for every
14:04 single campsite and it'll randomly fill in these areas and this is the main image. Um I'm sure over time I'm hoping
14:12 they kind of find higher quality images, but I don't have any control over that.
14:17 Okay. Um so yeah. Um and then further down we'll notice that, you know, every campsite has you know some features or
14:25 tags and whatnot. So all those icons show up here. Um over here we have a map
14:31 of the UK and um it dynamically based on the region of where this is located it
14:38 will actually um highlight the region on the map on where this campgrounds is which is kind of cool. Okay. Um
14:47 obviously all the information about it um this is uh well it doesn't have much of a read more because there's not much else to read but um maybe we'll pick a
14:55 new one. I'll show you. This is actually going to be an update to Peekaboo. Um, and then uh more more ways of seeing that dynamic map using my Google map
15:04 stacks. Um, haven't done this yet. This will pull in reviews from Google reviews uh for that particular campsite and then it'll check availability to reserve it.
15:14 Some campgrounds have a like a calendar widget. Let's see if we can find one.
15:20 Let's see if I can pick one that randomly has one. We're going to be lucky. Oh, that one doesn't have it either.
15:27 Uh, how are you? How are you pulling the reviews in, Joe? Um, it will be done through the feeds stack. Um, I'm going
15:35 to create there's going to be a new pack add-on pack for feeds called feeds reviews. Um, and yeah, it'll it'll suck
15:43 in the re the reviews for a um a place and then uh you can display them using feeds. Will it be up up to five or will
15:51 it be more than five? Do you know? Uh it'll be it'll be up to five because yeah um because right now only Google
15:59 only allows you to see five reviews publicly, right? Um outside of that you have to do ooth and like a whole
16:08 extremely complicated thing and I I'm not sure I'm going to go down that rabbit hole right now. Um that's why I'm asking. I've got a client that has a
16:17 relationship with reputation.com plus arm and a leg, but they can bring in as many reviews as they want. Yeah.
16:25 And I've got other clients that would like that ability, but um you know, they don't want to pay for the uh the
16:33 relationship. So that that's why I'm asking. Yep. Yeah. And Yep. And yeah, Google requires that is has a very Yep.
16:40 They're very limited on what you can access publicly. Else you got to pay. Okay. Yep. Thanks. I'm sorry. Nope.
16:47 That's good. Thanks. You know what's funny is like you would think like things like Yelp and whatnot as well, like Yelp I think, gives you three
16:54 reviews for free and then outside of that you have to pay like a lot of money. It's crazy. Yeah, it it really is nuts.
17:03 Um, so anyway, um, I was, oh, I was trying to find one that had a, uh, let's see if we can find one that has a Oh,
17:11 well, there there are some that, you know, it's configured whether or not they have a booking calendar and instead of this form, it actually shows like the, you know, the kind of the hotels
17:19 widget that has, you know, where you can find the actual dates and availability and whatnot. Okay. Um, here's an example of, well, this one has a little bit read
17:27 more, but there we go. Um what's other kind of interesting things here? Um something that's interesting.
17:36 Okay. Um that took most of my day yesterday.
17:41 This looks pretty simple, right? We we just have a grid of things. Each one has these, you know, a ton of these little SVG icons. And um
17:51 one thing I wanted to ensure of let's say right now this page is loading and um there's 167 campsites and each one
18:08 all the possible SVGs that will be loaded or viewed. So there's 18 of them. Okay. Um and they're relatively small.
18:16 you know, they're anywhere from 200 kilobytes to maybe approaching a
18:23 kilobyte, okay, for the SVG, okay? And if you think about it now, I can't now
18:31 you can load an SVG like you do an image, okay? But if you do that um and the reason the
18:40 reason you might want to do that instead of pasting the SVG code onto the page is uh caching right so if you load an SVG
18:48 via let's say a warehoused image link um the browser will cache that SVG right which is great which you would think
18:55 would be perfect for this situation because then I could load in the SVG one time and then no matter how many times it's loaded on the page um the browser
19:04 will catch hash it. Okay. However, I want to style these with SV with CSS, right? So, depending if I hover over it,
19:13 I want to change the colors. And if you bring in an SVG via a URL, like an with an image tag, um you cannot style it with CSS.
19:24 So, I want to have the SVG on the page, embedded on the page that I can style it with CSS,
19:31 but I also don't want to load the SVG. I mean potentially I mean this there's 167
19:37 sites there's at least four to five for each website we're talking a thousand
19:44 right at anywhere you know 500 kil 500 bytes to a kilobyte we're now talking you know 600 kilobytes you know maybe
19:52 even a megabyte of of of the same SVG right which seems crazy
19:59 um where I would add that much weight so Um, lots of thinking about what I can do
20:07 with this. And, um, so I figured out a way where I can load an SVG one time on a page. Um, and then
20:16 I basically all these little doodads here um, they actually they reference the the single SVG loaded on the page
20:25 and um, using something called an SVG symbol. Um, and uh, whether I actually added pretty cool. I added SVG symbol
20:34 support into T total CMS3. Um, so now you guys get to benefit from it. Um, which would be kind of cool. It's a little advanced. It's not, you know,
20:42 obviously it's not super um, you know, obvious, but um, it's possible now, which is kind of cool. And, um, yeah.
20:51 All here, let's uh, let's show it off a little bit. Um, well, here actually, let's you can kind of see it on the in the web page here.
21:07 Let's go. Let me find where the hell these symbol. Oh, here they are. Okay, let's make this bigger so you guys can see.
21:17 I don't need that.
21:21 Make that a little bit bigger. All right. So, in here, you'll notice that I have a bunch of SVGs. They're all set to
21:28 display none. Okay. And um they're all somewhere over here on in in the DOM, but again, you can't see them on the
21:37 page. Okay. And if you open it up, um it has this thing called a symbol. And inside there, it has the detailed SVG or
21:46 the components of the SVG and um a few other things that you need to make sure happen. Okay. Um so, these are loaded as
21:54 symbols and all 18 of them, they're all right here. Okay. all 18 of those SVGs, which are these guys. All these guys
22:02 right here. Okay. Now, um let's look at this guy right here. Okay. So, how how
22:09 am I importing this SVG? So, um what I'm doing is all you have to do is this little this little use statement, which
22:19 is kind of cool. So, you just do SVG use and then you give it the name of your symbol and voila, it's just as if I put
22:27 my SVG directly inside my button. Pretty cool. Super cool actually. Um,
22:35 so yeah. Um, that's what we did. Um, here I'll show you. Uh
22:44 let's open up the project here and let's go into Okay, so here um
22:53 this project didn't have folders at first when I first created this project file. So um I need to go through and add folders throughout this project because
23:09 those out, okay? It's in my starter pack. Um, so let's go into this. Um, and this is actually what creates the
23:16 symbols, okay? All those symbols that we saw. And, um, essentially, uh, I guess I should step back and kind of show you
23:23 the back end a little bit. Um, let me go ahead and do that.
23:30 All right, let's just close that. Um, so in
23:40 my collections, I have something called types. Okay, and if you notice, these are all the icons, right? I created a custom collection that just has an ID, a
23:48 label, and an icon, and whether or not I added a flag to hide it or show it.
23:52 Okay? And if you go in that, it's just an SVG. That's all it is. Just the SVG, the name, and then an ID.
24:02 So that's types and then I also have features which are all these other ones.
24:07 Okay. So I created kind of custom collections. Actually funny enough the types and features actually both
24:14 reference the same schema. Okay. So I created if you want to get down in the weeds I created a tag schema that the
24:22 tag has all those particular fields. Um, and then yeah, inside the collections we have features and types that both use
24:29 that tag schema. Okay, so they they all have ID, label, icon, and hide feature.
24:35 Okay, so just to let you know kind of what that is, I have features and types. Okay.
24:43 Now, um, so if we go back into this project, what I'm doing is here I have a Now, sorry if any of you are new to
24:50 Total CMS 3. I am going to kind of we're going we're diving right into the deep end, everybody. Okay. So, if you're new to this, sorry. Um, we can answer questions after if if you're blown away.
25:03 Okay. Um, so here I have a loop. I'm looping through the types collection.
25:07 And essentially all I'm doing here is um oh wait, oh I'm sorry. This actually uh
25:14 this loads in types as a variable. Um so I'm loading in the types collection which is this into a variable. And the
25:22 reason I'm doing that is I know throughout my page in a couple different locations I want to reference that collection. So instead of um a power tip
25:30 here for total CMS 3 um if you know you're going to use uh or reference a collection multiple times on a page such
25:37 as the types um I'm doing here um it's better to load it into a single variable and then in your loop stack you're going
25:44 to use preloaded data. Okay, that'll just make things a little bit faster cuz if you don't um if you don't use this method, essentially what it's doing is
25:52 every time you want to loop through the types or access the types um in this case it's going to go into the CMS and
25:59 pull the data again, right? So um here I'm loading it once via the um the collection loader. Okay. Um and then I'm
26:09 looping through it here. And when I loop through it, all I'm doing is is I'm adding HTML.
26:14 Um, that just does the type icon, which is the SVG file. Okay. So, um, this is
26:21 the icon field. So, that is the SVG code. And then I'm running it through this new filter that I created called
26:29 SVG to symbol. Um, so, um, it basically takes that SVG file and creates a symbol
26:36 out of it for us automatically. Um definitely again a very advanced kind of very niche thing but it's something that
26:44 I wanted. Um so here we go. Um so we have SVG to symbol and then what you have to do is you have to give it an ID and I just give it the ID of that type.
26:54 So here like here's the icon, here's the ID, right? So that's what I do there is I just pass the ID of the type and
27:01 that's the ID of my symbol that I create. Um and then I do the same thing for features here. Okay.
27:10 Now, funny uh fun thing actually. I do another little thing here with a variable stack. Um and I create a new uh
27:17 array that takes types and features and merges them together
27:23 into something called tags. Okay. And um so that way um I can reference I can
27:30 loop through types and features all at the same time because I' I've merged both of those into something called tags. Pretty
27:39 cool. Again, sorry this dives after I just said all of that and showed everything. That is way in the deep end, guys. Really cool stuff, though. Okay.
27:48 Um, now if we scroll further down, um, let's see. Uh, here, um, is an, uh, that
27:56 is looping through. Let's see. What is this? This is What page am I on? I'm on the camp. Oh, this on the campsite page. Let's go to the campsites page because that's kind of the page we were looking at. Okay.
28:08 Um, so if I I scroll down here, you'll see that um inside of I think I have it.
28:15 Oh, here it is. This is the where to the camping and the extra features. Right. This is the Oh, I closed that down.
28:27 So, here we have the wear to with a bunch of maps. The camping in which is all of the uh types and the extra features is all of the features. So, all
28:36 I'm doing here is um inside I have a block grid that I'm looping through. Um and then I'm creating all of the um Oh,
28:45 that's the maps. Uh actually, the maps isn't created with a loop. That's just kind of manually done. Um so, I lied there. Uh oops, I don't want Let's Let's
28:54 go into the camping in. That's what I wanted. And that uses actually a bento scroll stack, which is interesting. Um and then here I'm looping through all
29:01 the types. Um, I'm filtering out anything that has that hide checkbox set. And then I'm creating a button. And
29:08 if you look inside the button here, uh, let me go ahead and create uh, I need to put in my Oops, I need to open that
29:16 cursor app so you guys can see my cursor a little bit better here. There we go.
29:22 All right. So, um, if we look here, right? Yeah. Yeah. Yeah. Allow. Um, you'll see that I have that SVG use
29:29 feature, right? And here I have SVGUS and the href uh links to the ID of the
29:37 type, right? So I'm linking to that ID of the symbol that we created earlier.
29:42 Pretty slick. And um here we have so it adds the SVG and then it adds the label in the button, which is what we see
29:50 here. We have the SVG and then the label. So it loops through all of those and adds them. Pretty slick. Okay. uh we
29:57 do that for uh the types and then down here we do that for the features uh which is pretty slick. Same same exact setup I'm just looping through the features here instead.
30:08 Okay. Now remember earlier um I said I created that tags um basically inside here I created this thing called tags
30:16 that basically takes the types and features and merges them together. Okay.
30:22 Um why did I do that? Okay. So, um, in my campsite grid, you'll notice that we have all of these tags here. And
30:30 basically what it does is it displays all the types and all the features as little buttons below the campsite. Okay?
30:39 And and they look they look exactly the same. Um, it's just it displays all the types and then all the features.
30:46 Um, so if we look at that on this page now, uh, let's scroll further down. So this is my grid that contains um it's
30:55 basically this grid here. Okay. So I have my image, my campsite name, the campsite location, the summary, and then
31:02 here is where we have the uh a little loop here.
31:07 Okay. And this loop um this is another interesting variable
31:15 that I create. And what I do is um so I I loop through tags and I find all the
31:23 tags that are contained for this campsite. Man, this is super deep end here. Okay.
31:31 Um so what this does is it takes actually you know what I forgot I was testing around. I actually didn't need that tags because I actually dynamically
31:40 u merged them in here. Is it? No. Hey, look. Let me copy this and we're we're going to dissect this statement here um
31:49 slowly because I think that would be fun. Oops. That's not what I wanted.
31:57 All right. Um that only gives us part of it. We're going to need uh here. Let's use the whole the old uh Josh trick. And we're going to we're going to do that.
32:07 And then can I uh do this? Can I Oh, wait. No. Cancel.
32:15 Josh, how do you do that? You said you you OCR this stuff. No, I want to How do you OCR it, Josh?
32:24 He's not here. Oh, well, whatever. We're going to we're going to manually type it. Oh, yeah. So, we just do set site tags equals. Okay, let's just do this
32:32 now. Um, we're going to do up um set site tags equals and then Yeah. All
32:41 right, there we go. All right, let's dissect this. This is some pretty advanced stuff here.
32:48 Okay. Um, so first off, um, let's simplify this where my ear was switching. Did you say something about me? Uh, it's all good.
32:58 We're I I got it. Um, okay. So, first off, um,
33:06 All right. So this here, this statement right here, if you notice, I just extracted it out. Okay, this is the way
33:13 we can create a variable. Okay, so I'm creating a variable called site tags.
33:19 Okay, this actually is like some uh data. Okay, so site tags equals some data. Okay, now here I'm I'm actually saying we're equaling it to tags.
33:32 Okay, so I'm going to say this is tags, right? Okay, so site tags equals tags.
33:38 Man, sometimes code pilot really bothers me. Let's do this below it so we can kind of dissect it like that. All right,
33:46 so site tags equals tags. Now, that's not helpful because I I basically want to take tags and I want to filter something out. Okay, so the way we
33:55 filter it out is I can say uh I can do a pipe filter.
34:01 Okay. And then inside that we can do tag.
34:06 And then inside this loop. Okay. Man, stop trying to suggest code for me. Oh my goodness. Um Oh my god.
34:18 I'm This is so not useful when you don't want autofill. So you can teach without autofill.
34:24 How annoying is that? You I assume you guys see all that, right? Yeah.
34:30 Can I turn off? Oh, I think I can turn it off down here. Can I turn that off?
34:40 Oh, thank God. Okay, interesting. Okay, so now um essentially what this does is um filter allows me to
34:50 um loop through all the tags and return data based on a condition. Right? So I
34:58 can say um if um tag id or tag dot title um equals hello.
35:08 Okay, let's do that. Okay, so what this again what this would do is it would say um for it would look through all my tags
35:17 and would filter them and find anything that where the title inside each tag says hello. Right? So that's kind of
35:24 what this does. So at that point, site tags is now a filtered version of tags. Does that make sense?
35:32 Okay. Um I'm going to take silence as consent. So let's go into this this next
35:38 step where I say um tag ID in. All right. So let's let's do that. So I'm
35:46 going to do tag ID in and then basically some array. Okay.
35:54 So basically let's say this was a different variable that I had and um basically I want to see if this tag ID
36:02 is inside the array then filter based on that. Okay. Now instead of some array what I've done here is I've created my own array on the fly.
36:15 Okay. It's essentially the same as doing this, right?
36:36 All right. So basically here I said like I can create a merged variable and say merge the campsite types with the
36:44 campsite features. Okay. And then I could go in here and say merged, right?
36:54 This is exactly the same as this. Okay.
36:57 Um and to be honest, this is probably more readable. Okay. um in that um we create this merged array
37:06 and um it actually then we then filter um our tags by whether or not the tag ID
37:13 is inside merged. Okay. Um I was trying to be fancy and that I merged these two
37:20 statements together into one. However, now that I'm actually looking at this and and analyzing these two codes, this
37:28 second one that I just typed is actually better. Okay, why is this better?
37:36 Um, this is better because um I create this merged variable once and then
37:43 essentially what it's doing is it's it's referencing that um inside this uh filter array or this filter function.
37:52 Okay. However, in my example up here where I was trying to be some cool badass developer thinking, "Oh, look at this. This looks cool and efficient.
38:06 through tags, it create it merges these two things together every single time,
38:13 right? Um, so this even though it's more lines of code is faster than this.
38:21 So sometimes a clever developer is not always a better developer. Um, so there we go. So I will now change uh my code
38:30 to to be that. Okay. Because uh yeah, now that is I was explaining this to you guys. I saw the the flaws in my cool
38:37 developer logic last night. Um but yeah, that was extremely deep end.
38:43 Some really cool stuff there. Um that you know, so basically now now I have a
38:50 um a variable that has all the tags that my um campsite has. I then loop through
38:57 that and create all those little badges below hand. Okay, all these little guys.
39:04 There are there's probably 10 other ways that we can accomplish this same exact thing. Okay. And to be honest, uh I
39:13 could probably make this a thousand times easier. If all I wanted was the SVG icon, it's easy. But because I
39:21 wanted this little tool tip that actually has the label, um, it made it made my life much more difficult. Okay.
39:28 Um, if all I needed was the SVG, all I needed is the ID and at that point I actually don't need to bring in the the
39:36 tags, data, and all that jazz because with the ID, I could just load the symbol with the ID. Um, so I didn't need
39:43 all this fancy filter logic. Um, but yeah. Um, but we wanted the two little nice little tool tip. So, there we go.
39:51 Now we have it. Okay. Um, something I didn't I did I I actually forgot to pass over or go over. So, we have features
39:59 and types. And if we go inside their campsites, okay, let's pick one. Okay. We'll see that um
40:07 here we have types and features. And those are just they're it's a tag setting, right? where I can I can select
40:14 any uh tag from this is the types and this is from the features. Okay. Now,
40:21 I've also made it so that I can type in something custom, but I can't save it because I don't want people to be able to create a new one, a new feature
40:30 unless it's added into the features collection.
40:37 Okay, so um that's a possibility. Uh if you want to see how that's done, um we'll go into the uh campsite schema and
40:46 let's look at the feature. Let's look at features. Okay, features and types are set up exactly the same way. Um
40:54 basically here I added the we have relational options. So I'm pulling in all of the features, okay, all of the objects from features
41:02 and creating them as options inside of my list. And then I set add choices to false. Okay, this this option isn't
41:11 documented yet. Okay, so um if you didn't know it existed because you didn't know it existed because yeah, it existed before but yeah, I didn't
41:19 document it. I think I have documented it now. Um so anyway, so yeah, now you can you can turn off add choices so that that they can select the existing ones
41:28 that are there, but they cannot create new ones. Okay, because by default you can type whatever you want into the tags field. So that's how that is accomplished.
41:38 Okay, for those that were curious on that.
41:42 Um, so yeah. Um, yep, we have again that's just the types and the features. Pretty
41:50 simple. It just displays the ID. Now, before I actually set the I set it up to display the label from each of these
41:56 instead of the ID. Um, here I and I'll show you. Well, it would take me a while to I guess I'll show you.
42:08 Let's go ahead and let's do we'll do types. Okay. So inside here here I have label and value set to the
42:16 ID. I will set this to be label is label.
42:20 Okay. And the value is ID. And I'll show you what's going to happen.
42:28 Okay. Now if you saw if remember that the the value was the ID. So, it's the value, the ID of that feature that gets
42:35 stored into the CMS. Okay. The label is just there to look pretty. Okay. Um, so let's go back into our campsite
42:44 and let's go into pitch temps. Okay. So, now you'll notice that instead of the IDs, I actually see the the label for the features, which is nice, right? If I
42:53 click on Shepherd's Hut, it says Shepherd's Hut, which is nice. Okay. Uh, I have to remember which one I'm doing so I can revert this change after 04.
43:02 Okay. I'm going to save this. Just save it.
43:08 Right. And I'm just going to refresh this page.
43:12 And if you notice what it says here is it says Shepherd's Hut again. It doesn't it doesn't say the label. Okay. And that's because um when it loads this
43:20 form um the labels aren't known. It's it's what's displayed is actually what's saved in the CMS. And what's saved in
43:27 the CMS for this campsite is the ID. So instead of sometimes showing the label and people wondering why the heck it
43:34 shows the label sometimes and then the ID, you know, when it's re reloaded, I just decided to always show the ID.
43:42 Okay, so there's that. Um, so anyway, let me go ahead and uh let's revert that back to how it was. Small little tangent
43:51 there. Let's go back into here. Let's go to our campsite. And that was types. I did settings. That's ID.
44:02 All right. Boom. Sweet.
44:08 Um, yeah. Any any other questions on I know
44:16 I I went straight into the weeds on a lot of that stuff. Um this was a lot of work um getting this data. The customer
44:25 gave me a bunch of CSV files and um it was me spending lots of time with chat GPT modifying you know uh CSV files to
44:35 format the data that we wanted um in in a way that made sense um to get all this data into here. Um yeah we got a lot of
44:43 stuff. We have obviously off um features, members, which doesn't have anything yet, owners of the campsites.
44:50 Um oh, searches. Um so down here, you'll notice that there's a bunch of links here. Uh again, the the filtering
44:58 doesn't work yet. So the this is just a a design thing at this point.
45:03 Um but the customer wanted the ability to create like saved searches. And so basically what you'll do is they'll
45:10 create these quick searches and whenever some let's say familyfriendly and family friendly will like map to maybe a combination of these settings uh that
45:17 are clicked in the filters right and when you click on that it'll just load the URL with those with those filter options and it'll it'll be a pre-made
45:25 quick search right so um what I did is I just created a a collection here um and it just has a URL whether or not it's
45:33 hidden from that list and text okay and that's obviously the name of the the the link and actually let's reorder this
45:41 actually something some people don't know is the order of these columns in total CMS3 what what determines the order of these columns okay so that is
45:49 inside the schema uh so if we go into the schema for this this is a link schema okay it is actually the order of these
45:57 indexed properties okay because as you know um the index determines what what shows in that main table okay so let's
46:06 say I want to have my text, then my URL, and then hide, and then ID. Okay, so at that point now, you can drag and drop
46:14 those as you can see. Uh, and if you're curious, the order of these determines the order of the form.
46:24 Okay, so in the form here, I have the ID, I have a hide, uh, the toggle, I have a text box, and a URL. Okay, so let's save that.
46:34 So remember in that table now if we go into quick searches you'll see now I have text URL hide and ID. Okay because
46:44 that that's what makes the most sense here. Okay. Um the ID for this particular collection isn't really used
46:51 for anything. So just chuck it all the way at the end. It's not it's not really useful. It's just a UU ID. Okay. Uh if anyone wants to know how to do that just
46:59 create random IDs for your objects. I can show you how to do that in a little bit. Okay. And if we click into this form, we'll notice that the order of these fields matches the order of the fields in the schema.
47:12 Okay. Um in the future, um I'm going to try to play around with some ideas that I have might be in this next beta. It
47:20 might be the one after that. Um some to give you more flexibility for creating layouts of these forms. So right now
47:29 like the form, let's go to let's look at that campsite form, right? ginormous form um that just has tons of information, right? And it's just field
47:38 on top of field on top of field. It'd be really cool to be able to define some sort of layout here. I think that would be really awesome. Um I have some ideas
47:47 on how to allow you to do that. Okay. Um in a in a pretty simple way. Okay. Um
47:56 it's similar to if you guys are familiar with um uh shoot Bento um Bento
48:10 what was it called? Bento areas. Okay.
48:14 Uh let me turn off these uh show hidden stacks. Uh if you're familiar with bento areas um here's my idea. Let me I don't
48:23 want to muck around with this project much anymore. I I'll just discard changes. It's fine. Um if you know bento
48:29 areas, you the way you create um your grid is by through by doing a bunch of
48:36 um names, right? So basically, you know, you each area is a name and then you define the layout of just by putting the
48:43 names of your items inside of this little grid. Imagine this but for a form
48:51 where where the the this is the name of the field. And you can kind of visually create a grid for your form um with field names.
49:02 That'd be pretty cool. I see Steve laughing and smiling. He thinks it's cool, too. Huh, Steve? Yeah, I see it.
49:09 Yeah, that's cool. Okay. So, imagine that just being like a setting inside your collection where you can just define like manually lay out your your
49:18 form with this kind of syntax.
49:23 Come on, dude. That's cool. Like, that'd be really cool. Okay. Um, so anyway, there's uh that's that's my ideas on that. I think that would be pretty cool.
49:33 I think it's I think it's going to be doable. Um, I think that will actually be pretty good. I think that's a good idea.
49:39 Um, so yeah, that way I mean it's cool that it dynamically creates these forms, but like a form like this is just like
49:46 dude. That's just like not great, you know? So having at least some sort of flexibility for, you know, um, laying
49:54 things out to have, you know, two or three columns or something like that could be pretty cool.
50:09 That's that's a big help, I think. And instead interesting, I think and instead of having to use the F6, you know, SVG stack, I'd rather be able to do it that
50:18 way. Yeah. Yeah. Yep. And uh one thing I can I can really see that total CMS3, we're going to need a cookbook
50:26 eventually. Oh, yeah. Yep. Because there's so many little things like how to how to do this thing. So, I think a cookbook's in our future. Yeah. Totally.
50:35 You know, actually for the for the symbols, I should probably create a little twig macro to just output that SVG use statement. So, you know, I have
50:44 one to create the symbol. We should have one to use the symbol, right? Totally.
50:48 Yeah, totally need that. And and I know you use nucleio, right? Nucleo. Nucleio.
50:54 Yes. So, it should be whatever you do, make it easy to get from nucleio into the Yes. So, I um here. Okay. Here's here's the next thing. Okay.
51:06 Um, this took me down uh some rabbit holes. Okay. So, I if you guys don't know here, I will launch Nucleio and I will launch Affinity Designer.
51:17 Yeah. Okay.
51:20 Uh, I don't think we need this now. Uh, let me close this. Don't save. Okay.
51:28 Hey, don't need that.
51:38 Okay. Um, so these are these are all those icons that you saw. Okay. Some we decided not
51:45 to use. Okay. Um, now these ones at the very top. Um, I and Rafa Designer
51:52 designed these up top um to be the that you're not going to find much. I I have to redo some of these like glamping and
52:11 It's just not going to happen. So I have to create some sort of representation. I'm going to have to design that. Okay.
52:16 And also a roof tent, which is a tent on top of a roof of a car. Not sure exactly how to create a a simple SVG out of
52:22 that, but I I need to get it done. So anyway, but with that said is all of these bottom ones I didn't design those.
52:30 Okay, I got all of these bottom ones from Nucleio. Okay. Um and what I did
52:38 here is just so that I could supply this file to that customer.
52:43 Um I pasted all the SVGs from Nucleio into Affinity, right? And then Affinity it
52:51 actually has a quite a nice export engine. Okay. Um but if I and and again
52:59 this entire row of icons um or most of them actually this fire wasn't from Nucleio and but a lot of these were from
53:06 Nucleio exported from Affinity even though these SVGs were from Nucleio it was like 10x the size the file size.
53:16 I it was crazy. Okay. Um, now so I I spent a lot of time trying to figure out how to optimize the output of an SVG
53:25 from Affinity Designer and um it it is not easy. It is not
53:32 userfriendly. I'm happy to show show you guys what I came up with. Um it is not something I would expect most of you guys to to understand or know. Okay. Um
53:42 first off, I've tested there's a few different XV SVG things. digital small size. Start there. Okay. So, if you do
53:50 use Affinity Designer, um the default I was using SVG for export. Yeah. Don't use this digital small size. Never use
53:58 SVG flatten. That is idiotic. I don't even know that's an option. Okay. That that just it's just stupid. It creates
54:05 like a a a bit map version of like a PNG basically embedded in a SVG file. Like
54:13 who what's the point of even having that? I don't understand it. Okay. But digital small size, I found for at least these ones, the high quality and the
54:22 small size, there was virtually no difference. Um, for these small types of SVG, maybe for larger ones, it would
54:29 make more sense. I don't know. Um, I stuck with small size. It had a slightly smaller output. Okay. Um,
54:37 so now let's go into um here I will I'm going to reexport. I'm going to res export all of these guys.
54:46 Okay. And I'm going to I'm going to export them into here into this directory. Okay. Boop. And yeah, export.
54:53 Okay. Um let's close this. Don't need Affinity Designer anymore. I I like Affinity Designer. Um but yeah, uh I I
55:01 will show you right now the problem with the export feature in Affinity Designer.
55:07 Okay. and why if you're using multiple SVGs on a page that are exported from Affinity Designer, the problems you will run into.
55:21 I was not expecting to go down this rabbit hole today, but it's kind of interesting. Uh anyway, uh we'll we'll dive into Nucleio later. Okay, let's let's look at those uh here. Grand Cam Club icons. Icons.
55:33 Okay, let's just look at these.
55:36 Now, if you didn't know, SVGs are just a bunch of code. Okay. Um, hopefully most of you guys, if you're here, you know
55:43 that. All right. Let's make this a little bit smaller.
55:47 All right. Well, that's really, really, really small. Let's make it so you guys can sort of read it. All right. So, one thing the small export does, it actually, you know, it minifies the code
55:56 so it's all like in one big huge line, which is nice. Okay. Uh, we want that.
56:01 Okay. Um, but for I'm going to go ahead and just format this really quick so we can uh see it not minified so we can
56:08 analyze this output. Okay. Um, is this
56:18 uh Okay. Um, so one thing you'll notice here, let's I'm trying to find one.
56:26 Maybe this one doesn't have it. Let's look at I think motor home does.
56:32 Yes. Okay. Um motor home. Let's look at that SVG.
56:38 Uh this one here, right? Motor home here. Um this icon, okay. Um it uses uh so this window, okay, is clipped, right?
56:51 Um, it was a shape that was then used the subtract tool from the car. So that this car, okay, is is one path, right?
57:08 obviously isn't part of the original shape. We It was subtracted.
57:12 Okay, that way it's transparent. This isn't just a white uh, you know, window on top of a black image, right? It's subtracted from it. Okay.
57:22 So, and all that is done through this clipping mask.
57:27 Okay. Um, so here we have this clip this clip path and it has a clip one. And if
57:35 you look at this group, it also then it takes a clip path and it gets the URL to clip one.
57:44 Now, if you have this, if you put this SVG on the page, it will work perfect.
57:49 However, let's go ahead and now look at trailer.
58:02 Now, if we look at trailer, it has a very similar thing. We have this clip path and then it has an ID and then here
58:10 we have we're we're using that clip path on these other paths.
58:16 Okay. Now we are taking now these files you a you should probably know that uh if an SVG
58:26 file is loaded via an image tag like I was talking about earlier you can have this XML and this dock type perfectly fine but if you're putting it directly
58:34 into let's say an SVG stack okay you you only get the SVG tags so if I were to
58:40 put both of these on the page okay um if I I could be lucky and I they could work. Okay. But um I'll tell you right
58:50 now when I had all of these on the page, like it was all versions of jacked up.
58:56 And that's because every single one of them has a clip path set to the same ID.
59:03 And so when I put one SVG on and then I put another one, the clip path gets overridden because it just takes the the
59:11 last clip path that it could find. and and the all these clip paths because they all had the same exact ID were all conflicting with each other.
59:22 Okay. Um, so how do you fix that? I fixed it for a long time just by I knew
59:29 this was a trailer, so I would put like trailer clip path and then I'd make sure I went into here and I put in trailer clip path.
59:39 That that solved my situation for months.
59:43 Okay. Um, and it works as long as you make sure that the these I've found it mostly it's with these clip path IDs.
59:51 Okay.
59:53 Um, so yeah, Affinity will output it with the same exact ID on every single one.
01:00:01 So if you have multiple SVGs on the page that all have a clip path, make sure that that clip path is unique.
01:00:08 Okay.
01:00:12 Um there are how how did I fix it? Okay. Um
01:00:21 I fixed it through um obviously I'm a developer so I uh I went ahead and ran a uh hold on one second.
01:00:35 Just do a new window. All right. I go via terminal. Okay. And uh I'm just going to I'm going to CD into this directory right here. Okay.
01:00:48 And um I have this little uh I wrote this little script called minify icons here. I'll even show it to you.
01:00:57 Where is it? There it is.
01:01:02 And this does require that you have like crap installed on your machine. Um the script itself is actually quite small.
01:01:10 Um it just runs this one terminal command SVGO and then I pass it a config
01:01:15 file which I did a lot I spent quite a more time than I wanted um creating this
01:01:23 little config file. Okay. Um for SVGO um that gave me the most optimized versions of my SVGs that I could do.
01:01:32 Okay. And so now um if I go ahead and where's terminal? Where' my terminal went? There it is. Right. I could just go ahead and run this minify icons
01:01:42 and voila, it it shrunk down all those uh all those for me. And if we go ahead and look at those now, let's look at the
01:01:49 motor home. Okay. And let's uh let's format it so we can see it.
01:01:55 We'll notice that uh another thing that it does is it makes sure these clip path IDs are unique.
01:02:02 Okay. Um, so there you go. Okay. Um, there are online versions of uh of this. I I did
01:02:11 it via terminal, but if you just uh if you Google SVGO, I think it Yeah, svo.dev, there's this playground. Um,
01:02:18 which if you go ahead and I'll find um let me find one here that isn't
01:02:27 This one is actually I think an older one. So, if I just copy that, you can go in here and paste your
01:02:34 markup. Essentially, what it does is um it minifies it for you and it tells you the Oh, this one was already quite optimized, but it'll it'll optimize it
01:02:42 for you. And then you can either download it or copy the code. Okay. Um so, that was um SVGO.dev.
01:02:51 Um, and then click on this playground button and that will give you to this this interface where you can optimize an SVG code if you want. Uh, and then that
01:03:13 Okay. So that was a cool rabbit hole for SVG. Um, any questions on that?
01:03:22 Um and then what I what I did is um so I found though um let me get back to Nucleio. Okay. So now I have all these
01:03:31 exported and optimized from SVGO. Okay.
01:03:36 Um, but what I found was that e even though the process of Affinity exporting the SVG, even though the SVG originated
01:03:45 from Nucleio, I found that the SVGs that came straight out of Nucleio were still even smaller
01:03:55 than all that stuff that I just showed you by quite a bit, actually. Okay, so these
01:04:03 icons and I was actually floored. I I wish I I did that analysis earlier before wasting hours of my time um doing
01:04:12 all of this stuff. Okay. Um if you're using Nucleio, their SVGs are like insanely optimized. Okay. Uh for
01:04:21 example, like uh actually I decided, remember that one at Infinity, I had a campfire. I think I ultimately decided to go with the one from Nucleio.
01:04:32 Uh I think it was one of these ones. I don't know where it is.
01:04:41 Interesting.
01:04:43 Oh well. All right. Maybe it was just fire.
01:04:49 Ah, there it is. This one. Right. So, basically, I just right click and I say copy as SVG and then I just pasted it in
01:04:57 straight in. And it the the size of the SVGs from Nucleio are always going to be topnotch. Okay. Um, so if we go into
01:05:06 this collection here, is this the right one? This is the wrong one. This is the right one. In features, uh, if I go into
01:05:13 campfire. Now, one thing I do, so this is an SVG field, right? Um, and I know it confuses a lot of people. I wish I
01:05:20 could default it to the code view. I I have a bug filed. Um, it drives me bonkers. I I wish I could do it, but I I
01:05:29 can't. Um, so yeah, you need to click on that, then paste the paste it in, and then you can preview it. Um, so anyway,
01:05:37 um, yeah, the SVGs that come straight out of uh, Nucleio are the best. However, let
01:05:44 me make a few things. Um, so by default, um, well, if we let's look at this output
01:05:53 here. We'll notice that the, uh, here we have something called the fill. And if you if you're familiar with SVGs, you know that um there's two ways of
01:06:08 look, there's no colors defined. It all says current color.
01:06:13 Okay. And um what that does is instead of you defining a color uh that fills,
01:06:19 it actually uses the current text color from CSS.
01:06:26 So that means uh whatever the current text color is, that is the color that SVG is going to use for the fill. Or if you used current color on the stroke, it
01:06:35 would use the current text color as the stroke color. Okay, that is a very powerful thing. Okay. Uh because now you
01:06:44 can just style SVGs using um font colors inside with swatches.
01:06:50 Um and it just makes things a little bit nicer. Especially you don't have to try to override colors with a with a SVG swatch. And sometimes that works,
01:06:58 sometimes it doesn't work. I find just using wherever it says fill or stroke using the word current color. It needs
01:07:04 to be exactly this capital C color. So current color. Okay. Uh, now let me show you something that's cool with Nucleio
01:07:13 because Nucleio has has a setting that isn't on by default that will switch out every color with current color
01:07:21 automatically. Okay, so we're going to go into Nucleio and uh if we go into Nucleio settings
01:07:30 uh there it is. It's this under copy and icons. It says replace inline colors with current color.
01:07:38 turn that on and whenever you copy an SVG from Nucleio, it will always use current color. Now, what's kind of
01:07:45 annoying is sometimes I want to use a specific color and not the current color, and there's no way to temporarily disable it. You kind of got to go in the
01:07:52 settings, turn this off, then do it, then go back in and turn this on. Okay?
01:07:57 But, um, I say 99% of the time, this is exactly what I want. I recommend turning that on. Other things, um, I remove the
01:08:04 title tag. I don't want titles in my SVGs. I don't need them. Okay. Um I mean a lot of times it just says fire or some generic thing and I I don't want that.
01:08:14 So I remove the title tag and I also remove the width and height attributes.
01:08:20 So those are three things that I have enabled that I don't believe those three are turned on by default.
01:08:31 So if you do use nucleio I recommend having those three on.
01:08:41 There we go. That way it doesn't matter if I'm in light mode or dark mode. Um, I just right click and it just, as you
01:08:48 see, I right click on this, it was white, but over here it just inherits the current text color. And voila, there we go.
01:09:04 Sweet.
01:09:09 There we go. That was a a mini master class on SVGs, the advanced SVG stuff.
01:09:20 Any other questions on anything else? We don't really We We totally went down that total CMS3 rabbit hole today. I
01:09:28 guess not all it was SVG related as well, but yeah.
01:09:35 Um, let's see.
01:09:39 I think that's I don't have anything else.
01:09:46 Anyone play with uh anyone get and play with prints or any of the other relatively new stacks that have released lately?
01:09:55 Oh, yeah. No.
01:09:58 Um, something I did add to uh for prints. Um, I didn't dive into it. I I went over in
01:10:06 the video, but not not in detail. Uh, which could be interesting to look at.
01:10:12 Let me Let's clean up some of these windows I don't need anymore.
01:10:17 Um, let's look at uh this guy.
01:10:24 Um well a I I did go into how you can integrate prints with total CMS3 feeds and total CMS1. So there's sample
01:10:33 implementations here. Um so if you want to know how to create a gallery you know managed by any of those things um you do that here. So with total CS3 pretty
01:10:42 simple if if you're familiar with the loops right um inside prints you just add in a loop gallery.
01:10:49 Um and then inside here we use the prints image CMS um stack which is kind
01:10:56 of used for any sort of CMS style integration either that's total CMS one total CMS 3 or feeds and what's cool is
01:11:04 um you could use the image URL stack um but you know you could put your macros
01:11:12 inside these links but I was it got me thinking of why not just create like this this kind of more convenient thing where you could just kind of see the
01:11:20 macros right inside the settings and you don't have to, you know, click on the link and go into the link and paste in a macro into the link box. And um so yeah,
01:11:28 I thought this was kind of a nice way and also it it kind of if you were to use an image URL for this, a lot of times it it kind of shows up as like a
01:11:37 404 image inside edit mode, which isn't very nice. So yeah, basically you you get the prints image all the time now,
01:11:45 right? So, um, you know, now we we can see our macros easier. We, you know, we get something that actually looks halfway decent inside edit mode. Um, and
01:11:54 yeah, I thought that I thought this this stack was a win. I'll probably end up doing something similar to this in a lot of my other stacks now. Um, I'm not sure why I never thought of it before. You
01:12:02 know, I was like, oh, just use the image warehouse and then, you know, in where the image URL you put in your macro, but it's just a little bit more convenient to be able to just see the macros a
01:12:11 little bit more and have just a nice text area to put them in. Okay.
01:12:16 Um, so in this example here, um, I just I just used a total CMS 3 gallery.
01:12:24 Actually, if we go into the total CMS 3 project, um, this will be inside the demo project. Um, uh, when
01:12:33 for the next beta. Okay. uh where essentially in inside here we go into
01:12:41 this is no it's uh demo dots this one um so here we are here it is what we'll
01:12:48 notice is there's square thumbnails okay um and that's because total CMS can dynamically create square cut thumbnails
01:12:57 for us right so um the way I got that is if we go into our admin area.
01:13:09 Okay. So, here's the gallery that it's pulling from and essentially what if we go into this link generator, right? Um,
01:13:17 you can create, you know, the whatever you need here, right? So, I wanted square. So, I would do 400 by 400 and then I would do crop focal point. Um,
01:13:26 and then just let's say that's all I needed. You can do preview. Make sure that that's it. Copy your macro.
01:13:33 Okay. Now, um once you copy the macro, you'll notice that this isn't exactly what we need because this this is a macro for this image, for this exact
01:13:42 image. Okay. Um but I want to create a macro that will work for any image in that particular gallery. Okay. Um so if
01:13:51 we look at um what we did here, uh maybe I let's go ahead and create a new
01:13:58 let's just maybe file new window. Right, let's just do this. So here we'll do a
01:14:07 new file. Right, so this is the macro that I got from uh the total CMS admin area and but again this this particular macro is only for that that one image.
01:14:17 It's for VW van 5. Okay. Um so let's look at what what I've done here.
01:14:27 Okay. Um so what I've done is uh instead of defining a specific image okay what
01:14:37 what I've done is I've given it image.name okay and this will be standard um for
01:14:44 the loop gallery stack. Okay if you notice inside the loop gallery I have a bunch of macros so that you can kind of figure out what you want. If you notice file name is image.name.
01:14:56 Now, this particular macro has two curly braces. Let's see if I were to copy that and go into here. You might think, "Oh,
01:15:03 I I have to replace this image name with my macro." Okay. However, since we're already
01:15:11 inside of of these mustaches, we don't need th those again. So, at that point,
01:15:18 I could just have image.name, and it works the same.
01:15:24 Okay. So, that's how I got to this macro was getting that macro from the edit mode or from the from the admin area,
01:15:32 but then I I needed to generalize it so that it worked with any image. Um, and then I I got the variable for the file
01:15:40 name and I replaced that. And at that point, that's the macro that I put inside the thumbnail.
01:15:46 And then repeat the process for the full image and you're done. Okay.
01:15:54 Um now here we'll notice that for the sizes um I knew this was a square image uh because I made it square. So I literally put in 400x 400.
01:16:07 Okay. However, down here you'll notice for the sizes I put in width and height because I don't know exactly. It could be a portrait image. It could be
01:16:15 whatever. So I want to make sure that that these attributes are getting pulled from the actual image and all that data
01:16:22 is inside the the loop here. Well, notice that in here I can do image.width and image.height and I just copy and paste those with the
01:16:32 curly braces into these fields here. And obviously down here I want the alt tag.
01:16:38 So um I would put image the image.t macro there as well. Now, if you wanted inside prints, you can actually have a separate caption. And let's say, I don't
01:16:47 know, I wanted you can even do you can merge all of this stuff. Let's say you wanted the author with the copyright date, right? Maybe you want that inside
01:16:55 the caption of in the light box. That could be interesting, right? So, you can actually put the author and the copyright information that's from the
01:17:03 exit data of the image and have that displayed inside the caption, right? Pretty cool.
01:17:12 That's really awesome stuff, right? So, here, just to show you, let's say I wanted the copyright notice in there, right? I would go ahead and find the copyright macro, which I had it earlier.
01:17:21 Where'd it go? Oh, here it is. Right.
01:17:23 So, I'd copy that and I go into here and I'd paste it directly into my caption.
01:17:27 Now, my caption has the copyright notice from the EXIF information of that particular image.
01:17:35 Pretty slick.
01:17:38 And you you can add all you can even add all kinds of HTML into here if you want to go crazy. And you can add like you can display the aperture and the focus and the you know shutter speed and all
01:17:47 that stuff if you really wanted to cuz all information is there right could be really cool for a photographer website to display that information.
01:17:57 So pretty slick. Um next up is feeds files. Um
01:18:07 so in with this uh if if you don't if you want to store images on the server okay in this example in this project
01:18:15 file actually in the demo file I actually have um inside resources I created a feeds gallery folder and then this contains all the thumbnails.
01:18:26 Okay. And then inside a feed's gallery, I created a full folder that contains all the full resolution images.
01:18:35 Okay, just that we know know that kind of structure. Okay. Um let's look at how I set up feeds files. Um one thing uh I
01:18:45 added in an update this week as I was creating this I thought I should create that same kind of macro hints that I've done for Total CMS3 for feeds files. So
01:18:54 now all the macros that you could use that you would might want to use are all are all accessible right here and you just copy and paste them. Okay, which is kind of nice.
01:19:04 But here I set up my uh my folder. Okay, the folder is going to be obviously because I put it inside the resources folder, it's going to be slash resources slashfeeds gallery.
01:19:14 Remember and that is going to be um the folder that contains all the thumbnails.
01:19:21 Right? All right. Now, so it's going to loop through all the images or all the files in that folder.
01:19:28 Um, and I say ignore folders because I don't want it to process anything. I just want it to process just the the files in that which are the images.
01:19:36 Then, uh, I I do that print image CMS just like we did in total CMS. But in this in this case, we're going to use
01:19:43 the macros from feeds files. So, for the thumbnail, I use the path macro because that's going to give me the path to the
01:19:49 file. I do the width and height uh because feeds files actually it'll recognize if something is an image and actually get the width and height of that image as well which is pretty cool.
01:20:12 But in the full um essentially what I did was if if we look at that again. So inside gallery we'll see that I have all
01:20:21 the images uh all the thumbnails and then inside full I have all the full resolutions.
01:20:28 And what's interesting is I made the names of the files exactly the same.
01:20:31 Right? So the thumbnails and the full images have the exact same names. It's just the full images are inside the full
01:20:38 directory. Okay. So if we look at what I did here, um the full image is the directory
01:20:45 slash full slash the name of the thumbnail. So that is now the the full path to the full image.
01:20:55 And then um it's going to be the same exact um aspect ratio as the thumbnail.
01:21:06 for the thumbnail. Um technically the width and height are going to be different but what's important is the aspect ratio of the the ratio of the
01:21:15 width and height is the same. So that's why I can use I can do the same thing here. Now a side effect um there is no way of getting alt tag information with
01:21:23 these files. So um you're just going to have to you know you can use maybe the the name of the image or something like that. But yeah um you're not going to be
01:21:32 able to like get some sort of unique alt tag information with this. Um, but you could make it somewhat unique by getting the name, I guess, the name macro in
01:21:41 there or something like that. Um, but yeah, you're not going to get full-blown alt tag caption information like we can from Total CMS. So, there's that.
01:21:52 Any questions on that?
01:21:56 Some pretty cool stuff there. So, that demo comes with prints. It does. Yes.
01:22:01 Uh, it has the the Rapid Weaver and the STAX 6 version. you get both project files. Oh, we should have a look at that
01:22:09 one. Yeah. Um, now stack six doesn't support resources yet. So, um, the resources aren't added to that. So, if
01:22:18 you're using the stack 6 project, you'd have to manually up those right now. Um, that is something that will come before the official launch. Um, but it's not it's not ready yet.
01:22:29 Um, and sometimes I forget. Um uh I I do have a version of stack 6 that works with feeds. The current version I forget
01:22:37 that um I have a slightly updated version. The next beta that you guys will get will work with feeds.
01:22:44 Um so yeah, sorry about that. I I forgot I I showed off some stuff in the videos of with PHP stacks using stack 6 and
01:22:53 people were like sending me emails, what the heck? It's not working for me. And I I forgot that. Yeah. Um it works for me.
01:23:06 Uh, it's something I would like to um I I'll have a better idea at the end of summer.
01:23:16 Okay. Yeah, cuz my hosting runs out middle of next year. Okay. Um, so yeah,
01:23:23 I I wanted to have it shipped by the end of this year. I'll be honest, I don't think that's probably going to happen, but I'll I'll have I'll have a better,
01:23:31 clearer idea in late summer, early fall um on on how that will happen. Um I'm I
01:23:38 I definitely want to like move all my websites to it and get that working and then and then may maybe do a a few
01:23:46 invite only people that, you know, um want to help me beta test um beta test it. Um, so yeah, but I I definitely need
01:23:54 to make sure I have all my I need to eat my own food, right? So I need to, you know, migrate all my all my stuff to my own servers, make sure it all works.
01:24:02 Yeah, exactly. Right. So, um, yeah, I I prefer eating my own dog food because Yeah, I think it's smart.
01:24:14 Good. It's like some devs that would, you know, sold stacks but built their website in WordPress. It never made sense to me.
01:24:25 No.
01:24:31 Sweet. Any anything else, guys? I'm happy to stay on as long as uh as long as you guys want to stay on and chitchat.
01:24:40 Any other questions?
01:24:44 No. Sweet. I guess we'll call it a day then. Very. Thank you very much for joining everybody. I hope you uh hope
01:24:51 you learned. I hope I didn't uh bore you too much.
01:24:55 I know sometimes I get on those I go down those rabbit holes and some people are just like, you know,
01:25:02 so great. And I learned about the SVGs that that has thrown me in the past. I love Oh, yeah. Designer and I've thrown
01:25:11 SVGs up and I'm like, why can't I get the two different logos to both appear and Yeah. Yeah. So, yep. Cool. Thank
01:25:20 you. Appreciate it. Excellent. My My pleasure, Dave. Yep. Cool. Take care, guys.