hey everybody oh let me get some uh some lights on just realize I'm I'm not too
dark but let's go ahead and turn on the lights
too there we go okay how's everyone doing today first
live stream of 24 I was actually I was looking at the uh the P like the 2023 live streams and
I was a little inconsistent from like the end of summer on so or throughout
the summer cuz I was in Brazil all summer so sorry about that I'll try to be better this year um but anyway we're
here that's all that counts so if you notice the topic today it was actually one a live stream I tried to do in
November and uh if you're if anyone remembers that it it was an epic fail
that day I just I remember that day it was was like everything went wrong that day and um yeah remember the live stream
didn't work we ended up going into into the hangout and uh kind of did an ad hoc hangout that didn't get recorded or
anything so um I've wanted to redo that um so here we are today hopefully I
luckily I still have all my notes from that day um I remember oh I understand
most of my so you know every sometimes you take notes and you go what I typed that sentence but I
don't know what that means now it made sense to me on that day
but anyway so Mr Cole Dr Bob Franco Martin thanks for coming
in Mark uh wool wine woolwine is that how you would say I I feel it's
something different wool woolwine w woolwine wolven I don't know Mark thanks
for popping in and uh David Mr Powers Scott Tony Aloha Mr workman's in the
house the other Mr Workman
excellent Fernando thanks for popping on and actually okay remind me so I thought
I'd start something new this year okay and at the live stream we're going to do some
trivia okay oh I I had a question I forgot to I'm pretty sure I know the
answer but I forgot to research it I might have to research it at the end I'm gonna I'm gonna do some trivia and we're
gonna give out some uh some store credit some Weaver Weaver bucks let's call them
Weaver bucks how about that okay so we're going to give out some Weaver bucks to uh to two people we'll do we'll
do two okay um so stay at the end we're going to do that we'll do a little a
little contest see uh what your Weaver knowledge is your your Stacks history
your Weaver space history okay um so I thought that would be fun something to
do hopefully I remember to do it remind me at the end we'll do some trivia
okay um today we are going to talk
about uh what are we talking about total schs blog um like layouts right so uh
basically how can we um customize our layouts using total CMS there's a lot of
small little intricacies uh we're going to use the power of foundation 6
on some swatches and classes and and all that stuff to kind of um do some custom
styling um and so yeah let's uh let's go ahead and jump in on it
uh and uh share my screen there we
go okay move this over here here all right
we got uh let's just open up
that okay um here we go let's go ahead
and let's preview this really
quick okay um and actually um I have a new kind of setup
here let's make sure I have oh I don't have M
running and now okay there we
go
sweet right and just go ahead and publish locally to
make sure I have the latest
locally right and let's just look at
this what did map not start what the heck oh
start
rookie right and then I think this page is what like blog blog
test boom okay um for those you don't know I I'm
going to be using mamp locally so I don't have to worry hey it's going to be a lot faster cuz I published to my local
machine super quick for live streams and then I won't go into it but now the the
host that I use on my sandbox site like sometimes if I publish too often like it they like block publishing and then you
have to sit and wait for like a minute or so and kind of annoying so M solves that um if you don't know what m is go
check out I have a live a live stream I did last year um testing websites
locally um pretty slick okay and so yeah if you go to preview. joormann you're
not going to work because it's only local to my machine okay and uh I used preview
because you know back in the day no one used sandbox whatever right so sandbox.
joormann you know was like my sandbox and now everybody has a Sandbox site so
if I type sandbox in my Ur in my URL bar like it comes up with every other person sandbox and so I have to type out it a
lot so I switch from sandbox to preview now so there we go
anyway um right so first off we are going to uh
let's look at blog list what are some things we can do with blog
list now um this is just some sample blog post data um it's obviously not
anything fancy actually even this I should probably delete that hello one that's pretty but um here let's
go ahead and go to the blog admin where what blog is that I don't even know one of that
is it doesn't have a link whatever okay
um oops it doesn't have any that is weird
hold on hold on one second let let me fix
this this is article post no this one
that's crazy let's go back to my admin
here czy whatever I don't know what it is I
don't want to waste your time with that okay so we have a blog list now um if
you know Blog has a lot of different fields that we can utilize
okay and we can actually customize the look and feel of
individual blog posts in the blog list based on those
fields what what do what do I mean by that okay so um let's go ahead and or
let's tweak this a little bit let's go ahead and add in some content let's add
in uh I don't even know what this sample data has to be honest with you so so we might have to tweak the data a little
bit here um I like doing things off the cuff for you guys so that I don't have like a
pretty demo already done and set up you guys can kind of see me and watch me build it and sometimes I fail and
sometimes I flaer and flap around like a dead fish just like a lot of you sometimes right so um it's no big deal
um and just like right now I was looking for those Stacks here when they're right here in the menu rookie okay um I'm just
going to add tags into here um and uh let's add categories and labels
and author I'm not going to try to make this look pretty I just I just want to have this stuff in here okay just so we
can see it all
right and because we're doing locally there we go okay um a lot of these don't have a lot
okay well let's let's look at this one here this is a test from zapier right you see how this is my summary tags this
one has tag one and tag two category cat cat one cat 2 label one label two by Joe
Workman okay um now let's say I wanted to um utilize something like tags um and
everything that has the tag of um tag one okay I wanted to make I want to
style it a certain way okay um how can we do that right
um so am I noticing in the chat people are anyone getting weird screen
flashing oh hopefully it's just a a minor glitch
on your sides uh guys I'm going to keep keep on going okay
um so let's say I wanted to categorize or or style everything that has tag one
okay um and the same thing would apply to category one label one or anything that's has an author of Joe
Workman okay now uh first I'm going to let's just do it and then I'll show you um how we can
customize that right so we're going to go ahead and uh do I have I have site Styles in there I'm just going to add
swatches to this page let's just go ahead and add a swatches stack to the top here okay and
um just so we can make it easy to see I'm just going to do background color Okay so let's go ahead and do a
background and uh I'm just going to do it and then I'll show you how I knew
this okay um so what we're going to do is um remember I said anything that had the tag of tag one okay so I'm going to
do tag Dash tag one as the class okay and we're just going to do
background color and um here let's go ahead and let's make
that something like I don't like that okay whatever so everything that has the
tag of tag one is going to have a background color of that let's go ahead and publish
that there we go
refresh what hold on see look at that
rookie tag tag one
is it browser
cache do I need a force let's try
that that's a weird
one ah there must be something else with a background color on that okay okay um
here interesting I just want to look at that really quick
uh ah it's because the setting from the blog list stack is overriding it so in
order to override that you need to bang important okay makes sense okay um okay
let me go ahead and um so you see there we go right um and I'm just using
background color I'm not going to go through all the other options I mean there's you could style things an infinite amount of ways okay but I just
want to teach you how you can Target a particular item and then apply whatever
Styles you want okay now you you could apply this let's say I wanted to style
instead of the post itself I wanted to I wanted to Target the the image or or you
know maybe the header okay um let's go ahead and do um
maybe what is this the title oops I didn't want that darn
it I think that's just do Post tile all right so let's just do Post tile let's say I wanted to make the background
let's just stick with background color I wanted to Target the uh post title of
everything that has a parent class of tag tag one right just to show you
different ways that you could do it right so you could Target things inside not just the post itself okay and let's
go ahead and publish
that right so now at that at that point I'm only styling that header why did I
click on that again Jesus okay um so but the key here is knowing how to
Target a um a category or a tag or an author or a label how do we know what
those are okay um so let's go ahead and show you um total CS does this by
default um you actually can't even turn it off okay so total CS does this for you automatically you don't need to turn
on anything it just does it okay and what it will do is for every blog post
it's going to add a ton of classes um based on genre category tag label and
author so it's going to add a class to every single blog post for every author
genre category tag and label and if you can kind of see those here let's go ahead and make my uh text
a little bit bigger um you'll notice some of these don't have anything right this is just
dummy Tex test data um I probably should take the time to create a nicer Rich set
of test data um it's on my to-do list um but if you notice here I have author-j
Workman genre D automated category-c cat1 category-c Cat 2 right so if you
notice if you see the pattern here you'll notice that the field name is at
the beginning so author Dash and then the author is Joe Workman for this post
so it did author-j dworman okay um for genre this had a
genre of automated so it did gen ra- automated so on and so forth okay so you
see it does a lot of really cool
stuff Joe how do you target it without a Swatch um
CSS okay uh I'll go into that in a little bit but um swatches are just CSS
if you want to Target something uh and style it customize it for everything you you need to know no CSS um or swatches I
mean that's just the power of swatches okay um so there we go um now uh hold on
I'm going to rewind let let me finish this synopsis and then we'll talk about that that's a very good question though
Alex thank you for mentioning that so hopefully you guys can see the pattern here on how I can determine just
by adding tags or categories or labels how I can Target a particular blog post
in my blog list okay hopefully that makes sense this is very powerful and I'll be honest I don't think a lot of
people use this all right U oh other things uh featured all right so here
let's go ahead and uh let's go to admin oh this one this is my test oh it's set
to be draft though let's go ahead and edit this I'm going to turn oh who was
the guy who made this page I don't know which one is featured and which one is draft what the heck that guy needs to be
fired uh let's see this one is featured so I want to turn draft off on this one
all right and save it
oops there we go all right we'll go back to blog content there we go all
right
um this particular post uh if you notice this one was set to featured and it also
has the featured um tag okay um now this
particular blog list has um draft hidden okay but um draft and archived add
classes as well okay so you could Target everything that is a draft and everything that is archived and style
those different ways okay um so there we go go and if you see this one has other
you know category love category hate category blogs tag hipster tag blog tag win featured okay hopefully you guys can
see that um so that's that's a very powerful way
because a lot of times if you want to if you have a featured post you might want to style it a different way right and
with swatches it's not just changing the style of something maybe you use like the display Swatch to completely hide or
show something right you could do that as well so like for all featured posts maybe you want to hide a certain number
of data or for non-featured posts maybe you want to hide something right so you could do all that with swatches right uh
because it's just hiding and showing and customizing the styles of things um so
hopefully you guys can take that concept and run with it okay now
um there a couple caveats uh there are some actually some
really cool things I'm I'm going to go ahead and let's go into this blog post here this test blog
post okay since I know it's this featured one um there is a cool feature it is a
definit power user feature so let's say you want to use tags okay um I believe this is tags
again I didn't add any labels to these fields how horrible is that uh let's look is this tags yes this
is tags I just want to make sure that you know let's say you're use you're actually displaying your tags um
on the web page and you want to have like a special tag that you can utilize
maybe for swatches but you don't want that to be displayed when you're displaying your other tags so there is a
a special Syntax for your tags that if you um start a tag with a
dash it will not get displayed on the user interface side right let me let me
show you so let's go ahead and let's do um I'm going to do comma and I'm going
to do Dash um live stream okay so I'm I added a dash live
stream just to not confuse you I'm going to do Dash Liv stream okay and we're
going to save that let's go back and if I
refresh uh how come tags isn't showing up here oh tags is up here
um hipster blog wi oh okay so I was like
how come it's not displaying I just added a tag well if you notice here in the tags we have hipster blog and win
okay but let's go ahead and inspect this and what we should notice
is oh no that
tag that is not added to classes interesting okay um so you you can use
that in things like the uh some other things I've been uh showing on later which is the blog rules but it doesn't
show up in the classes I actually forgot about that that's interesting okay remember that Dash
trick we we'll show you how that will help you in the in the future I thought that helped with classes as well very
interesting okay ghost tag yeah yeah yeah the ghost tag is not
showing up right um it did do its job as you see here it's not showing up um but
it also does not show up as a class which is unfortunate I thought that that actually could be useful I might I might
go ahead and an upd ship an update that adds that class because that could be useful okay
um Let me let me back up a little bit and answer Alex's question okay um so she was curious
about um she wants to utilize these this feature that I just showed but she maybe
she doesn't have swatches or maybe she's using a theme and um if she has swatches
but maybe the theme she's using isn't Foundation 6 okay so first thing off let
me say that um swatches are not specific to just Foundation while um you get them
when you purchase Foundation you can actually use them in other themes
okay about 90% of them okay there are some that are very highly specific to
Foundation but generalized things such as background color and font size and
you know rounded corners or margins and padding and um display showing and
hiding things those are all very generic things that you can actually utilize
those swatches in any theme okay now I don't want to go down that rabbit hole today because I that would probably take
me another hour okay to kind of showing off on how that can all work but I do
want to mention that um while if you own Foundation um you're not limited to
using the swatches in just Foundation because they it is just CSS and CSS
works everywhere use them in Foundry use them in your favorite theme use them in Source use them in whatever
okay a majority of them will work um I I can't say all because again there are
some things that like the menu Swatch is highly specific to Foundation okay um
but a lot of the most of the swatches um i' I'd probably say 85 to 90% of the
swatches okay um are completely generic so um you can use them um
wherever so um as long as those other places that you're using it support a class and class is an option inside of a
default stack setting so um we have access to a class pretty much everywhere
okay so um yeah there we go and if you don't have Foundation 6 um and you don't
have the swatches then you can just learn CSS and you can use the classes
that I've defined in the blog list in your CSS um I just think swatches are a
powerful way for you to um create CSS without having to learn the
syntax and all the options because sometimes you're like you don't know all the options I've I've done all the work
for you in swatches so um whether or not you use Foundation 6 to build your websites or not swatches are powerful
and um I'd say purchase Foundation 6 if you even if you want to use a different theme for swatches to use everywhere so
there we go um let's head back into
um the next demo okay and this next one is a pretty
interesting idea and it it also is using did I hold up let's see if I saved
a little bit it saved me some time here I didn't save it of course I didn't save it okay we're going to build out
something here okay
um let's just go ahead and add a little bit of text I'm I'm not trying to win some Design Awards right now I just want
to show you some cool functionality okay and uh let's go I'm going to build the
admin interface and the content interface all on the same page
here okay I'm going to show off two um things
uh right now the first is um I don't think a lot of people use the admin
select box
okay um and so what this select box does is it allows you to um
customize a bit of text or a different way of saving text in total CMS it B
basically allows you to define a static set of text that user can select okay um
so let's just call this select let's just keep it that select your option then what we're going to do here is
we're going to add options okay so option one um let's just do something simple we're going to do background
colors okay so let's just go ahead and do red and my value is going to be red
okay um and uh we'll do I don't know blue okay just keep you can have as many
many uh ones as you want here we'll do one more just so we can we'll do
green
oops okay and because we need to be in order RGB red green blue okay um I need
admin core on this page uh let me put in my
license okay and we'll need CMS core on the page
not that CMS core we need this CMS core and I need license in
there there we go and boom boom okay so we have content area and the admin
area now um if you're aware we can um this saves text to Total CMS right I'm
Shar yes okay I thought I wasn't sharing my screen for a second
um so this select box will save CMS and just to prove it I'm going to go ahead
and we're going to add in um a macro up here uh actually this go ahead and
uh we're going to use the Tex stack okay and I'm just going to
display um it was select okay
yeah plain text okay uh we're going to do that
okay so I'm going to display the select right up in here okay CMS data select
okay and uh let's go ahead and publish
that okay so um right now the uh this doesn't have anything saved if you
notice there's no there's nothing up there uh let's go ahead and uh do red and I'm going to save that right and
let's refresh the page okay if you notice here now we have the term red
right and if I change this to green and I refresh the page um oops I have to
save it before I there we go save and now the text is green you see that
okay again red green blue it's just a way of saving static text now I'm just
doing a simple oneliner but you can actually save an entire paragraph of content in here okay it could be as
whatever text you want it's just a way of defining um predefined bits of text
for your website now what I'm going to use this for is I'm going to use it to
toggle classes on and off an Element okay so um what I'm going do is
let's go ahead and uh let's save that and let's go over here and I'm going to add a Swatch to the
page okay and uh let's just add again I I need keep using background because it's just a really easy thing to
visually see really quick so we're going to do background and um let's do red
that's a a very bright red where are
my here let's go ahead and we'll use Weaver space
red there we go weer space red and then we need
green and we'll use Weaver space
green if you're wondering this color app is called color slurp I've talked about it
before um and if you didn't know you can easily go ahead and drag and drop you
can create color pets in here and you can just drag and drop those colors into your Color Picker pretty cool um okay so
now I have three swatches red green and blue now let's say I wanted to apply
that to um this entire container why not okay how can we do that well a class is
just a bit of text right um in the HTML
and that's exactly what total CMS can customize so what I'm going to do is in my custom class for this container I'm
going to put in this CMS data selector so let's go ahead and do present CMS
data select okay so there we go there is the total CMS macro that's going to inject
whatever value I add I select to this select box it's going to add it there and actually for
fun let's go ahead and um set this to be uh none I'm can add one more
option okay so we have none there we go so let's go ahead and
publish
that okay so if you see right now the the content is set to Blue okay and you
can see right here and this color is blue and that's because if we look if we look in the inspector for this
container there we go it's right here you'll notice that here oh let's do this
see right oops uh right there oh no I got to learn this see right there all right there we go I keep on forgetting I
got this cool Arrow tool right there is the blue
class okay so if we go ahead and um let's go ahead and change this to be red
and we'll save it okay and refresh the page there we go okay you'll notice that
the background content is red the text here is red right the the text says red
um let's go and inspect and what you'll notice here is boom right see right here
there it is red that red class is getting the the class definition from
our Swatch and it's applying the background color again you can apply whatever Styles you want um it's just
backgrounds really easy for us to visually play around with and
test pretty cool right and again if you notice here I said none so I'm going to
go ahead and remember none saves an empty string to the CMS so let's go ahead and save that and refresh and
there we go everything is now it doesn't have red green or blue class pretty cool
now this concept isn't limited to just the select box okay um for fun let's go
ahead and I'm going to go ahead and add in let's add in a text admin
area okay and I'm I'm going to make this actually select as well right I this is going to
edit the same CMS ID as the select box okay normally you won't have two of these on the same page U let's go ahead
and make that a plain text editor we don't need markdown formatting um form
height let's just do one line okay and let's go ahead and publish
that okay so right now um this and this are actually editing the same CMS
content I normally again normally you're not going to have two on the same page that do do this but it's going to be an
interesting test just to show you what's going on I'm going go ahead and select red here
and refresh the page and what you notice here is again this is red as as what we would expect but this text box now says
red okay uh and again because this select uh and this are are editing the
same content right so I can go here and type in the word blue and
save and there we go right so this says blue now if I were to type some gibberish into here um you know live
stream save that um this is the we've now kind of broken our select box
because live stream wasn't an option that I added here right so again this is something you're probably not going to
have both on the same page but I just wanted to show you that you can actually use this to add to classes as well now
if we actually were to look at this uh we would notice that the classes live and
stream okay got got added there it is live stream now it didn't hyphenate
them it it literally put exactly what I typed into that text box into the
classes okay so um very
powerful okay um next up let me see if there's any
questions um Alex says she uses a bwd yes so if you're using a big white dut
theme I didn't know he had any themes maybe he released a blank theme I not didn't know uh T have released any
themes but cool uh so you'll be able to use swatches um in that theme sweet um
and yeah please report back uh your findings if you need any help on the community we'll help you out
Alex uh let let's see uh just inspect it okay
cool next up um I showed select show toggle okay um whoops I clicked that by
accident okay I think everyone probably knows what toggle is right um it definitely is
an easy way to toggle on and off content okay but let's go ahead and do it really quick so um here I'll just continue on
with this page here uh we're just going to create a toggle we're going to call it um here we'll
name it toggle okay the CMS ID is toggle um and the rest these are just
Styles we'll just keep it as the default style now on the content side uh when you add a toggle stack to
the page oops what happened
there all right whatever um so when you add
toggle to the page you have a drop zone here okay and what you can do is uh let's go ahead and and customize this to
be the same CMS ID so we'll do a CMS ID of toggle so you can easily toggle on
and off entire bits of content on your page okay um just by simply toggling
this right now you can also do toggle when enable so you can have when it's on when it's off okay
um so let's go ahead and but right now we'll just do we'll just do that one let's go ahead and
publish there we go so right now the toggle is off so that entire paragraph is gone right I'm going to go ahead and
toggle that on refresh my page and now that paragraph is there okay again I'm
doing this all on one page just to speed things up um you know but you would obviously have your content on one page
in your admin area on a different page right um again I can go ahead and toggle that off we refresh the live page that
content is gone it's nowhere in the HTML it is it is gone it is completely
removed it never gets downloaded it's not loaded in the browser that content does not exist now this is a very simple
example where I'm just hiding a paragraph right um but if you talk to
Chris Powers who's aka the toggle King okay he uses toggles for all kinds of
stuff um to toggle on all kinds of things maybe he goes a little excessive
okay but I I think he's he's toned down his addiction to toggles a little
bit um so yeah toggles are a great way of customizing your layout and it gives
your client control whether or not to display that content right so let's say
they just have a a uh a temporary message they want to display on their website site or you want they want to
toggle on and off different you know content areas on their web pages they
can you can do it with a toggle super easy Chris says never more toggles nice
very nice can never have enough
toggles okay um I'm not going to go into togg toggles I think are a very simple
concept I just want to remind you that they exist all right um next one is actually
there was a couple people over the past couple weeks that um did kind of forgot that some of these Stacks exist let's go
back to blog and inside blog list okay we're
going to go ahead and in here there is a layout
rule okay um so in the blog list um now let's I'm going to remove
some of these stack that I added earlier just to clean things up okay uh let's go
back to the blog test so we can kind of look at that
data all right um let's play with uh yeah
okay just looking at the data here right what uh the layout rule allows us to do
is it'll allows us to customize to some degree um the contents of a blog list
without uh Based on data okay um so for example um let's
say I want if uh we can do logic which has content so if um let's say featured
okay um this is kind of a you could do a lot of this using the classes that I showed earlier actually to be honest I
probably should have started with this cuz it's a little bit more less classy
well not classy but less Cody right um so uh what you can do is you can say if
content has if certain Fields has content or doesn't have content so it's
kind of a toggle if if this field has content display it if this field doesn't have content don't display it sort of
thing right so for example uh let's see do some of these have summary not okay
let's look at this here so this uh this is a test from AP also uh oh this one
has a summary it's test let's go Ahad and I'm going to hide all blog posts or I'm going to hide uh the summary or no
let's hide the image if a summary doesn't exist how about that he so I'm
going to say um if has content
summary okay we're going to display the summary and the image okay so if if
there is if the summary has content display the image and the
summary okay pretty simple let's go ahead and publish
that oh interesting that actually has summaries
oh it does have a summary it the summary is a space H interesting technically does have a
summary um okay uh let's go ahead and did any of
those actually not have a summary at all uh okay here let's find something else
uh well or we could do we could do here right draft right so
if something was a draft or if author existed oh author didn't exist on some I
saw I know author didn't was blank on some so let's go ahead if it has an author show the image okay how about
that there let's publish
that there we go right so a lot of these didn't have an author set and so since
the author wasn't set the image is hidden and the summary is not displayed okay that I don't think that's a valid
use case um I just wanted to show you how you can customize things right um
now I I I will foreshadow some features in total CS3 will have much better control you'll even have the ability to
say like if author is Joe Workman then do this right so you can do stuff like that that'll be in total CMS 3 um it's a
much better uh syntax and and we have a lot more flexibility with that okay but
we have we do have the ability to have this you know if this field has content or if this field doesn't have content
sort of sort of stuff right so there we go layout Rule now um I also want to say
on the blog post page so that what I just showed you was on the blog list page okay on the blog post page we also
have a layout rule which is actually a little bit more
um powerful than the one in the blog list okay um so the blog layout rule
here you can actually filter by author so you can actually do stuff like if author is Joe
Workman okay and then whatever you add into here it'll get actually it'll only display it if the author is Joe Workman
okay um so again you can do uh authors categories tags um you can you can
search uh so you can search various fields for content right so you can be
like if the author um has Joe or something like that or if the content
has the word um hello okay um you know if the content contains the word hello
then use this layout rule right um You can do empty let me turn off some of
these so it's less confusing so you can say if uh you can base content based on maybe if um
media field okay here's actually a very uh a useful one uh if the media field is
empty okay U actually we want else logic here um so lot let's say for example in
the media field of a Blog you put in the URL to a uh MP4 video that's hosted on
the server okay or maybe a a YouTube video ID or a vimeo video ID something
like that right um if it's not empty okay then we want to display that right
so let's go ahead and let's do like um uh video or we'll just use the
foundation 6 video you can use any video stack though right um and and inside
here uh you would put the video URL and you would put in
um what was it uh dude I don't remember the was it media let's go ahead and add
macro hints let's go in here blog macro hints and I need the uh blog Media I
think it is oh here blog Media strip HTML oh here
or actually we just need blog Media there we go so we're going to go ahead in here we're going to go here and we're
going to do percent blog Media parentheses there we
go so now okay all we don't need this macro
hints now if there is a video or if the video is empty I I I want nothing right
or maybe you want to display an image or something like that um but if there isn't or if there is a video then it's
actually going to load the video URL that we've added to the blog post inside
of this video stack right um so very powerful here uh
I think this exact solution was for somebody a couple weeks ago um he was using my HTML 5 video stack and he
wanted to display it based on if the URL to the video was in the media field and
this is EXA the exact solution you need okay um other things you can do with
layout rules okay um is you know obviously things like if it's featured if it's draft if it's archived things of
that nature and genre or label so you have you know the ability to really customize your blog post uh Pages Based
on data okay all right um and that actually
reminds me on the content side there is actually a hold on I think there
is uh before I yes okay there is a stack called
select show okay it is a total CMS content stack I almost forgot this
existed actually um so let's go ahead and add that to the page
okay and what this allows us to do is it's kind of similar to the um to the
layout rules let's clean up this page a little
bit yeah and that what you can do is you can say um if total CMS ID so let's do
like select if it's equal to Red okay and you could do equal to
greater than less than contains string not equal to right so if the select box
equals red okay okay um this is something we can test really quickly let's go ahead and display uh here let's
go ahead and display
this red all right let's go ahead and publish
that right so let's go ahead and set remember if we set it to Red I'm going to save
that if you notice here now we have this this header I am red along with all
those Styles we had previously right but I'm displaying this content I am red and
that's only because this select was set to be red if I change it to Green oops I need to actually
save you'll notice that IM red doesn't exist right so this um where was this
select show stack is kind of like a a a layout rule that we have in blog but
it's for any CMS text content which is pretty powerful any
non-blog content you can use select
show okay um there were a couple other total CMS
that AR necessarily related to layout stuff but there were some questions that I I wanted to resolve today and to kind
of teach you and the first is on a blog post page okay
um let's say actually here let's go here let's say uh I wanted
to display on my homepage I wanted to display the latest blog
post okay um so what I'm going to do is um I'm going to go ahead and add the
blog post stacked to the page page and uh let's just go ahead and add image as well okay and Foundation
6 so um on my homepage I don't want to pass a permal link equals I I I just
want it to always display the latest blog post how do we do that so you add
the blog post stacked to the page uh and you give it your blog I think my CMS ID is blog okay um and then what we're
going to do is we're going to use these settings here called total blog Dynamic post
filter okay and by default it this is actually already set up to display the
latest blog post so what we're going to do is we're going to order by newest um think of this as these filter options
are exactly the same as what we have in the blog list stack so picture you're building out a
blog list but then only the very first result is what the blog post stack will
get and display hopefully that makes sense so here I'm saying filter all the blog P
blog posts order them by the new by the newest so I want the newest
first um and you know include featured include drafts hide archives so on and
so forth and then display um the first blog post so let's go and publish that
and have a
look
turn those keys off
oops oh did I not publish thought I
published was it not blog what's the CMS ID here
that's blog that's
weird here let's go ahead I'm going to going to hide all that
hide and here for fun actually I need to say we're in Foundation just go ahead
and add that in the container let's publish that
interesting let's look at my my filters here newest uh oh only P I think some of my
dates on my posts are are messed up let's do all
posts again my test really funky
so what uh include featured hide
drafts hide
archived CCD blog
huh man see look at that even even things for me mess up sometimes find republish all files there
are no change there whatever
what a rookie what's going on here let's go
ahead and I'm going to I'm going to put in a blog
list only past
posts newest first featured before all
posts huh yeah let's go ahead and let's just say random post why is that
not something break very
odd oh oh my blog list showed up what the
heck man I got egg on my face right now they're no wonder my my this was
actually uh to help my dad he was like Joe I need this and I was like ah it's easy just do this and uh look at that what the heck's
going on here boom that does not
work hm
well very interesting did he preview the
post No it should it shouldn't matter uh previewing the post because the post
page is the same oh darn
it you have to set look oh you have to set blog post to Dynamic post totally
forgot about that by default it's going to it's going to query the URL for your blog post you have to set it to be
dynamic post see man what a rookie set the blog
post to be a dynamic post then you can use these settings so now I if I want newest I can go ahead and go to newest
oh Jesus look at that go through the settings Joe go
through the settings and there we go there's there's the the the newest blog post right now uh if you wanted a random
I think that's kind of a cool thing too set the order to be random let's go ahead and
publish now every time I load the page it loads a random blog
post there we go
okay so that was the key set the blog post to load dynamically instead of loading it from the
URL duh okay um one
other thing oh oh Dave hitting I don't know Dave if you're here um but Dave
wanted the ability to um so he he's building out a Blog
okay and he kind of has like an old school layout that he's trying to build and let's just quickly build out a two
column here you know like the really old school layouts where you have your blog post but then over here on the sidebar
like you have like a list of um like all your archives so like you can like link
to all your blog posts from January of 2020 or whatever right um so I don't
newer blogs don't really do that but he had a requirement that a customer wanted that um so yeah it's possible a total CS it's
been there for blog since day one uh and you do it through the blog filter stack
okay so if we go to blog filter set this to be blog and what you're going to do is
you're going to set the blog list URL to be your the when you click on a link this is the blog list page it's going to
go to okay so in my in my case we're going to link to uh blog test
okay set that all right and then in here what you can do is we're going to we want links so I want to display a list
of links and in this case I wanted there's all kinds of stuff here you can do
categories categories with authors underneath you do Al a lot of really cool stuff here but what he wants is
here month and year okay so data type month and year uh and then there's
always the very first link should link to like all post right so uh that's your label for that
you can also include totals excuse me um and we want to do
all posts include featured okay let's leave that and my two column I don't want 50% 50% let's go ahead and do like
column one is like uh 75 there we go let's do that okay um so
let's go and publish that
uh so let's go ahead and click on a blog post [Music]
and wait what didn't I add that to the blog post
page
not
how come I'm not seeing my going on
[Music] here that's
weird I even getting my new layout man I am just striking out this afternoon this
do a new private window oh it's linking to sandbox.
joe.net how did I go there that's
weird uh let's go to pre back to preview oh it's because my blog post URL
is funny okay uh I know why it did that um
if you these if if I click on a blog post it's linking to my online version not my local
version so let's let me just go ahead and change this to be preview there we go all right well that
image looks like horrible but we notice here on the side which is the the lists that we created we now have a list of
all links with archives and even has little totals which is pretty cool
if I go ahead and click on that let's say like December 23 um it displays all of the blog posts
for that date if you're curious how that's done
if you look over here it's just uh you can look at the URL query parameters and
you can pass year and month to uh to a blog list page and it'll filter by that
year and that month so like if you wanted everything that was 2023 you could you could do that and get
everything that's year 2023 pretty cool another Power I don't think I've ever actually showed anyone
that um it's kind of a a dirty little secret um so there we go um
and let's go back to this page um there are other things that you can do with
blog filter um so like if you didn't want links you can actually do a filter select as well um and then this filter
select uh will'll do uh can you do oh you can't do dates with
Filter select the filter select only allows tags and categories and authors um but let's say if you want it there if
we do tags right uh let's go a and publish
that and refresh this page you'll see now that it will list all the all of our
categories here okay and so we can like you know click and easily see all the
you know we click on that uh oh if you want the uh the box to automatically
submit when you select change go ahead and in blog filter say Auto submit on select change um and then whenever you
change one of those select boxes it will um automatically subit that right so we
can go ahead and go to let's say oh I need to refresh my page I go ahead and
go to blog right it'll Auto submit and it'll it'll take us to the blog list page and it'll filter by the tag of blog
right in this particular instance there's only one post but there we
go cushioning setting yeah I I again I'm not trying to I'm not trying to win any Design Awards on right now I'm just
trying to show you the functionality so yes there needs to be this here this image needs to
be uh oh Foundation 6 support here
publish uh now we have that sidebar that has you know all these filters uh now it's kind of cool um here let's go ahead
I'm going to copy this layout over to the blog list
page although I don't want the blog post stack I want the blog list and I want to
put that oops the
heck log list there or we don't want this uh
okay oh oops categories tags all right so here I have
two uh filter selects um in the sidebar of this blog list page uh let's go ahead
and make sure that I filter out the right page yes there we go all right and
then I also have this Auto submit on select change let's go and publish
that oh let's go and remove this layout rule really quick one second all I don't want that
anymore uh let's go to blog content all right okay so here we are on a blog list
page so here's all my blog posts okay and then over here on the sidebar I have various selects here's it it shows us
tags and here it shows categories what's kind of cool is if we go ahead and do
like blog okay and if I go to category I can do like well if I did category blog
uh well there's no post found so but what I wanted to show you is these will build upon each other okay um um so if I
did all tags your email uh that's F oh I removed tag here let's
add the tagging categories so we can kind of see what's going on
here so when you have multip multiple selects inside of the same BL filter
they will it's like an and logic right um so it'll combine the two into one
filter uh which is interesting so here um now we see let's say this one has
hipster and and blogs okay so let's go ahead and let's do tag of hipster and
category of blogs well that's the same one but uh if you had a lot and I don't have a lot of blog posts here right so
um is there anything let's see I have cat one cat 2 I don't have anything great
here oh here this one has mercury oh they both have the same category of blogs never
mind um now let's say you wanted to have these work independently of each other
so you wanted to have a filter for tags and a filter for categories but you didn't want them to have that and logic
uh what you would do is you would just simply have multiple blog filters so uh so they would be inside their own
dedicated blog filter stack so now I have tags and category but because they're a part of their own dedicated
blog filter they're independent of each other hopefully that makes
sense sweet uh I think that does it for all the uh the coolness I wanted to show
off today um again I I didn't I didn't show any polish today I wanted to show
you how total CMS can be used um you know just as raw data to uh you know
filter out and customize your layouts you build your layouts um this these are
just tools that allow you to customize them um using either swatches or you
know completely shower or hiding stuff um so yeah I hope you enjoyed that I did
promise we were going to do a couple trivia things okay so uh give me one second I want to verify the answer to my
first question really quick and uh let me go ahead and verify this really
quick
H that doesn't answer it for me
though one second I need to give me give me a second sorry about
that
the heck's going on here my internet just no I'm still
streaming there it
goes H okay got it I was actually wrong so interesting
okay right question number one okay so the I've never done this before the
first person that answers it correctly in the chat will be the winner and you will win a $10 uh $10 on Weaver space
okay um hopefully I'll recognize your name I'll find you if actually here if I
say you win message me on Weaver space and I'll give you I'll send you your $10 store
credit okay um question number one We Ready
drum roll okay what year was Stacks 1.0
released boom I'm I'm waiting I'm waiting what year was Stacks
released
no oh man a lot of guesses no one know it everyone's dancing around the
years Stacks 1.0 when was the first public release of
stacks 1.0 I see a lot of dates but none of the right ones
yet but boom Jason Fox 2009 Jason
Fox you got it good job Jason okay okay I promise
we'll do two okay next
one what was the name of the first stack that I publicly
released
this one's I think this one actually might be harder than the than the sweet button nope wasn't sweet
button the very first stack I released in 2009 I should have known Stacks was 1.0
was 2009 because that's when I shipped my first stack too nope wasn't
Jack NOP Foundation came a long time after after Foundation didn't come until
Stacks three I think total total cms3 yeah Bill you're
you're fired Bill smartass responsive grid
nope it doesn't I'll give you a clue it doesn't even exist anymore I don't even sell it
anymore it does not exist
but the jock Bill Francis was actually close with total CMS 3 my first stack
was CMS related pen nope my first stack was CMS
related nope and I'll be honest my first stack was one line of
HTML that's it that's all it was
page lime uh close it was actually a predecessor to page line page line was my next instance easy CMS
nope I don't even know if if people even remember this
one I might have to have a backup question
here all back backup question okay let me let me think of a u of a backup question
here I wasn't I wasn't prepared I thought someone would know actually know that question
um let's
do all
right okay okay here Here We Go Global content nope all I'll I'll if
anyone if anyone answers that question before someone answers this
question I'll give you $20 if you answer my the name of my very first stack okay
but question number two then all well question number three a what year we
we'll stick with the year ones what year was Foundation One released
how about that my Foundation One Stacks what
year 2012 no found ation
1.0 man I've seen a lot of years but none of the right ones that's
hilarious Scott Williams he gets it 2014 okay okay Mr williamss you win 2014
it's funny how many people answered every year all around
2014 okay um my very first stack that I released was named kushy
CMS um yeah cushy CMS and uh it was it allowed you to edit your content you had
to log into cushy cms.com I does that even exist anymore I doubt that
exists cushy cms.com holy sh holy crap the website's still
up there we go it and they have the sofa too and everything a truly simple
CMS wh what you could still use this no way it's still like
operable for $28 a month so yeah uh it allowed you to edit your
uh content uh online um so you you know you could define basically what you could
drag Stacks into the cushy CMS stack and then you could edit it on cushy cms.com now the the the thing was is now this
was the horrible part of the stack which is why I don't sell it anymore was once you published um you were like done you
couldn't publish it again because it would override whatever cont you edited via cushy CMS so in that respect it was
a horrible stack but uh yeah kushy CMS was my very first stack uh that I made
um and that graduated into page line which then had the ability to um you
know still publish and not lose your changes um and then page line went Belly
Up and ultimately that's what led to Total CMS um so yeah there we go cool
yes cool Iris was my second stack good one Mark uh that's another one that doesn't exist anymore let's see if their
website's up cool
Iris oh apparently Firefox Firefox owns acquired
them wait oh that's the app it's like on I don't
know I don't think cool iris is still around if anyone's not doesn't know it was like this photo wall thing that you
like it was like a flash plugin basically um that did all kinds of crazy
[Laughter] stuff so there we go well that was fun what do you guys think of the the trivia
at the end I I think it's kind of cool I think we'll stick with it uh I like it so
um yeah uh what was it uh Jason Jason Fox and Scott Williams I will uh I'll
send you guys your your $10 so you guys were the winners today um we'll keep
that up I'll have to I'm not sure how long I can go and and keep thinking of trivia uh we might need to start
eventually diving into uh what's the CSS to do this or something like that I don't know I don't know how much trivia
I can come up with but there we go um wh while I got your ears um so Elixir
uh if you saw my post yesterday um I think it was yesterday right I think it was yeah it was yesterday morning he uh
he added a post and uh he will not be porting uh Foundry uh as of his post
over to rap Weaver elements so that's uh that's very interesting news uh I won't
give my comments right now on that if you want uh some candid commentary about
that we can chat about it on Friday um I think it's good news um and uh I think
it just shows you how powerful Stacks Pro is going to be uh when we get to see it at the summit uh and hopefully you
got your summit tickets so uh I still have I think I think there's two or three speaking spots still open so if
you're are uh wanting to share your knowledge the stuff you got up here in your Noggin uh let me know and uh you
can speak get the conference and I hope to see you there um a lot of people already bought their tickets so make
sure that you uh you uh you get your tickets to The Summit as Scott Williams
says it the Weaver space Summit is the best add-on in the entire Stax community
so there we go thanks for that Scott quote I like it so um yeah have a great
rest of your week hopefully I'll see you on Friday at the Hangouts and uh go out there and make something great bye