SC Scot's still
alive hey everybody hey how's it going
good excellent hey hello
hey anybody else get an echo yes there is quite a bad Echo
um if if you're not if you don't want to chat right now just go ahead and mute yourselves that'd be great that way we
can try to reduce the echo in a busy day Joe just sort without
a ticket because Sean's popping over here on Monday excellent whoever muted yourself oh oh I
still hear an echo quite a few of them let's try that no still going
on interesting while you're talking my microphone's going up as
well okay just C curious uh raise hands who's uh who's used the current beta so
far or not not the one the beta in general not the version I just shipped yesterday or two days ago whenever it
was so so okay Matias up Bill is that a hand raised no
okay oh yeah Gary Gary's us I didn't I didn't even see you here Gary how's it going yeah he's he's been playing yeah
good thanks excellent we shall be playing in the
next couple of weeks lot more with it sweet yeah I've been using a Joe oh of
course between you and Ben you guys are really exercising it Dave Dave mute mute yourself for a
second I think it might be you hello hello hello oh oh yeah yep
Dave you were causing the echo Dave unmute yourself when you want to chat okay yeah no because when you were
talking it's coming through the microphone here oh okay got it
yeah what up what's happening you know just chilling
sweet we we'll wait a few minutes before we get started let uh enough people come
in just quickly Josh um that Stack's brilliant we've got a lot of that working I tell you yeah you liking the
stack y that's good I I I've secretly launched it nobody knows I've launched
the stack yet oh I was just about to say I didn't know you launched it yet cool now it's been live since uh last weekend
but I uh I haven't had time to get to the video yet um and because of some people's feedback it's actually going to
help me make a better video so hey you you pulled a Joe Workman good job that's
yeah I know somebody else just purchased it today and I'm like oh someone's sleuthing my website they know that it's
there but I haven't told anyone but for those on the call I released my uh feeds
table Pro stack it's an HTML um it's an HTML uh table creator
that if you use it with feeds you can then feed all the data for the table with feeds uh it has search short and
sorting um uh instance search so as you type it's search as you type um yeah
it's it's pretty awesome um I like it I ended up I built it because I was building it for another client site that
I was working on and in the end I thought just be better to turn this into a stack and then it's spiraled out of
control from
there mosimo you don't need a webcam to hang out hopefully you're here I saw you in the
chat um oh oh yeah you're here cool I'll put a link in the chat if if Joe doesn't mind
go for it um okay uh let's get cooking so uh this is
a new service that I'm still playing around with and getting the let's see if
I if I go like this do you guys see just me just curious no Joe if you go up to
the top right and um where when you click on that gallery mode there's a button that says um like force there's a
toggle uhhuh and then you will force people into your View mode so if you
turn yours to audience and then you flip that toggle it will push everybody into that same view got it okay yeah see me
now but you can kind of see everyone else up on top just for fun yeah okay cool interesting okay
um sweet so um total cms3 okay um it is a
completely different Beast um than total cms1 okay um it
is uh conceptually the same okay um but
the implementation um not one line of code was brought from total cms1 okay um
it is completely Rewritten actual completely Rewritten multiple times now that hence why it's total CS 3 and not
total CMS 2 okay technically actually it should be total CMS 4 okay I I actually
have Rewritten total cms1 this is the third iteration okay um so yeah what
five years I've been working on it something around there which is pretty nuts okay um I'm really really happy
with how it's turned out um or how it's turning out okay um and I think I nailed
it I I think it's really good um and as a use case you know we
were just chatting about feeds and hopefully most of you probably
know feeds um really the the entire purpose of feeds or my or one of my my
dirty ultimatums or uh you know behind the scenes things I wanted to do with feeds was to test some things right um
so as you know feed feeds uses something called twig it is a templ engine okay um it's uh has all those
little macros that let you insert data and I I wanted to to use that in total
CMS and I'm like um I didn't want to go all in on it until I
knew that it would fit well with the community um
hence I I implemented uh feeds okay um and as you know feeds uses twig um and I
think it was a grand slam okay I know feeds is a very powerful stack I know many of you here love it okay if you
love uh feeds you are going to want to go to bed with total CS
okay um it is it is really awesome okay um I've taken the Implement what I did
with feeds and then gone a lot farther okay um it's much more powerful um and
it it pretty much is like a Maring of total cms1 with feeds okay um sort of in
a way okay along with a whole bunch of other
stuff now um this is a beta and um earlier on in beta 1 if you were at the
I did a live stream with the beta 1 stuff I was open and saying hey this is
a beta um please use this as much as you can obviously uh some people are already
actively building websites with it which is pretty awesome um but it is a beta
and you do that at your own risk right obviously because I say that because I I
still am willing to break things between one Beta release to the next in order to
it to make a better shipped product okay at this stage I'm I'm less likely
to ship breaking changes actually I have one that's a slightly breaking change it's going to ship in beta 7 I'll show
that off today okay um but yeah it's just something that I felt had to be
done for the shipped product okay um and for existing users again I'll review
what that is um it's not a huge deal but it is it is a thing
okay um
so I'm using this also as a way for me to learn and to be better at teaching total
CMS so I'm probably going to Fumble a little bit here experimenting with ideas on the order in which I teach things and
and whatnot so please feel free as I'm chatting to um chime in and ask for
clarifying questions okay it's okay um I'll try to watch the chat as well so uh
for those that can't speak um you can type in your questions and I will try to
um you know feel those as I go okay before we get too far onto a different
subject okay um so before I kind of dive into um total CMS 3 is are there any
questions um to start off
with no not not a single one okay um let's go ahead and dive in
uh so let's go ahead and uh let's see share where is the share thing there it is share I'll share my whole
screen oh you guys see my screen now yes yes excellent okay
perfect okay um let me go ahead and one
second where
all right now I know I know people like this little doohickey that I use sometimes so do you guys see the little
circle around my mouse yeah yeah okay perfect okay cool um we are going to
start off with actually you know be before before
I start off with um sharing my screen I want to I want to talk a a little bit
about vocabulary okay some some some words and how total CMS 3 is structured
okay before I start diving in um so uh hopefully most most of you
here are most likely uh familiar with total CMS blog okay and how it has been
abused over the past five or six seven years to do all kinds of other things
besides a Blog but nowadays it's probably used for non-blogging purposes
than it is is a Blog okay um it is it very well abused okay and that's okay
because it's what we had and we did amazing things with it okay um but not
everything can be a Blog right so um we have a new vocabulary in total CMS 3
okay um because in total CMS 3 um well let me say in total CS one blog is very
powerful and total CS3 uses that blog
style architecture and goes all in with that okay so um in total CS 3 we have
everything is a collection okay think of a collection as
a Blog okay but it it is a collection of objects okay in total cms1 terms that is
a Blog that has blog posts but a collection can be a collection of
objects of whatever you want it to be it could be a product it could be a campsite it could be um an event it
could be whatever you want okay a person a location okay now what defines what that
object is is something called a schema and a schema You' probably heard are
familiar with this term it's a database term and um that pretty much defines you define
What fields are available in total CS 3 these fields are called properties okay so we have schemas that
Define what an object is um we can have a collection of objects and then those
objects have properties a property could be an image a gallery pretty much all
the fields that we had available in total cms1 gallery image Depot file text
Style text number all that stuff okay um those are all Fields so we can create a
property that has as many of those fields as we want okay um as many or as little right
um we're not limited to um what I've defined in a blog okay
and uh that's super powerful because you now get to you're not limited by the fields that Blog has but even better
than that okay and I think uh uh Bill Burton who's here uh can be a testament
to that that being able to name these properties whatever you want is a
godsend okay because I know he I know he's he's built some custom stuff already and played around with the beta
and um he he's liking that right and it's amazing because you no longer need
to um in in the current days if you wanted to use blog as something else you need need to know I'm using label for
the price and I'm using author for the location or something like that right where you you had to like mentally map
and a lot of people use spreadsheets to map all this data out and um it was confusing and annoying right um so not
having to do that anymore is going to be really really great there's your marketing Ploy Joy
Joe really know total CMS for people with aging memories
excellent excellent okay um now I guess I should talk about um there are going to be
three additions of total CMS um total CMS 3 there's going to be
light standard and professional okay um and light is essentially going to be
easy CMS okay easy CMS will be going away okay uh once total CMS 3 is
launched the current version of total CMS and easy CMS will be gone okay okay
um total cms3 will be
um charged per domain even the light version okay um I haven't fully released
all the pricing yet uh you guys have seen some of the pricing right I think uh standard is going to be uh 159 Pro is
359 um I haven't quite settled on what the light version will be okay um
essentially the light version will be similar two easy CMS um I am adding some
stuff though you're GNA we're going to have gallery and we're going to have feeds okay uh feeds being the total CMS
feed okay not feeds the stack okay um so it'll be like a very an extremely light
blog okay um will be in the light version then what we're gonna have
standard uh which is essentially um the current version of total CMS so you have blog and everything else and then
there's going to be a bunch of new features that you'll get access to there's a really great uh image engine
um that actually light will get access to as well um now professional um the
professional version will have uh support custom collections so if you want to create your custom collection
and name add as many fields as you want name the properties whatever you want um
as well as there there's going to be some other uh additional features and and stuff that Pro will unlock um I
haven't ironed out all of those details yet okay I do have to say that the current beta everybody gets Pro during
the beta okay um eventually when the product is shipped whatever version
you've purchased okay some of you have purchased Pro some of you uh purchas The
Standard Version um uh once we ship we will have the ability to you know you'll
get locked down to whatever your license um is done or available with okay um any
questions on this overview or the three different versions um that I can answer
before we dive dive into the actual
CMS no man I gu did a yeah will there be an upgrade oh yes um so great question um
there will be upgrade pricing so you can upgrade your existing total CMS instances to Total CMS um whether that
be um there will be no upgrade path from Total CMS to Total CMS light I I don't
think that makes sense um there will be upgrade paths from Total CMS to standard or Pro I don't know what that pricing uh
will be yet okay um as well as I will have the
ability to again I haven't done this yet either but the ability to migrate your data okay so all of your existing text
and images and Galleries and um blogs uh can be migrated to Total CS 3 okay um
now this does not include um if you're using Stacks okay so um the stacks are
very different uh I think it will be easier it'll be well it will be much
easier than let's say the foundation one to Foundation 6 migration where you kind of had to redesign your entire site um
you're not going to have to redesign your whole site but you will have to redo the total CMS bits of it
okay um so yeah there will be some work uh if you're using the total cms1
macros um I'm going to try I haven't tested this out yet but I don't see why
there would be any uh reason why I can't build some sort of add-on that
will interpret the total cs1 macros and into total CMS 3 macros okay um it will
probably be something that's off by default that you can then add to the page and it will just be some sort of
like interpolation um or translation that's a better word a translation uh between uh
the macros and um the current twig syntax in total CS
3 okay um good question there um yeah oh another thing I do want to
say is um I total cms3 is actually built uh it is built to be a standalone
product as well um obviously right now I'm honing in and
making sure that it all works within stacks and we're building it with with Stacks however total cms3 I I do plan on
shipping it as a standalone product and Market it to other web developers that maybe are not Stacks users okay um right
now that market will be pretty much people that know how to code um and they're going to be coders and this is
pretty much someone who likes design or build a website but doesn't want to have to build you know an entire CMS to
manage the data uh total CMS will be that for you okay um so yeah uh maybe
that will go other routes in the future um but as of right now total CS is a it
it will be a standalone product um however it's I love stacks and so uh
yeah it's going to work 100% uh with Stacks as well okay sweet okay without further ado let
let me well I can't shut up but let's stop looking at my ugly mug and uh let's
share my screen okay curious when I when I share my
screen do you see the sessions window right now I'm just curious is it clever like Zoom where it hides itself it says
you are now sharing your screen oh okay got it yeah you hit ignore it turns
into an Inception window and it just layers upon layers of oh really oh
interesting okay cool I just want to make sure that it did do that okay cool um right let's open up a
browser um so another huge game changer for total CS which was just shipped a
week ago or around a week ago okay um was let's go
to hey and that's probably why I I know a lot of you are excited about the the current current version of total CMS is
because it has an entire Made For You admin system
okay um so this dashboard um is basically now can be used as your admin
area for total CMS um you're not required to use this
um actually before I built all of this this admin area I made sure that we can
still build custom admin web pages and we'll see that in a little bit first but
I thought introducing total CMS with its new fancy um you know admin area would
be um good a good place to
start so um in here uh obviously a lot of this like this is just kind of like a
little to-do list for me okay um so this is the hom page there's not much here but eventually this will be some sort of
dashboard it'll probably tell you something about the data in your CMS instance and maybe links to docs or you
know stuff like that right so um yeah eventually this will be something that's nicer than just a bullet list okay but
that's not really important right now um let's go into the important stuff um and actually um yeah let's start with
schemas okay um since it's kind of like the lowest level so a schema as we talked about
before is um it defines what a particular object is okay so here we
have a Blog schema and this this contains all of the data for a
particular um blog post okay or blog object we have all of these fields as
you see there's little icons that kind of indicate what type of field it is you also notice that we have built-in schemas and custom schemas okay um the
built-in schemas are read only you cannot modify them um so none of none of the actual form fields are editable here
um so I mean but you can view and kind of see what what data is available um
and whatnot okay uh now here there's also what fields are
required okay and what fields are part of the index um the index is an important thing
um this is essentially uh again hopefully most of you are aware of total CS blog okay the current blog as you
know not not every uh blog post field is available in the blog list for example
extra content extra content 2 and content okay um those are not available
um so in here this this basically essentially defines all the fields that
are going to be available in the index within the quote unquote blog
list okay um fields that are not available
um here can be accessed on the actual individual blog post
page okay for example now um actually this uh kind of good thing I started
here this talks about a change for existing beta users um that I've made in
this uh version that I haven't Shi yet okay this will be in beta 7 that comes
hopefully tomorrow but um yeah it it might be a little bit more than tomorrow
okay um if if we look at this blog schema we'll notice that um it is a little bit
different than what the schema for total cms1 was um it doesn't have um extra
content it doesn't have extra content to it doesn't have labels it doesn't have genre it doesn't have archive okay
um and the reason for that okay is because um I added a lot of extra Fields
so that people can view blog even more okay and now that we're we're kind of going to get um a new beginning um I
wanted to remove fields that just it really didn't feel like they were needed for a Blog okay so I trimmed those down
however with that said um there is a hidden schema called blog Legacy that um
conforms to what total cms1 was okay um
and in a little bit if you remind me later I'll show you um how you can uh use that blog Legacy essentially in the
migration process when I migrate your data um you will be able to um it'll
automatically migrate cms1 data into a Blog Legacy schema okay um so I just
want to let you guys know that um and please remind me in a little bit later on when we maybe get into some of the
weeds um how you can actually um migrate uh use an existing maybe an
existing blog that you've created in the existing betas and how you can assign that to be a
a legacy blog schema instead of the normal default the new default blog schema
okay okay um so that was a little boond doggle there okay as you see here
there's a a lot of these built-in schemas that you're already familiar with some there are some new that there's a color um because total CS now
supports colors um but we have dates Depot emails feeds um just like we had
in total cms1 okay most of these are pretty simple they're just a an ID and
then a field right so a gallery schema just has an ID and a gallery a file has
an ID and a file right number has an ID and number so on and so forth okay um
feed obviously has a a few more right um oh a couple of new fields that I I did
add to blog and de feed are um created and updated these are going to be dates
date fields that are kind of automated so when whenever you create a new object
um an updated field can automatically be um add the date that it was currently or
created will be the uh date that that object was created and if you ever edit
that particular object the updated date will automatically get updated uh with that uh date okay so that's nice that's
in both feed and in blog okay so pretty nice
there now we have the ability to do custom schema as well and as you see in here I have the ability to edit things
right so if I wanted to add more uh required Fields I can go ahead and add in the required fields that we need okay
um here's a a new pretty fancy new tab or tag uh selector um I really like it I
think it's nice um it it this particular instance it shows you all of the existing properties so you can easily
just go ahead and click them to add things to either be required or indexed
okay um in this editor um you can go ahead you can see I can actually rename
a field if I want just by clicking on here and I can type something in and I can name it to be whatever I want okay
um if you click on this um it'll actually open up a light box and it shows you even more data okay so it
shows you the type of data it is you can provide something called a factory which we'll go into in a little bit um a
default value um some form information so um what is going to be the the the
label for this field the placeholder um the help text we'll see I'll show you some examples of that maybe uh I was
just testing this out so that I left all these blank that was bad of me and some more more advanced settings for this
okay and as you see you have all those detailed settings for every single property which is which is
nice um over here you can duplicate a property you can also delete properties
okay and if you didn't know they're all Dragon drop okay um and why why is
Dragon drop important um essentially uh because all of this is dynamic the forms
that are generated um they're based on the order of the fields in the schema so the order of your fields in the schema
um we'll see later on when we go into the forms uh they match the order of the fields on the form okay okay and if you
want to add a new field just go ahead and click the plus button and it'll add a blank field and you can go ahead and do all that stuff Okay add all that data
in there any questions so
far okay um so again that was schemas okay again they're a way of defining the
definition of what our objects are going to be he let's dive into the next view it's
collections so we've already talked about what collections are there are a a a collection of objects that conform to
a particular schema so for example here is my blog um and when I click on blog I
see all of my objects here okay what's nice is that it's all filterable so if I
do you know EG uh there we go I can filter and find things okay and it'll
filter based on every field that's displayed in this view um in this view it displays all the fields that are
available within the index okay so that's another thing that the index um
affects um and it searches all those fields so like if I search for um I saw
some posts that had dates of 1974 Oh I thought it was maybe it was
2024 okay um 2024 there we go we can get everything that has 2024 in it right uh
oh was 1972 I saw here let's go 197 uh 72 there you go right so you can
kind of see all that stuff so you can quickly filter um it happens on the Fly
really nice okay uh you can also sort okay so you can click on each field and
it'll sort by that particular column okay you also notice that there's pagination in here okay and the sort
happens across pages right so like if I sort by date okay I'm going to get the
the latest most recent date even if it was on page 10 okay so really nice there
as you see some data that isn't necessarily text like images I do show a preview of that image as well which is
nice okay um now there's multiple things that we can do in here uh obviously if I click on one of these it takes me to the
form to edit that particular object in this case a blog post okay and I can
edit all this stuff upload images do whatever I want click save okay
pretty uh run-of-the-mill um not rocket science
there uh you can use these breadcrumbs as navigation as well I can just click on uh click on this to go back to the
main blog what are some other things that we can do here um I can uh go ahead
and edit my collection oh well I guess before I do that let's talk about what a collection is um so I'm going to go and
you'll notice down here I can create a new collection um so let's talk about what a
collection is uh I'm going to go ahead and click new collection okay and uh
what I can do is I'm just going to give it let's call this new blog let's say I want to create um a second blog or let's
call this like um uh news let's call it news Okay I want to create a blog that's
news um on my site um and it it automatically updates the ID you can
actually manually type in the ID as well but I wanted to show you that it similarly to what we have already for uh
blog um the ID Fields can be automat atically um based on a field such as
name okay um now here you'll notice that I I have to select a schema that this
collection um abides by abides I like that word I have to remember to use that
in the future okay um and you notice uh actually we talked about blog Legacy I
can actually make this particular news blog abide by the blog Legacy schema
okay um or in this case I I'm going to choose blog okay um and then you can
give it a name and you can give it a URL you don't have to give it a URL at first um probably us at first we don't know
what the URL is going to be you can leave it blank we we'll review what that is um when we actually start looking at
the the website side of things may I interject for one second please so I one
thing that I that's super powerful about applying a schema to a collection is for
instance say I create a products schema and I want to have a collection
specifically for men's clothing but then I want to create a collection for women's clothing the beauty of having a
singular schema is you can apply that to multiple Collections and I think that an
important thing to note here that people grasp the power of a schema is it's a
set of rules for a collection but it can be for collections you can use it AC across multiple collections so if you
have four different collections utilizing one schema updating a singular schema can update those four collections
uh fields which is super super powerful so I just wanted to like help make that connection because exactly very good
thank you and that's important because um like I don't have any UI for this yet but um I want eventually we're gonna
have the ability to like move an object from one collection to another or copy it or clone it or whatever right and and
as long as those collections abide by the same schema you can just move them across different you know collections
right um so really cool let's say you had a Blog and you had I don't know an archive or something like that right you
can archive a blog post and move it to something so it's not gone forever you're just but we can uh you know
because those two collections abide by the same schema the same rules um then
we can do that right um so thank you Josh hey so I'm going to go ahead and click save and you notice when uh hey we
got a cool new save animation and once I save it you'll notice that I now have um
a bunch of new Fields here so I've created this collection we'll notice that I have uh Fields here for every
single property Okay now what's cool about this is I can actually um edit
some attributes about this and make it unique for this particular collection
okay um so let's say uh let's go to title okay um by default the label in
the form field is going to be title let's say I oops um I didn't want to call this title because it's a news so I
want to call this headline okay let's you know it's the title field but I I
want to call this headline okay so I'm gonna do that and let's just save that really
quick all right and uh just for fun we're going to go into news and I'm GNA I'm going to create a new
object what you'll notice here is that that um instead of title it says headline right here right pretty cool
now obviously I I have hover tool tips for help over so the title gets you know
replaced but yeah um you know and then I could I could update the help on here as well I can see you know write a nice
headline that bu blah blah blah blah blah right but what's cool is again you can customize this on a per collection
basis so the defaults for all this are defined in the schema okay but you can overwrite it um on the collection level
which is really nice okay let's go back to blog since this
has a bunch of objects now that we know uh what a collection is um and you know
what it looks like to create a new one uh we can edit this collection so if I wanted to edit the blog and in here
again you can go to all these fields um and edit some of the either the form things or add some additional settings
I'm not going to dive into these right now we'll have documentation uh for them later on uh I guess here okay I'll show
you some of them so from for like ID the ID field um is by default based on the
title field okay so um in here these advanced settings allow you to do things
like this so for an ID field there's a special setting called autogen and we
can Auto we can make the title be based off or we can make the ID be based off the title and this is the syntax and
there there there are there will be documentation on all of this and there's other things you could do like let's say I wanted it to be the title um Dash and
then a a a uu ID okay just some like unique identifier uh let's do that okay
so I'm going to click that I'm going to save it just kind of show
you okay and let's go back to blog we're going to create a new object okay first
off I don't have a title but it already added a little unique identifier there but if I do um you know this is a test
okay we'll see now that the ID of the ball of this object is the based on the
title plus some unique identifier right so super powerful okay um you can also
do things such as uh yeah just leave which makes this
actually kind of cool because if you're doing a blog post and you put in there like the ID of someone who's logged in
then you could have like the author in there or you could have the author field you know pretty much filling that in
which is ridiculous you know you can have it based on any field so you know you can actually just use let's say the author is a prop is a proper valid
property here you can do um you know now the ID is going to be based off the title Dash theauthor and then you can
even add a uu ID there now right so then if you wanted to that's cool that's really cool right so super powerful you
can add multiple Fields um in here um I think there's if you do now um it'll add
a timestamp okay so um pretty cool um it's super useful
right so that's an example um on how we can have settings for a particular OB
for a particular field and a lot of these settings are going to be specific to um like this particular autogen
setting is only on an ID field you can add it to other things but it's not going to do anything okay so particular
fields are going to have particular settings in the far future I I plan on having you know nice a nice UI here for
settings but for now um to get going we have this this text box that will be you
know it'll have syntactical requirements um but it should be pretty pretty simple
okay um next up is um let's go to labels
um so like for here in labels um this is a tag based field right and um in
here um I have a property options true and what that's going to do um let's go
into a let's go here okay if we go into uh well
tags has it okay um tags has that property options field and what it does is it it pulls in from all of the
existing uh objects all of the possible values that are have already been used
for tags and and populates the field okay so pretty cool
there um so okay I won't go into all the other uh you know things that you can do uh
but yeah there that's what the a lot of these settings are going to be for
okay um yeah I don't I there yeah I won't go
into anymore I I I can spend a lot of time on some other various options that are kind of cool um I do want to show
here I'll show you an option this probably doesn't make sense for title but I I'm just going to put in in here
um what show you what this can be used for okay um I'm actually going to type in this exact thing that's in here so
we're going to do um option one Comma
just option two option there's more advanced syntax
that we can do here but this is the simplest one okay I'm going to close that and we're going to save and I added
that to title okay um so we're going to go here um and then hopefully this works
okay uh oh it doesn't work all well uh
oh did I oh well it what it will do oh here let's look at author because that's what this does uh one second actually um
so what that should do um it it it provides you a a list while this is a
text box okay um and I can type in whatever I want in here um the ability to to
provide um a list of pre pre selected options like here let's do like Hardy right so
if I start typing Hardy it kind of you know delates the list and I go oh that
was the one I wanted okay so that's what that options thing does now if this
field were set to be a select box um it would be an actual select box and I couldn't type in whatever I wanted I I
could just select one from the list okay so that's essentially what that options field is for okay
um it serves two purposes if the field is a text box we'll get this um and this
UI is browser specific um it is a feature built into the browser so um
this is how it looks like in this browser but it works differently or is it works the same but displays slightly
differently based on the browser the user is in okay um okay so uh I won't go into the
weeds any further on that um um so the last thing that I haven't
talked about in this collection is actually something I implemented last night um and it will be a part of um
beta 7 okay is if we go over here and click um there's a few things here now uh I haven't implemented import but
import will definitely be where we can import let's say a CSV file or various other formats that I plan on support
supporting for import okay so you can import data into this collection
um but what I did Implement last night was something called the factory now um I talked about um the
factory a little bit when we were looking at schemas and what is that okay so um I
think the factory is going to be a super powerful way to generate um artificial
data within our um websites okay this is going to be amazing for just quickly
getting up and running and having data okay um fun tidbit all the data that we
see here it was all generated by the factory okay now how does it know what
type of data to add okay and uh to do that we're going
to go back into the schema okay and what we'll notice is uh if we
go into each of these fields
um there is a factory field okay and that factory is the setting of um what
type of data will be added to that field when the factory runs okay um and there is uh if we go
let's go back to the uh Factory page right if we go to the factory docs okay
there's a link here for the factory docs there's all kinds of stuff that we can add into our schema word word sentences
par paragraphs text there's images okay so we can generate images um we can
generate actual uh in that blog I was doing like an image shapes uh but you can actually bring in actual images of
let's say people or stuff like that I have an example of that we'll see that in a little bit um you can import tags
um names so a first name you can even do something like first name male first name female okay so you can do all kinds
of stuff various address and phone number information uh some company stuff um so
yeah is there's a lot of really useful stuff in here it's it is a lot of it is kind of like lur some type of data okay
but um it's really cool and there's actually more than this um I'm this is just a draft of the of the docs there's
all kinds of more stuff that we can do here okay so let's go back to the
factory so um in the factory um I can say how many objects that I want to create and all I have to do is click on
this create objects button and I've now created eight new objects in my
blog okay really cool and it was created by the factory settings set inside the
schema for that particular collection now eventually uh I do I think it would
be nice to be able to Define custom Factory rules right here um eventually I
I do would like to have that but for right now I just wanted the ability to quickly create objects for our uh
collection and if we go back to our blog um if you notice now there were 31 before now
there's 39 okay um so yeah really really cool and it created these new Unique Images
um as well as you know all the data for the blog posts pretty cool okay so Factory again is a super
useful way it could be uh even for simple things like colors um pretty much
all the color most of the colors that you see here were all created by by the
factory okay just randomly created objects with a
color okay pretty cool um let's let's go
through some of just kind of uh navigate through some of these here's a custom collection I created that just had an ID
an email and a color Okay um that was a something I created that didn't do
anything uh so we here we have dates emails um here's a feed uh here
uh oh if we look in this just to kind of see here's another type of image that you can create um it's just you know an
image with a word um some sort of lur some word in it I'm just kind of show you
that um I wanted to show you galleries um don't let the Joe don't let the
voting machine people buy these
nice yeah the the factory right just generate votes on the Fly
um the gallery um what it does is it it will show you the thumbnail of the first
image in the gallery and it'll show you a a count of how many images are in the gallery right so this particular one
this gallery has 21 images if I click on it there we see there's 21 images inside this
Gallery okay pretty cool any questions so
far okay we'll dive on um I guess I'll I'll finish um the rest of this admin
area here's just some docks all these docks are very rough um they have you
know information in there but they're not they're not up to Snuff yet okay so
there again there is a lot of stuff in here um you can prise through and maybe get some hints and tips especially like
the the factory stuff okay um but yeah um there there's a lot of stuff in here
some of it works oops that doesn't even work at all oh shoot I broke that I'll have to make sure I fix that darn it um
okay cool good thing I clicked on that okay um settings uh or utilities
this will be uh a place none of these actually work yet but these are just ideas for utilities um so clearing
caches batching generation of images um a server Checker um and then a log
analyzer and then this will be a place for uh settings okay and again that doesn't have anything yet
either okay all right so on all intense purposes that is a complete overview of
the new admin dashboard again a complete Game Cher um for yeah building your site
because you no longer have to spend time to generate an admin area Um this can get you up and running super
quick what I'm really excited about for this is um a lot of the times when we're
building sites like we do like for me in our production um we build sites uh we
design them and then we go to build them and we don't have content to fill in
that area so what's really nice about this is this gives us the ability to one get content with Factory build out a
whole front end site without even worrying about the back end um and then you know you could you could go to
launch on a site real quickly by focusing on the front end and then build
the custom back end for your customer as needed because with with this Auto admin
we have all the control we need on that back end um instantly and then for the
custom admin which I I still like building custom admins for my customers giving them control to change what they
need to but with this it will allow me to have the tools all the switches on my
end automatically and then I could build something simple and custom for the customer after you know and I think this
is massive for productivity yep couple questions that I saw in the
chat so uh Scott you asked how does this relate to permalink I assume you're talking about the ID field okay um
basically it's the same okay so instead of permalink I called it ID okay so yeah
um the ID is the permal link now uh or the permal link is the ID field I should
say um so yeah same thing um I just felt ID was a more Universal term um for uh
since I was trying to generalize a lot of this vocabulary okay Jo Jo productivity wise M how hard would would
or easy would it be to once you've build out your your admin
area how hard would it be to clone that and then remove stuff that you don't want the client screwing
with uh oh you mean uh like cloning this the dashboard yeah
um so all of that is I mean that isn't all built it's all like dynamically
built on the fly so there is no cloning it and removing stuff um now I I do plan
on I don't have any there's zero authentication right now okay um I do plan on adding um traditional you you
know username and password authentication and then on top of that I will have some sort of permissioning
system so you can you can give your client if you wanted to give them access to this you can give them access but
then turn off certain things right um I
I'm a little scared on what can of worms that's going to be because some people are going to want how fine grain do I go
um so yeah there will be probably limitations on that I don't want to you know be able to control every UI
component but um yeah I do want to give the ability to turn on and off certain
functionality like maybe they're not allowed to delete things or you know they're not allowed to go into the schema at all right um you know stuff
like that I think is super easy um to to to do um so yeah we're going to start
with something like that so you can have multiple users and at least like two levels of permission you know a super
user that gets everything and then a restricted access that gets not everything okay um whatever and they'll
be that'll be configurable um to you as the super admin um does that kind of answer your
question yeah kind of I'm just trying to side I mean this Auto autogenerated
dashboard thing is great for us yes but it it'd be a nightmare to give to a client I I can understand that yeah I
can understand um so yeah um that's why I I felt it was important to um still
allow us to create the custom admin area to give them just the ferin controls
that they that we want them to have right um and I I I do want to have build
some tools to make it that easier as well um but yeah um yeah that's kind of
what I was getting at I mean it's is there can we take these chunks of of this thing and put them
into um something that's more client usamp you know I mean my clients aren't
going to my clients say I have current clients right now who have 10 blogs right
MH if I give them something that says Okay add a collection they're gonna be go what the you know I
just want to add a blog post exactly yeah 100% yep that's why Scott I said
like it's still going to make sense to build something simple for those customers and it's not going to take a
long time to build out a a Blog management you know dashboard for those
customers right because like also there's a couple things you need to think about too is that based because
this is autogenerated you know when you go to the text collection for all the text fields that you have on your site
they're going to be in order of ID name so if you have you know a whole bunch of
text fields on the homepage you kind of want to name them home Dash something so
that you can see where you're editing because there's not going in the admin side you're not going to the homepage to
edit a text field you've got a list of text Fields so really it's still in your best interest to make some sort of small
admin for your customer but this now allows us to make a very specific admin
for that customer and still give us the power to edit everything instantly yeah
um so all of the little individual like components within the dashboard let's say like um I haven't created a stack
for it yet but that table right super nice table I really love it um that table will just be a stack you can drag
on and then you can say point to that to this collection and boom you just get that right
um so all of the individual components of um the dashboard will be available to
you um on your custom admin area so that you can then you know build it out and
hopefully build it relatively easy so yeah um and as we build it I'm
sure we can come up with better ideas you know I I'm always up for improving and and adding new features and stuff so
um yeah I'm good with that um I didn't one one other thing in the chat Paul uh this is recorded um again I'm using a
new service not sure what the recording output is going to be like but uh yeah I will make sure it's available okay okay
Jo one question yes uh is it possible to duplicate the last entry if I create a
block and uh I like to maybe only change one field then it would be nice to have
a button say duplicate this last um thing and and then only change one
one position yes I do plan on having a duplicate or a clone button um so you
can you can quickly duplicate a a object or a blog post or whatever it is um and
yeah then you at that point it'll duplicate all the data and then you can just modify whatever you need and yeah
then we're good to go um so yes I do I don't have that as a feature yet but it is on the road map okay
um I even built all all the apis for it are built I just haven't built any of the UI for it so um yeah we should be
good um oh one other thing here let me share my screen again um that I uh as
Josh and Scott were talking um I I forgot to go over I did um oops not schemas
collections I if you noticed there was a uh a set of field when we edited a
collection let's go to one that doesn't have it let's go to like products or something like that
okay there's something down here called custom uh object form overrides okay um
and this this is actually super useful super powerful okay and I I built this
primarily for the text collection okay um because there are there many
different ways that we might want to edit text now by default when I when I edit
uh text let's go to like about me okay this is going to be the default right uh
we just get a a oh this is style text okay but um we just have a text box but
what if I want other in in total CS there's there were all kinds of ways of editing text we could have had a select
box we could had a a single line uh you know text input we had a text area we
had style text right there's all kinds of ways of adding text okay um and here
if we go new object this is actually the default view it's just a simple text area Okay um but what if I wanted again
I wanted to customize when my client went in here and he went into my select
instead of a text area I only want him to be able to select one of these options right or you know if we go back
and I go into um here's a password oh well that that one apparently I did wrong uh let's go into well about me as
we saw had the uh style text right and if I go into my time this has a Time
picker right so as you see I can customize these forms on a very specific
level okay and that is uh where we go to edit collection okay and in here as you
see if we go here I can select what my default field is going to be the default as we saw is
text area I can change that if I want the default to be style text or just a simple text input right there's
different ways of you know whatever you want okay you can supply all your your
default labels and placeholders and text values okay but if we go down here we'll
notice that I have something called these object form overrides and what these are is they are
specific overrides for a very for a specific object so for the object my
select I want the text field to be a select box and I want the form label
placeholder and help to be these things so this allows us to do very
specific overrides for very specific objects very granular but it it it makes
it nice so that when our customer logs in we give them the exact interface that they need to input the data that they
need for that particular thing okay so pretty cool any questions
on that yes Joe does that really uh create
issues with the with the factory or is that going to talk to it properly um
well so for this is a very I'm not sure Factory really makes sense something in
like a text collection because textt is like every bit of text is going to be something different right so um yeah the
factory is all about bulk creating items uh or or objects that
conform to a particular Rule and something like text I don't know uh you
could do it right and but uh how would you you want all your bits of text to be
something different right and you probably want them to be a very specific ID as well um so
yeah I mean that doesn't really work the the factory only works with whatever your default setup
is okay now you eventually when I when I create these specific ones you could be
like okay I want to create three that have let's say uh you put in a mail name
or you know whatever that thing is and you can say create and then you can do okay now I want to create 10 of them that is uh three paragraphs and you can
say create right So eventually the factory will be more Flex where maybe it's useful in a text collection um but
yeah hopefully that answers your question sorry Scott what were we going to say um back to the style text area
M do do we have control of what tools are in there uh we will um right now I
haven't I haven't built right now it's just hardcoded um eventually um I will have probably uh
you can set it at a default level but then also if we go into edit collection and go into style text um this you can
you you'll will have the ability to generate uh settings for a very specific
whatever you want right in here okay so there'll be settings for
this where you can have you know style text and then you can like list out all the various toolbar items that you want
so you'll be able to do that here um and then on the back level we'll have settings for all that
yeah so they can add a link they can add it exactly yep yep yeah so uh like for
example I haven't I haven't even done the apis for the image and file upload in style text they don't work yet um so
yeah right now the styl text is it it's just the simple whatever it is I think it's bold italic and something link I
don't remember what it was but yeah um I just haven't had time to work on that part
yet cool okay um let's start jumping into
Stacks right so this is the demo file um that uh comes with total CS3 um I I try
to remember to put it in the whenever I ship a new beta a new version of this file that you know conforms to whatever
is new in that particular beta okay um I don't think anything's changed in this
since I last released it okay um I guess since we've we've been
talking so much about the admin stuff um let's let's just finish that topic and
go over the admin area uh for this particular project okay um I'm going to bring up this actual project um it's
published here okay um so here um is you know this
project file and if I go to the admin page um I have uh you know a custom
admin area um this edits a very particular um you know text object this
you know edits another text object this is a very this is a specific image right
so again um this is very much like what we're used to now
okay um if I have a button here for admin dashboard if you click on that this is now the admin dashboard for this
particular website right so I can go in here and I can see all of these uh you
know collections um you know if I go into Bill uh going to blog going into demo collection you know these are all
um here's here's an example of the this image was created by the factory um and it's an actual image right so not all
images that are created by the factory are like some abstract thing you can't have it actually generate uh useful
actual pH photographs okay um and you you can have them color or black and white you can
actually specify if you want all black and white photos and stuff like that um pretty pretty cool okay so again this is
the actual uh admin area and like for example um if I were to go here let's
um so like for example uh this particular text edit right here I
thought it would be fun to go in and if we go into the text collection okay well
there it is it's just called header right so again I can edit it here in the dashboard or I've created this custom
admin page where I have the same pretty much the same interface
okay um galleries uh they've been completely redone something I I haven't gone over yet um is the immense work
that was done for images okay um you guys can uh big give a huge thanks for
Wolf for being the inspiration behind a lot of the features that I've added um
to the image stuff here okay um and what let's go over it now okay so um as you
see this uh has a very similar interface to what we already have in total cms1 um
but there's a lot of extra stuff here um if we go in here and click on edit image
info okay what we'll see here is that we now have a lot of information that we
could edit about an image in total cms1 you basically you you can store an ALT tag that was it
okay now we can we can mark an image as featured um we can set the alt tag we can we can define a link for an image we
can we can give tags to an image um we can define a focal point I'm going to
come back to that um all the exif information about an image this particular one didn't have
any but if there were exif information it would have been put extracted from the image when he uploaded and displayed
here and all of that data is editable so you can if you wanted to edit that information uh within the CMS you can
okay um now it while I do have to say that this information is edited in in
the CMS if you change the information here it doesn't update the information on the actual image
okay um GPS so a lot of exf information uh another thing that does is it analyzes the image and puts out a color
palette that it found based on the image okay and what's cool kind of cool is you can should drag and drop these around
and um why is this useful well let's say um in in your
design you um you upload an image and you want to pull the first color from
the color palette of an image and use it as a background image or I'm sorry a background color for something okay so
you can do that and you can actually click on these and you can modify these colors or you can you can you know move
them around so if I wanted to you know use the first color of an image but I wanted to make sure you know the CMS
said it you know I want to use this color but the CMS put this last I can just drag that up to the front and now this color from that image is used um
where I've wherever I've configured it uh on my page okay and then there's just
some readon metadata about you know the size the width and height of the image the name of the file upload date so on
and so forth okay um now I skipped over focal
point so this is a a a really amazing Fe teacher
okay um total CMS which we'll see in a little
bit can dynamically crop and you know crop images um and one feature that was
really important to uh photographer such as wolf is you know when you're taking
um photographs sometimes um you know when you're trying to batch crop or
intelligently crop images um it's hard because let's say uh let's say in total
cms1 uh it did do intelligent cropping it can create a square thumbnail but you
always had to crop every image based off the same point whether what it was the the right of the image or the top of the
image or the the default was the middle of the image now this particular image that
we're looking here the middle probably makes perfect sense because you know the the focal point of this image is right
here it's this van okay but I can change that now I can use these sliders to
change the IM to change that focal point I can also just drag and drop this and as you see those sliders are dynamically
changing and I can Define exactly where I want my focal point of the image to be
that way when I uh batch create um you know thumbnails Square thumbnails I can
crop it based on the focal point that I've defined in the CMS and I will get
the exact cropped thumbnail that I need for every single image
that's really really powerful and I'm really happy with this
UI I wanted to nail this UI and I think I've done a great job with that in my
personal opinion okay so that is again all the information about an
image now there's even more um so in here we can click on image URL oh sorry
you got a question yeah is that is this interface avail able from the auto admin when you're editing images there yes
yeah all this is is in the auto if we go to here if I go to Gallery I click on
this I click on that okay perfect awesome yeah yeah it's all exactly the same perfect sorry I didn't see that
part yep yeah I skipped over I I wanted to do that here okay
um okay so uh image Builder okay so um
as you're probably aware total cms1 creates uh two thumbnails when you
upload an image and that's an important statement there it creates thumbnails when you
upload the image that is the only time it does it let's say you've uploaded a 100
images to a gallery and um you know you've defined total CMS to create
thumbnails at 200 pixels now let's say a year or 18 months
later um you're like I want all these thumbnails to be 400 pixels well guess
what you are out of Lux sir um because you now have if you want them to be 400
pixels you'd have to re-upload every single image um all over
again okay and uh yeah that's not really viable okay so um in total CMS
3 um you upload an image it stores the original image
and what we do is you can create thumbnails on the fly whenever you want
and this allows you to customize that interface or or to see the options that
are available to us okay so for example let's say uh this
particular image I wanted to create a um 300 pixel by 300 pixel um and let's crop
it from the full Point okay and uh yeah preview there we
go now remember I changed the focal point of this image uh a few minutes ago
to be in up up in this corner and that's exactly what it did right I didn't plan
that that was a a happy accident okay but had I had I gone in let's go ahead
and uh I'm going to change this focal point to be uh right here in the middle
okay and we're going to go here again and uh let's preview that image again voila so now
um now that F crop focal point was based off the focal point that I saved in the
CMS pretty cool now something um a behavior that I've done and I've did
this on purpose if you noticed um when you close when you edit this information and close that light
box that actually that information gets autosaved to the CMS
okay um I did that because um there's a lot of data in here and a lot of times I
think people will edit the information close and then they'll forget to maybe click on a save button okay um and I
didn't want all of your changes to be lost okay um so um the data in this uh
light box does get autosaved when you click out okay um so any go back to this Builder
yes um better you have a warning
information all your information SC okay uh yeah I I I do have some notes
for myself to rethink that um but that is the current behavior um I I am open
to rethinking that behavior though okay um I forget I look my notes there were there were other Behavior there were
other reasons why I did that I can't remember off top of my head but um yeah open to rethinking that maybe
add a cancel button uh the the problem with the cancel button is um it's a can of worms
that if you click cancel you expect all of the all the data that you entered in here to revert to what it used to be and
so uh that's a cancel button sounds easy but then I'd have to build an entire thing where it remembers everything that
it used to have um store all of what it used to be so that when you canceled I
reverted it back to what it was right so um cancel buttons sound simple um and I
do like the idea um but the implementation of it uh can be complex
okay um yeah okay um so right get getting back to this okay um yeah pretty
cool there's all kinds of stuff we can do we we can adjust the quality pixel density uh the format so if you wanted a
um PNG version of this image or a progressive jpeg or a webp you can
easily get um a webp version of that image that is now a webp version of the
image you also notice here um it's 33 kilobytes 300 and the size pretty cool
okay um there's also a little a little documentation on what all these fit crop options are okay so uh when you click on
this you get a bunch of options okay um and there's some and the reason you can actually click into here
is because you can do something like uh crop XY where you type in the actual
position that you want to crop it by okay so for example if I did um crop Das
20-20 okay um let's see what that does there it does 20% by 20% so it it you
know goes up to the top Corner um so you can type in your own thing um and the documentation for all that is right in
there we can do a bunch of effects so you can sharpen contrast uh adjust the brightness pixelate something blur
something um add a black and white filter or a CPA filter um you can add backgrounds and
borders and probably the most important feature here is the ability to add
watermarks okay so um in here you can choose um a watermark there is a special
uh uh Gallery if you call it Watermark um any uh image that you upload that
will be supported by uh the image UI here um and display that image as a
watermark okay so if I go ahead and let's say this one I want my waterm mark to be um let's say 150 oops not 450 150
by 150 um and let's preview there we go it's that that is
now a watermark on the image um it is it's not overlaid it's embedded into the
image okay super super cool here let's go ahead and check out this one and
we'll fit that one okay so there is another type of water mark okay you can also adjust the positioning here right
so you can do like if I want it in the center okay maybe make that a little bit uh uh 200 by 2
100 and preview voila right so there is a water Mark it's right there in the
middle you can also do uh O Alpha so if I want it to be like 50%
there we go super cool very powerful right now um this
little copy macro button will be super useful because if I want to generate this exact image or a version of this
image this macro is exactly what I need so um if I'm using a warehouse
image um and I want to put in this exact URL inside of a t stack settings guess
what I copy this I copy this macro paste it into my warehouse URL setting or
whatever and you're done pretty cool okay and if you want to learn this
syntax it it is there is an organization to it I've done a lot of different settings in here so it's quite long
right but all you have to do here is copy that macro paste it wherever you want this particular image to be and
you're done super powerful there's also a download button so you can actually down
download that image as well so there we go there is and you see it it downloaded it it is a webp there is that particular
image that I just got dynamically generated by total CS you know how badass that is is like
if you're if I've uploaded like all these original images like the full quality images and I'm like oh man I'm
working on like a social media post or something I could literally just go in there create the photo I want download
it and it's it's like a it's a whole converter for you it's ulous yeah
totally um something that I um okay so
while this is powerful um it is also dangerous right
and why do I say it's dangerous um because let's say you upload let's let's take an extreme use case you've uploaded
a thousand uh 2 megabyte images into total cms3 okay and um you go on your web page
and you're like okay I need uh to create uh 200 pixel uh thumbnails
for all 1s of these images do it now right your web server is going to puke
okay um because you you've now your web server probably has like 50 megabytes of
memory or something like that right and you've just requested it to uh generate you know a thousand thumbnails
on the fly right now okay so how am I going to solve that okay because it is a
problem okay um I haven't I haven't built it yet but if you noticed in one
of these in the in the admin dashboard uh there was a utility called image Batcher okay and uh what this will be is
you'll be able to it'll have a similar interface to this okay and you'll be
able to let's say um generate uh this version of this image for all images in
this Gallery okay so you can kind of you know pre-build those images out and me
what it will do is it'll it'll create one image at a time so that your server is not just completely puking okay um so
yeah it'll be an image Batcher um again I haven't built it yet but I think it's going to solve that particular problem
or it's going to make that particular problem much easier to handle okay any
probably want to do this yes uh it's still possible to limit the upload size
for for use this yes it is uh yep that it is possible um I'll show that in the
stacks um I don't have that uh that will probably be something I add to you know
remember those special settings things inside the when you create it it'll I'll probably add it in there as well if you want to use the auto admin area but
there are all already settings here um in the stacks which we'll look at okay
okay okay cool um so the admin area um went off on a little boond doggle as you
see here's that gallery that has my watermarks um here is the you know the normal gallery and an image okay
um so as we see here we have the ability to create again your own custom admin
area that does exactly what you want um I won't dive into every single one of these here's an example of a feed okay
and you click on it and it opens the the form inside of a light box okay uh if we
go into blog um this is kind of a traditional blog layout uh where we have
list of all of our posts I can click on it and I can edit that blog post
right here is the admin for a custom collection here's all of my custom objects I can click on it and here's the
form to edit that particular custom object right um this is uh the ability
if you wanted someone let's say to to manage collections uh again this is a
view where I can see all of my collections I can click on it and I can edit the actual collection again all
this is in my own custom admin
area and same thing for schema I can view I I can list out all my schemas uh
and then I can click on it and there's my schema form so you you really can um
you know give someone just the access they particularly need with something
like um yeah the custom admin area and then this link to dashboard just takes
you oh that's another I should note um as you see this is the admin dashboard but it is embedded within my site okay
so I you know that is an option okay let's look at the stacks
really quick okay so let's look at the stacks for the admin area um admin link this just links out
to the admin dashboard um again here's just a text form let's look at this let's look let's look at the
organization of the stacks actually since we're just kind of getting into the stacks uh thing um so I I think I
like the how I'm organizing the stacks currently um here we have just kind of a generic total CMS Stacks um so you're
familiar with uh CMS core that's going to be something that goes on every page now not just content Pages it will go on
every page okay even admin Pages um process macros um x-ray data we'll go
with that in a little bit when we start looking at content stuff um so here is some admin specific Stacks so here we
have the admin core okay which again is going to be something that you add to the admin pages
okay the admin embed this is going to be um where we want to embed the admin
dashboard so here is that page where I embedded that admin dashboard I just add that you put in a height that you want
it to be and boom it's there okay the admin link is is the link um I'm not
going to go through these one by one um we'll go through let's see uh total forms this is where you're going
to add stuff like here's a text form here's a style text form okay here's an image form um uh wolf was asking a
little bit ago about validation rules um so you can you can validate the uh similarly to Total cs1 we can uh limit
by size height width mode so is it a landscape a portrait or a square image
um aspect ratios um count so you can also limit the count so let's say you only wanted to allow someone to upload
10 images to a particular Gallery you can limit that count as well um you can
limit by type uh this kind of an advanced feature where you can uh limit Something by A MIM type okay doesn't
really make sense for um images probably I kind of share these settings with uh like I I plan on sharing it with
something like um Depot so you can actually like you know limit by a zip file and stuff like that and you can
also limit it by the name so um you know you want to make sure that someone you
know only uploads something named this maybe okay um definitely an edge case but an extra spot for a button so we
thought of an extra use case for validation rules right there we go um so yeah lots
of validation rules you can use as many as them you can use one of them or all of them it's up to
you okay I'm so excited about the count one because we've been wanting an an
image um H so that's the the basic admin page
uh you you can go through uh this project file a lot of this is going to be similar to what we're going to look at the content side so here's the
example of the blog admin I'm using something called uh a loop blog stack um
and a special stack called admin list that generates that kind of that scrolling um container that each uh you
know um every other row is like a different color right um so that's admin
list stack and then it just this blog just generates objects for me okay um
and then we even have the ability to create factories right here inside here so we you have the ability to generate
five blog posts straight with this Factory stack okay and actually in here I give the ability to Define custom
rules okay so you can actually do that um here um I plan on having this
particular functionality um when I add uh you know to the admin dashboard as well okay but you already have that in
the custom admin area which is kind of
cool okay uh any questions on the admin Stacks I again I'm not going to dive
into every single implementation here um if you guys have the project file I think most of you can kind of understand
what's going on here I try to keep it pretty darn simple
okay with that let's uh migrate into the content of the website Okay so we've
spent uh man hour and a half already ju purely talking about the admin side and
I haven't talked about hardly at all the content side of things um and I think if you've used
twig this is going to be really easy okay I I think we've knocked it out of
the park I think it's going to be easy for even new users um especially if you
use twig this is going to be completely seamless for you so here is the content page I have a
header with that bit of text um a paragraph of text which is a different text area um here's my image with the
watermark and then here's my gallery um with thumbnails and when I click on it I
get a full scale you know gallery that I can then navigate through and do all kinds of
stuff with thumbnails down at the bottom right which is kind of cool if you notice the gallery it doesn't actually
load the images until you click them um so it's very performant um I like it a
lot okay let's look at this particular
page um so there is let's look at the content
Stacks so we have a bunch of content Stacks here okay um and we have a text
stack okay and uh here we have an instance of that text stack here and here I have I
pretty much give it an object ID this is the ID of my text and as we saw in the back end just like total teams1 you just
need to match the IDS okay so we have header on the admin
side I add header as well okay and magically uh here I we can Define I want
this to be an H3 and we're done what's kind of cool about these Stacks is by default I have preview macro turned on
and what this does is it shows you if you wanted to add this to a your own thirdparty stack and not use the total
Semus content Stacks this is the macro you would use to inject that text so
let's do that really quick question for you Joe because that's actually one of the comments Scott just put in the chat
a little bit ago is there going to be a way to copy that macro from the auto admin area for like Tex Stacks maybe
there you could have a an ability to copy that macro from the auto admin
dashboard uh so you yeah if you're going to like
the text right not the schema go into the actual sorry Collections and you go
into the text and you're looking at that text maybe there's a if you click on that maybe there's a copy macro button
or maybe in that in that column there like table that you'll have a copy macro
button H I'll think about that
um I'll think about
it it's kind of a good idea uh it's it's it's also a really hard idea um because
everything is so generic back here um that let's say for like if this is a
blog like how do how do I do a macro for for that no no I no it'd be very like
this would be very like text specific oh okay like you already have it for image so maybe you just have one for the text
objects I mean for blog obviously that doesn't make sense but thought about creating here like a macro Builder um
yeah that'd be cool um uh that that thought has crossed my mind uh like I do
actually have a uh I I have a macro Builder stack here
um that helps you build a macro um and I was thinking of taking this and doing
that in the admin area um I think that even having this macro Builder sack
actually I didn't realize there was that that's actually pretty cool okay uh yeah uh here let let me let me I'll look at
the macro builder in a second we'll go over that but let me let me show you how we could take this and inject it into a
uh a header stack okay so let's say I have a a header stack here and I want to
use this because maybe I want to leverage some of the other Foundation 6 features right
um so and the total CMS Stacks don't have all of those features right so um
let's do that right so essentially all I need to do here is just take that macro so it starts with two curly braces and
then I do cms. text uh by default the text um function
in in here looks at the text collection okay um and then we're just going to
give it the CMS ID so in quotes we do
that there we go so now that macro uh will resolve the text and inject it into
this header stack okay and uh yeah if I preview
that there we go right now this this uh enters a
another um thing that we need to talk about if you no this uh this is my
project file for um My Demo total CMS website and uh if we look at my do demo
right we'll notice that um this and preview look very
different okay um total cms1 the current version um in preview what it did is it
it actually queried um your website for the current active CMS
data and um it displayed it inside preview super cool feature okay um it
had a lot of drawbacks that um people probably didn't even realize that it was
doing it and they were I'll be honest they were probably maybe blaming rapid weaver or blaming Stacks or why is
everything so slow because I want to previe preview my page that has like a
hundred different CMS elements on it and um you'd have to think uh so what
total CS did before is for every single item on the page well now it it will the
current version that you guys uh you know version one for every single one of these it would it would query the server
get the data build the HTML and we go down to the next one query the server get the HTML generate the data go and
and so on and so forth and you can imagine if if you're Chris Powers and you have 200 toggles on the page wow
that is a slow preview process right um and that's probably why a lot
of people were like the hell with preview I'm just going to publish right um if if we notice the the preview
process here was very fast okay and the reason for that is um
total CMS 3 it's its own little Standalone instance within
preview okay so if I go to the admin area here in preview and I go um hello
everyone okay and um I save that okay and I go back to my content
guess what okay so um the data within preview is its own managed
data okay
um I have some hope maybe some plans to eventually try to create some sort of
service that can maybe get the data from your server but I don't know that seems
crazy complex and um I'm not hor I don't horribly hate
having preview have its own data okay um is it possible that we can
like like it's almost as like as if you're running map right but without running map is it possible easily to
then siphon the off and move it to our our uh online yes um so um in Rapid
Weaver and this will be different in Stax Pro um Stacks pro has this ability
as well I haven't by the way I haven't tested total CS 3 at all in Stacks Pro um I I don't want to do it to that yet
um Foundation 6 is working right but I don't want to go down that rapid hole yet okay um okay so um in Rapid Weaver
you can go View and you can do to web server logs
it's kind of a convoluted way to get to it and then inside web server logs there's a button called Open document
and you can click on Open document it opens a folder buried way the heck
inside your your thing okay now um this is where preview generates all of your
stuff okay and I don't want to store it here because when we close this document
everything's gone okay however uh if we go up a few dire dories to this
particular directory where we see all kinds of stuff we scroll down to the bottom
here okay we'll notice that there's some TCMS data folders and it creates one for
each of your projects so here is my TCMS data folder um for my
preview okay um now this data is
ultimately stored in inside uh your ATT temp
directory okay inside your user folder and in theory if if you use any
of like clean my Mac and all that stuff um this data is a target uh because
sometimes those those apps will clean out these temporary folders okay um so
this data isn't guaranteed to always be here um and the the OS in some
circumstances might clean it up um I've been using this for about 6 months now now uh and it my data hasn't been
removed once automatically okay um so there is that so there is data in here I
can then get this data and I can download data from my server and plop it in here and it will work in preview okay
very um hopefully uh my go I've talked to Isaiah hopefully in inside Stacks Pro uh
will be able to define a folder so let's say you can create add something to your actual you know a folder in let's say
your home folder that then you can say like okay store the preview data here so it's a a you know a place where you can
Define where the data is um instead of in buried in some sort of temp folder
okay okay um so there we go there's a little Peak behind the covers um of how
that kind of works yeah I couldn't figure out how to get rid of that data in a project because it just kept coming
up and of course I couldn't figure out how to get rid of it ah okay um so yeah
uh yeah it is stored there if you wanted to Nuke it or if you want you know you could use the admin interface to uh to
deleted as well now um one bad thing about this
okay and it's this kind of I I put a lot of work on obviously into that auto admin
area and um it saddens me that uh it it actually
doesn't work in preview okay okay um if I preview
preview this in the browser if I click on that
uh my hopes were up I clicked on it looks like it works um but if you go it
just it just doesn't work okay um so that is highly
unfortunate um I haven't given up all hope on it um reason Tech small
technical thing it has to do with uh preview is running a PHP server it is
just it's meant for like testing purposes and some very lightweight previewing of your PHP applications okay
um this admin dashboard uses some very much more advanced routing um URL
routing and whatnot and the built-in PHP server just does not do that um sadly
um again I have I haven't given up on it but yeah as of right now the admin
dashboard will not work um with preview okay so if you want to
administer data within preview um you have to do your own custom admin
area I'm sorry again I'm working on it okay you know what though I don't think that's such a bad a bad thing
Joe I I really don't think it's the end of the world yep I have to be honest like like so So This Server right that
I'm using right here or well not this one this is the preview um but the demo
okay um I have this running uh locally in m works like a dream um and
like publishing locally is like insanely fast like you know even um I will go on
a a small TI raade um you will notice that total CS 3 is
Big okay um I'm going to go ahead and uh file uh we're just going to republish
all files on this project oh I just got to go ahead
and I use this on my laptop and my desktop and whenever I publish on my laptop it kind of severs this connection
on my desktop so uh yeah that's the folder so click
choose just thinking about it thinking about it and thinking about
it blah okay if you noticed that that was 5,000 files
okay um total CS 3 is Big um and uh yeah
uh I as of right now uh you know I I like the the ability to just publish um
I may come up with it in the future um if it becomes too much of a pain to come
up with some sort of different installation process for total CMS um so that you don't have to publish
every single time okay um I'm cool with experimenting with ideas around that
because I know how I don't maybe Stacks Pro hoping Stacks Pro um is is is better
with that um I I uh again I haven't used total cms3 but
um yeah maybe that will solve all our problems but I I may I am willing uh to
explore other options in the future um if we see that need okay but with that
said um exporting locally and playing with this in map super fast so most
times I will I'll make the change I just republish all files or rep you know publish locally and then preview you
know open up the map site in my browser and it works like a dream okay even the
the admin dashboard obviously okay um so there we go um I forget what
I was originally talking about before we were talking about publishing uh oh yeah local versus yeah using M to test
locally because like the admin dashboard doesn't work in preview okay um another
thing um total cms3 requires PHP 8.2 or
above and uh if you're still using rapid Weaver
8.9 um that uses PHP
7.4 so you have two options um you can either uh build out your site
and then always publish locally um you know to something like M that
will run a a a version of PHP 8 um and you're fine uh if you're using rap 9 uh you're
good because that actually has PHP 8.2 um as an option um I think it's off
by default uh you have to change it in the app preferences but you can change the default to be PHP 8 and you're
you're you're good there um another option is um I I am
running a modified version of of um rap Weaver 8 uh9 uh that makes
preview still work um if you're in that particular boat feel free to reach out
and um I'm happy to coach you through it okay um so yeah um there we
are that works because you help me yep exactly so um yep that's an unfortunate
thing but yep uh there we are okay all back to uh
content uh so we talked about um how to inject with these macros um I do like
the macro syntax uh if we look at the docs I think I have I think I think I
have them all documented
uh oh that form documentation is completely wrong now oh uh feel okay
here uh oh that's form. Fields nope it's not what I
want here okay the total CS content okay um here's a lot of the uh things that we
can do here so uh these are the probably the ones that we're going to be using the most okay um we have text style text
uh well Depot doesn't even exist yet okay um data is kind of like CMS data to
get just get raw data and then there's going to be image path okay um the image
path stuff while while you can learn the syntax that image Builder I nailed that okay with that copy macro button use
that um but yeah uh I will have better documentation on what all the various
options are for these okay um I'll quickly do an example here so like for
text okay actually I just realized that the syntax in this Doc is the old syntax
okay um but so I do cms. text um and actually
here instead of instead of doing it in here I'm going to uh let's do it in vs
code okay um
um so here uh is my macro okay and uh by default it's going to look um at the
text collection for an object called header okay but um as we know I can
create different collections if I want okay called different things okay um and
so um if we look inside uh here oh let's go into yeah I'm in the
right place right so if I go to text it's going to go to the text collection and uh we'll notice that this collection
is called text and the property that I'm getting this data from is also called
text okay well guess what um this essentially uh is a shorthand for doing
something like this
okay so um now it does I I put this on multiple lines to make it a little bit
easier to read okay you can have it all in one line as well okay um but what
this does is uh so this is a very expanded syntax where let's say I create
I have a different collection let's say I want wanted to get um uh the title uh well uh let's say uh
my um new post let's say I I get a new blog post and then I want the collection
to be from blog and I want the property to be from title okay or some something like that okay um so as you see you can
use this in a lot of different ways okay um there's actually other
there's better ways to do what I just did here I just wanted to show you an extreme case Okay
um but let's say uh let's say I created a a a different text collection okay for
some reason let's say you wanted to create a a new text collection right you
can easily do that and you can omit property right so you can be like I want to get the header object from uh the
collection new text now you have to make sure that the property is also text if it is you can just omit that because
it's the default right so you can do something power you know pretty powerful like that okay um again this is getting
a little Advanced but I just want to give you guys a sneak peek on um an an expanded version of that
syntax okay and how power most of the time you're just going to be doing stuff like
this right super simple all right um so that's the text
uh oh we want to look at the macro Builder really quick quick since since we were talking about macros uh we'll go over the macro
Builder and here you can Define the data type that you want to get okay so um you
know if you wanted to get a date um or and then here you can put in your object ID if you notice that this
macro changed okay once I selected date um it
what's cool here is that uh you'll notice that not only do I get the date but we have the ability to have a format
okay so you could Define the format of your date as well which is super super great now in this Builder let's say you
want to provide a custom uh collection in property you can do that here oh and
I apparently didn't update the Builder I need to fix that okay that's my bad that
didn't work wonder if it works if I go back to text nope that's my bad darn it
okay well there's a bug for me um
and we're not going to go over the used variable stuff right here okay but um hopefully you'll see uh this is just a
great way of kind of building a macro if we go to like color there's some really cool stuff that we could do here so this
will get the color it'll um transform it into an RGB value and actually make it
an 80% opacity okay which is super cool okay so
all the colors stored in the CMS are stored as solid colors and then you can
easily adjust the opacity on the Fly and there's actually other things you can do on the fly with colors uh we probably
won't go into that today uh since we've we're already hitting two hours okay but
um yeah uh we are you can adjust the Hue
and you can adjust the lightness you can do all you can modify colors on the fly with with a macro which is really cool
there's a lot of cool stuff with colors that we can do um yeah okay so that's
the macro Builder um obviously there's some some bugs here let me make a note for myself that I need to fix
that there was something else earlier today I said I found a bug I need to fix I can't remember what it is off top of
my head if anyone remembers what I said was a bug earlier let me know I should have wrote it down clicked on something
in the admin and it didn't load ah yes API docs thanks no problem
okay um okay next up is so we've kind of gone over text style text essentially
works the same eventually there will be all kinds oh wait that's on the admin side admin side will have the options
for all kinds of buttons and whatnot we're talking about content okay um image so here um the
image super powerful again uh it also has a preview macro that's built in okay
um you don't need the macro um I I just kind of I have it turned on Just for educational purposes because you you
have the ability to everything that you can do that I showed you earlier in that image Builder on the admin portal um you
can do here with the settings even Watermark okay so um yeah pretty
powerful uh we have the ability you can customize the height width and again if I change these values all these values
and that that image is created on the Fly so if I make this instead of 600 pixels
if I make it 900 pixels okay and I preview that image that we're looking at
right now that was just created on the Fly okay pretty
powerful um and then uh yeah you got all all the
ability the the sharpness the the cropping All That Jazz it's all here
okay um and then uh here we have just a header then we have gallery gallery has certain things um all the image settings
that you see here are going to be applied to every single thumbnail obviously right so you can build out how
big do you want your thumbnails to be do you want to crop them do do you want to apply any effects okay and so on and so
forth um and oh doesn't look like I added all the watermark options I need
to add more Watermark options to the gallery
cool okay um yeah I need to add the watermark stuff oh I think I made it so if you type in oh that's right it's ws-
logo and then when you okay when you type in the setting it shows all the settings
excellent I was too clever for myself so you type in the file name of what you want your watermark to be so in this
case it would be uh if we go to my gallery right and my water marks I would
get the actual name of of of the actual image right um so in this case Weaver
space.png and that's what I would put here okay um on the on the in the admin dashboard
right when we when we did uh you know everything uh we had it was nice because it's all tied into the CMS it actually
gives it to you right so I can click down here I don't need to know the name it just automatically adds them here
obviously the stacks interface doesn't have that level of integration so you actually have to figure out the name and
just put the name in here okay all right um so that's the gallery
also uh right now there are zero options for customizing the look and feel of the
actual Gallery right so uh if we go to you know the content so like oh well oh
this is preview right so you know the gallery
options like you know customizing the color colors and you know maybe turning on and off buttons or turning on and off
um thumbnails there are no options for that yet okay it will come I just again
I'm trying to get as much of this you know done as POS quickly as possible um I think the default settings that I
chose are a good starting point but yes we will have options to customize the
style of all this stuff as well okay um and those options will be here
eventually um in the future all right um any questions
yet I know I've been kind of jumping around a little bit I've been trying to stay focused all right um let's dive into a
Blog so blog is essentially the same um in terms of we you probably want a blog
list page and a blog post page okay I think it's uh that sort of um workflow
just makes
sense so um how do we do that right let's go to the blog post page here okay
you'll notice that I have a layout of blog posts all right it's just a grid I think I'm using the foundation 6 block
Grid or maybe it's the starter pack no it's Foundation 6 okay so um this is very similar to how
feeds works if you've used feeds to autogenerate
layouts this will feel at home to you okay if this sort of thing is new
you this might require a little bit of brain work okay um there is a set of stacks called
Loop Stacks okay um and they
are where are they I have it in layout oh layout
helpers sometimes the icons aren't showing up I'm not sure why whatever okay so there here we have a loop blog
stack okay and what this does is uh you essentially you configure what your
collection is okay so in this case blog and here I
have a bunch of macro hints for you that you can copy and paste to inject the data out a
Blog okay so uh actually let me make a quick note about something
uh um so here you can just copy paste this and we'll notice that I've used those
down here so um the these aren't again these settings are here purely for you
just to copy and paste stuff and actually stuff like pipe raw doesn't even need I fix that that's not even
required anymore okay so that's actually a nice thing I I worked hard
to that was a simple thing or it seems simple but man that was hard okay um so
we no longer need raw for anything okay which is cool so like if I wanted the post
summary I would just put in I can copy and paste that in okay um so Loop blog is going to Loop
through every single blog post and apply this layout to the
data so um it's going to create a block grid cell for every single blog post and
as you see here that's exactly what it's doing it's creating a block grid cell for every single blog
post so let's go through the data here uh we have an object link stack this uh
stack allows us to easily uh link to an
object as long as we've defined the link in the collection so if you remember
earlier on today I talked about how uh in a collection you can save a URL for a
collection so what does that mean okay let's click on a blog
post hello what
happened did I break something let me go maybe I guess I broke something hold on
one second uh let's just go to the dashboard and go to my collection go to
blog uh edit my collection oh I have no URL okay um so right here I have no URL
saved in my blog okay what do I put
here what we put is the URL to the blog post
page all right so I'm just going to use that as a starter and we're going to
paste that in and it is going to be slash blog
SL post.php that's the URL to the blog post page
without any sort of IDs or any of that stuff okay uh we're going to go ahead and save that
okay now let's go back to our blog and if I click on this now there now it
works okay so um what the blog link
does uh oops I changed Pages uh what the object link does is it looks at the The
Collection gets the URL and then it will automatically um you know link to the
particular post as long as you configure it properly okay so um in here of the
object we need to we need to give it the the ID of the object and postop ID is is
how we do that okay for this because in here we'll notice that in Loop blog we
to get the ID we need post ID now since this is a stack or not we don't want to
Output that we just we just kind of paste that without the curly braces here and then our collection is
blog now you can do a custom link if you wanted okay so if you used a custom link
you wouldn't it wouldn't actually look in the collection for the URL okay however I am going to encourage you to
save the URL in the collection why is that okay the reason is this URL is used
or it will be used for more things than just linking of blog posts on the
web because many things that we need to do for a Blog um I the CMS needs to know
what the URL to a root URL to a blog or an object ID is for example um RSS
feeds if I want to generate an RSS feed which isn't a feature in cms3
yet I I generate an RSS feed the CMS needs to know where to point people
to okay and this URL is that we want want to Auto generate sitap
files for Google and search engines in order to generate a sitemap file we need
to know the full URL to a web page this URL is needed for that okay
based on this URL I can build out the URLs for every object in a
collection that way we can do it RSS feeds um Json feeds all kinds of stuff
okay um primarily RSS and sitemap both of those aren't implemented
yet they will be okay so that is the importance of
this URL field in the
collection right this is very similar to in total cms1 you go to the blog post
page and you preview and then sometimes that light most of the time that light box would show up sometimes it didn't
right and then you'd have to click save it and then save it into the CMS right that whole work workflow is gone okay um
yeah don't need to do that anymore in your admin area save this as a part of
the collection okay cool any questions or
confusions on that nope okay um we do have a pretty URL setting I won't go into that right
now um but yes we do have the ability to do pretty URLs as well um for this object link okay um that's actually
another thing I'll probably have to add in here is some sort of HT access Builder or something like that that
would probably be a cool utility uh let me add that to my notes HT
access for pretty
URLs okay um so that's the object link uh and then here we have the image stack
okay now in here I want to get the uh main image for a blog post okay so um
the object ID as we saw from the object link we we give it the ID of the object
now this is just the run-of-the-mill image stack the same one we used on the main content page but in this case I I
need to define a custom collection and property because if I don't select this it's going to look in the image
collection for an image and we don't want that so what we want to do here is
we want to look in the blog collection and we want to look for the property
image now with that said um if you haven't realized total CMS 3 requires
that you understand your data what do I mean by that what it
means is you have to know in your collection okay if I go to blog okay I
need to know what my fields are I need to know know that I have a collection called blog and inside blog I
have an image called or I have a a field called image or property name image right
here you have to know that okay um so if
you want in here I want to access that image so in this image stack um I'm
giving it the post ID I'm giving it a collection of blog and I know the
property that I need is called image If This Were let's say a custom
collection that had um multiple properties let's say I had a screenshot
or something like that okay let's say I had a property name screenshot in my
products okay uh collection that's what you would do here you would go
collection products the property that I need to get the image is called
screenshot okay let me put this back so it doesn't break my uh page here blog
right now you'll notice that there's this array of buttons down here okay and that's this thing called
use variables and as you know um post. ID
here is a variable that references um the ID of the particular
post that for this iteration of the loop remember so this is looping through
every single uh blog post and for each instance what we want want to do is we
want to get the post ID and we don't want to literally look for an object ID of post ID if I were to turn this off
this would literally look for a a blog post with an ID of post. ID that's not
what I want so what I do here is I say hey the object field is a
variable okay and so what it's going to do is going to dynamically look for it's going to look up what post ID is and
then look for that object object hopefully that makes sense now we have the ability to there are some times
where using a variable for the collection and the property would be
useful um by default I think most the time you're just going to statically enter it in okay but let's say you
wanted that to be a variable okay you can then do that okay but right now this
is literally looking at the collection blog and literally looking for a property called image
okay and then all the various image settings that we would have you can customize whatever this is right with
height crop areas all that stuff all right um here underneath uh
the the image uh I have a header stack and then I just I simply if you looked in here right I copied the the title
macro and I paste it directly into the header stack and that then gives me
if we go back to the blog page so I have if you notice here I have my image if I
click on it it takes me to the link here I have a header okay below that I have a a H6 a
small header that contains the post date okay and here you'll notice I do
post. dat and then I can customize the format so I know a lot of you hate uh
you know or do things wrong right and you have year month day right so weird
right but hey it works if that's what you want right oh that didn't work did
it wonder if that had to do with some of my data inside the CMS might be wrong
inside my preview EMS let's publish
that oh oh it did oh it did do it right but it did it as one cons oh I did
backslashes interesting if you want a backslash here let's do
dashes oh there it goes right so year month day um normally you would do
forward slashes right for
Slash and that would do a forward slash if you wanted a back slash maybe I don't
you would actually have to put two in here um
interesting that's a a programming Quirk oh oh it did
what how would you put in a backslash that's interesting I'll have to look into
that you have to put here let's see I would you have to put three in there this is just
nope interesting all right I'll have to look into
that you wanted a back a
backslash anyway you get you get the point right you can also add in time right I forget the the the exact thing I
think it's like uh let's see it's h colon M colon s i I'm guessing I don't
know I'm going to guess at that oh look at that I guess right right so you can you can do the full date as well
okay with time okay um and then here I just have the summary um in this case I don't need
the raw anymore um it doesn't hurt if you had it in there but um it's not required any longer um and there we go
okay uh and then I have a uh object button that's similar to the object link
you can link to the particular um object with a button okay pretty simple all
right so that is the how kind of lists are are done right um if we look at the
feed it's very similar I have a loop feed stack that has helpful macros here
as well very similar thing um I'm looping through I'm creating a block Rd cell um you can do this with any sort of
layout you can use with Bento as well or whatever you want right um and then here's my image
obviously I my collection is now feed okay uh and title and here I'm
outputting the creation date the updated date and the content
okay now in this particular case um feed it it's just the feed there is no post
page for feed you could create one if you wanted um but yeah it's not
required all right um now let's look at the blog post page okay
um so uh here we need to load the
entirety of a particular object right in this case the blog post
now if we if we go here and we look if I click on this if we look at the URL we'll notice that um it loads it with
question mark ID equals and then the ID of my blog
post okay um so that's how the URL structure works um and there is a object loader
stack that helps us do this so inside uh the stack settings or inside the stacks
Library there are a bunch of data loaders okay and you can load all kinds
of data um in this particular instance I want to load an
object okay um and the object I want to load is
the blog post that is passed from the URL right so here all you have to do is you say um load from
URL load from The Collection blog and I I want my variable name to be post and
what does that mean okay so um if you remember um on the blog loop stack um we
we did post title post date and that's because um the blog loop stack creates a
variable for us called post and you can't even you can't even change it it just does that for us okay so everything
has to be post makes sense um this object um loader is a a very generic
stack now for blog um we want to load in as everything called a variable
post so um that way I can do things like post. tile post. dat but let's say this
was um let's say this wasn't a Blog okay let's say this was a product page and I
was loading from a um product collection okay or H let's I'm going to
load it from a Stacks collection and this is going to be a stack okay so now um here instead of
post. tile I would use um stack.
tile right so on and so forth um so yeah that's what that
variable is let's go ahead and let's put everything back so I don't break my
page okay so um here we are loading this object and um from then on I can use the
the post variable to reference the data from my loaded blog post change your
your header back oh
thanks okay so again similarly to the image I'm going to load the the object
ID is post. ID just like we I've explained four we're going to load it from blog and the properties image okay
and then all these settings further down I have my header I'm going to load post title post date post content now you
might be asking how do I know what what data how do I know this is post. content
how do I know that well again you need to know your data okay so if I go to my blog well
let's go to uh let's go to the dashboard and if I go to my my blog
I know that here are all the properties that of a Blog so if I want the content
it would be post. content if I want the extra content it would be post. extra
post. tile now there's things like tags that are obviously a little bit unique
because those are multiple things right and we'd have to learn The Twig Syntax for that and um yeah there there's
different SG you know Syntax for that um but basically you would you would access all this data you know post. archived
stuff like that okay and there's all kinds of you know layout helpers that we can look at to do this um so here I've
added my title I've added the date um the post content not sure why I have
that in a header but whatever um uh a gallery image okay so
here I'm taking an image one image from a gallery which is kind of cool um and
we can actually pull in a random image from the gallery and then below that I'm displaying the entire gallery right um
earlier we saw we had x-ray data um if we go back to my blog a blog post page
here okay um this is just uh it's kind of a debugging tool it basically um it
allows you to Output the data of whatever we're processing okay um so
that is inside here it's called x-ray data and in here you can just put in uh the variable that you want to Output so
in here I want to look at what post is right and that gives us access to so we
can see we have ID we have content we have image or title now what's kind of
cool is let's say I wanted to get to the um some of the exf data for my for the
image right uh unfortunately this particular blog post has no image uploaded to it um
but uh let's fix that um what is this future future approved here let's fix
that let's go to my dashboard we're going to go to collections blog and
we're going to go future proofed I think it was this one future I think it was this one CU I
remember that that particular image um okay so this this image uh this was
created by the factory uh let's add an image that actually has uh xif
data I know that one does okay so I've uploaded my blog post post uh I've
updated it so now if we go back right now I have that image now let's go into
here now if we go right we'll notice that I now have exif information in here
okay um so for fun um let's just output the camera okay let's put it in a header
okay for fun why not let's put it like right below this
image um and so I'm just going to go in here we're going to add in uh let's add
a header right let's make it like a let's make it small H6 okay and what I'm
going to do is I'm going to say um shot with my and then I'm going to do curly
braces I'm going to do post. image. xf. camera
that and let's let's look at that syntax so post because everything in for this
object loaded everything into post okay so in that uh I want to I want to get
the image uh and then inside the image I want to look at the exif
information and of the exif information I want to get the camera information so I can do post. image. xf.
camera and voila shot with my Canon 5D Mark
I and you can do that with all the data all the exf data all the other data that's stored in um uh yeah all of it
pretty cool right um super exciting
stuff any questions
no I know we've been going for a lot of hours now so uh you know but I wanted to be this to be extremely thorough to go
over everything um so that's the object data loader um let's look at some of the
other Stacks I'm actually not even using in this in this page just kind of show you what you could potentially do with
them let's look at layout helpers we have a conditional okay um so in this
conditional we can do various things okay um let's we're on a blog post page
so um let's uh here for fun let's do something
actual real okay um I don't let's look at that image okay let's say uh the if
we look at the image the make of the camera is a Canon okay so um I'm going
to do something probably doesn't make much sense but it's it's an example okay so in this
rule I want to do um if post.
image. xif do uh what was it make make
okay if the make
equals Canon okay then we're going to put in this
header okay so um so yeah pretty cool uh I made this very very wide open um and
it's just a very generic twig if statement and in order to really get the
most of it um yeah you got to learn a little bit of twig probably so you can go to uh twig and you can go to if um
and there's all I'll probably have docs you know some that replicate some of this these examples but you can do all
kinds of stuff right here is like you know if temperature is this you know greater than 18 and temperature is less
than 27 um you can do all kinds of stuff I if it's empty if it's not empty um
yeah so really cool stuff um you can do here um and let's test this out I'll be
honest I haven't even done this this is all on the fly so let's go back to where is that page this page
here all right so that's uh published and now that is displayed
because it's it this particular image had the make of of Canon but let's go um let's go to a different Blog Page and
that won't show up at all right so that didn't show up at all because it's not that it's not it
doesn't this particular image didn't have a make a camera make of Canon right
um now this you know you do even simpler things um you could do something like um
let's say if post. draft equals
true right and what's kind of cool if you notice here um actually put the condition here so you can kind of see
that um you know within while you're working on your layout right so here I
can see if the post is set to be draft then display this right so you can do
all kinds of cool stuff with this conditional you can also do stuff like you can do an else if rule so you can do
if this else if and you can add all kinds of stuff and then you can add like a catch all else at the end so you can
be like if it's true if else if this else if this else blah right so it's
definitely a pretty cool very useful stack for
customizing um your layouts based on the data that you have available to
you okay um there are other looping Stacks
okay so uh we looked at the one that looped a Blog um you can also Loop through a gallery um you can uh oh if
you could toggle right so um and then actually instead of like doing this this if condition okay
um you could just use the toggle and essentially it just says um you know I can do uh post. ID object and then uh I
want to do blog draft so uh this essentially says if uh
the draft is set then uh you know display this it's
essentially the same exact thing I just did in this conditional uh but yeah just maybe a little bit and then we have an
else logic so on when toggle
off pretty cool right and uh this stack if if it's we're just used because there
is a uh oh I don't actually have here let's
create a new collection oh this site has a bug hold
on one second we go to to my other test
site we go here here oh I do have toggle so like here you know we do have a
default toggle um so like you can have as many toggles as you want and obviously if you just use this without a
custom collection um you know then you would be like you know let's say I had to toggle my check right so this would
just be uh my check so um this again even though I'm
on a blog post page this would always look for the global toggle um collection
and it would look for the object my check hopefully that makes
sense all right um okay I I'm I think I think I'm
going to be done uh with the demo I I think we've gone quite long enough and
uh I've shown a lot of the basics a lot of behind the weeds there's still even more behind the weeds right um but
hopefully you can see the power of this and um yeah start playing around with it
okay I'm happy to stay on we don't over right now but if you have any questions
I'm happy to continue on and um yeah CH
chat
sounded a bit gobbley goop there for a minute oh oh did I sound like gobbly
goop someone else was talking ah okay I think you're just getting
feedback from someone's
mic thanks Joe that was very nice very helpful
excellent what uh did it clear up anything for you Bill got me wondering
about something I was playing with the other day the conditional yes I was trying to um establish a condition where
something would happen if a if a pitcher um uh had an image or didn't have an
image if a picture object was empty is empty the key I'm looking for there
yes I I don't think that's what I tried for some reason or other yeah um when
image is empty actually um if you look at that that raw data output there there
is some I think like uh size
zero okay so if you do image. size equals zero then you know there's no
image that'll do the trick that's playing with a schema that has two
images as as the main image but only one of them in there
sorry I melted your brain [Laughter] [Music]
dad um so uh one thing oh one thing I didn't go over in Luke um as of right
the current beta that is out you can there's no filtering
filtering okay so there I I do hope to get that in this
next release that's the one feature I plan on adding is some Lo filtering and
sorting
okay any other questions questions Joe when you when you created a Blog and you
do a search for a certain something it brings back your results in I presume
time order and then if you go into one you can go
can you go from one to the next of your
results uh I'm sorry say it again I I missed you there so you you've got a
Blog and you do a search and your results come up you get a whole series of them and you click on the first one
will you then be able to go with an arrow or something like uh you go to the
next next one of your results um got it got it um so so you you're on a a page
and you search and you filter out for a list and you get a filtered list of blog
posts and you click on that and it takes you to that that blog post page yeah
yeah at that point you want the ability to do next but not only next like in
some sort of logical sense you want to know about the search you did on the previous page
next yeah uh that is a uh I I would have no idea how to
implement that off the top of my head um so that currently isn't in the road map
um it's interesting idea quite complex though that's not something simple I can't can't understand why you
can't know how to do it um yeah that would require some
thought it's interesting idea though um I don't think I've ever seen that seen that oh well there you go there was a
question on rapid waver the other day someone asking whether they could use Compass if CMS free yes um and because
compass compass right now um has a specific integration built for toal CS
one um so that would have to be updated so that it would work with total
definitely possible possible good um but what that does is it doesn't
do search um but what Compass order of your blog
post not by any search but Knows by okay and then it would know
next in previous or possibly um Scott stack blog
select uh yes oh which Scott stack um now Scott Williams has got a stack a
um which joins blogs together ah
okay yes uh yep that stack does yeah that that could work too uh the well uh
oh you're talking about his um can't remember what it's called blog um the one for blog where you can like link
multiple blogs yeah that that I I doubt that will well I mean uh I mean you'll
kind of be able to do that out of the box with total CS 3 okay um Jeff by the
way I muted you because it was there there your mic was causing some feedback so if you want to C un yourself okay
sorry about that um this this new system doesn't seem to
have as good of audio uh as Zoom does right Zoom zoom's
audio I think they've nailed it so yeah this this while I like some of the other
features of this um its audio processing isn't as good as Zoom so wait and see
what the recording's like yeah exactly yeah to Jeff's question though for a sec
if he could sure um if if he had searched uh for a subset of a
Blog could could it not be reasonable to to have a menu created for that subset
which would then work fine with compass yes um yes so Compass looks for
um you can you can point it to a menu um and then it would use that menu um to do
things and in theory we'll be able to do the same thing with total CMS 3 yeah also I mean uh and and something I
didn't have here um in the demo yet you could also have um a Blog loop stack on
the actual blog post page just like you could on with blog now that then
displays you know a list of blog posts that maybe you might also like right um
and when I add filtering we'll probably have to play around with doing the you know show related blog posts sort of
thing um with looping so that we can um you
know basically filter based on the data
from the blog post that's loaded on the page we're on right um so that will
definitely be possible um so yeah
okay Joe uh I have two questions um sure first one is about the um watermarks uh
if I am is it possible to um add a pattern as a
watermark so that I can create an overlay um yes uh as of right now you'd
have to like create a pattern uh yeah you'd have to create something and and you could stretch it over the entire
image if it wasn't large enough but you'd create something sort of PNG pattern yourself and then stretch it over um yeah right now it doesn't have
like a it's not possible to repeat it so that that you have a small
Watermark and you can repeat it so that it fills your whole image uh right now
that ability isn't available um and uh yeah that's not a feature of the the
library that I'm using either to help me out with that um okay I I did think
about that and I think it would be a cool feature but for now I think the the easiest way you could just create an
extra like even an extra large version of it and then um we can play around with you know overlaying it and if it
overlaps the edges who cares um that could be of course but that's that's a
large image that you have to yeah it could be yeah I agree um it's not ideal
but I'm sure we can we can try to come up with some sort of workaround for that okay uh the next question is about the
exive data if um if I upload an image
and then I create this instances of of this images the smaller versions yep the
access data is always copied to it is that's correct um so as of right
now that exive data is not copied to the
thumbnails um you still have access to to um the thumbnail so if someone were
to download the thumbnail that exf data is not there that's great that's what I
that's what I like yes because I only want to share the exf data
um as it's at a special Point not not always yes that makes sense yes
so like to share sometimes not yes okay only the original image that you
uploaded will contain the exif data that's great
Perfect Hey Joe can you switch back to grid view oh sure
[Music] sweet any other
questions anything you'd like me to test out or play
with it's bit delayed there it looks pretty good man I'm excited yes uh so the stuff that I
have here let's see what stuff I did in version beta 7 so far uh oh uh the
current beta um creating a new custom collection is is broken I fixed it now
it's already fixed um obviously uh but it'll be in the next beta sorry about
that um oh I didn't talk about hey so I
told you I have that new schema right so with the blog with the blog Legacy thing
okay let me uh let me show how that is uh so if you um when you upgrade to
beta7 okay um what you will notice is that the built-in blog schema has um a
limited number of fields okay or I mean it still has all these fields but it doesn't have extra and extra two and
some of those extra fields that I felt weren't needed for a Blog okay um and if
you go into your uh collection and you go into your blog and you click on this what you'll notice
is that that the data doesn't even show up in the form okay it's still there in the CMS
though uh at least until you save each one so let me let me show you how um if
you wanted to take an existing blog that you had set up in the existing beta and
um yeah migrate it back to use blog Legacy um this is how you would do
it um so so um you might think oh I'll just go to edit my collection and then
change the schema okay from being blogged to blog Legacy um but I don't
allow you to change the schema for a collection once you've created it okay
that just seemed like a bad idea okay um so what we're gonna have to do is you're gonna have to manually do that all right
um so uh to do that just simply you're going to have to find go to your TCMS data folder okay
uh which is under my websites demo all right so we have TCMS data and then what
we do is we go to you'd find your blog okay now another another interesting
caveat is um the file that you need to edit is actually not visible in finder
okay um so we're going to have to drag this um into actually let's I'm just
going to drag the whole thing into into I use vs code it's free um whatever code
editor most code editors going to be allowed to see and edit invisible files
okay um so let's make this a little bit bigger so if we go to blog okay uh that
bigger even still uh you'll see that there is a meta file.
Json what you need to do is you just need to take this uh this schema and just as you see it set to blog you just
need to change it to blog Das Legacy and save it okay now uh once I've done that
I can then uh let's refresh
this oh I'm not on that page I'm on a different site darn it hold on
demo one it's not
bad we go into here we going into blog go to
edit oops what happened there that's
interesting I think I think the the blog data in My Demo here
is is why did that change that should have totally not broken
anything okay well I will have to good thing I tested this because I
was just going to ship that and everyone else would have been like I did what you said Joe and I broke it so I'm going to
have to see why that breaks
it that's what you will have to do I will make it so that that
works um either that or you could just go ahead and create a new collection okay uh I mean chances are most people
are just using dummy data now anyway um but you can still is but you said custom
collection is broken right now right uh well I'm sorry once you ship oh this
this site doesn't have the beta oh hold on this doesn't have beta 7 that's why
it's not working okay hold on one second uh let me rebuild let me quit let me
quit rap reever my the stacks are still running beta 6 they don't have beta 7 in them so when I've been publishing it
doesn't have all the fixes that I've already done uh let's see throw that beta 7 out
to us uh I I want to have it done by tomorrow but it depends on how quickly I
can get the filter and sorting thing
done on I'm I'm creating a new build right now
all right that's uh done
oh what happened
here yeah I know it's not open want it to open what the heck just happened
here what the heck I know it's not open anymore
[Laughter] [Music] what the
heck what that is uh that's something
new I've never seen that
before is it like still running in the background or
something activity monor won't even load I don't know something something as bad as happened to my Mac I don't know what
I just did but right I'm pretty certain that works all right here let me go here
I'll change it in a different place uh let's go to that I got too many let me
go back here
go this is running beta 7 um it's not this is a standalone in it's not tied to
Rapid Uber or Stacks but um same thing should happen so if I go here I edit my
collection this is set to be a Blog collection okay um going to go ahead
and wow that's big uh so I go into here I go into blog
go into meta Json I set this to be Dash
Legacy okay there we go yeah so now it says blog Legacy uh now if I go into um
the data for that blog wait what
oh interesting that's that's a bug uh it's
hidden because I hide anything called blog Legacy that's funny
[Music] uh I'll just do
this oh it's just blog oh interesting
well looks I have some bugs to fix all right uh but
oh so there are some warnings here but it actually did work because I see all the the the fields like archived was
removed labels were removed but they're all there
now and yeah here's extra content right so good thing I tested this there are some bugs I need to fix there um but
yeah so that's the way you will if you have an existing blog that you need to migrate you'll need to do that if you
want to have all those extra Fields cool I'm going to set this back
blog uh we'll leave it at blog Legacy so I remember to fix it
sweet anything else guys are we ready to call it almost three hours
man time to go and have and come back again I'm glad it's
recorded wife pay attention because the test is gonna be [Laughter]
later is the final tomorrow Joe at The Hangout yeah exactly Jo s send out a
questionnaire we got answer all the questions before tomorrow night
yeah yeah thanks very much for that Joe thank you guys quite something
yeah hopefully we'll see many of you good night bye