0:09 what's up guys
0:10 joe here now i wasn't really prepared to
0:12 do a video today so you kind of get
0:13 casual joe today but at least i got a
0:15 cool hat on so
0:16 that makes up for it right so yesterday
0:19 uh i released total cms 1.8
0:22 and i kind of leaked it had a little
0:24 surprise in it
0:26 and um this is a new stack called total
0:29 loop
0:30 and it's pretty cool it's very powerful
0:33 um but i do have to admit it's
0:35 definitely meant for
0:37 probably more experienced users okay
0:40 um if you're not experienced feel free
0:43 to watch this video
0:44 i don't think it's too difficult to use
0:46 to get your your
0:47 head around but um you know it
0:49 definitely is
0:51 geared towards more advanced users
0:53 because um
0:54 it really relies on you building your
0:56 layouts and you doing a lot of the heavy
0:59 lifting in terms of the styles and the
1:00 layouts and the content and stuff like
1:02 that
1:02 just kind of gives you the data okay so
1:06 essentially what this does is it allows
1:09 you to
1:10 um create custom layout sets
1:14 based on data from total cms
1:18 what could this data be um it could be
1:21 uh
1:21 blog categories it could be blog posts
1:25 could be blog tags it could be blog
1:28 labels
1:28 genres authors i even have a use case in
1:32 there of
1:32 gallery now that one's definitely um you
1:35 know
1:35 more involved and probably more
1:37 difficult to use um the things that are
1:39 probably the easiest are
1:40 blog categories blog tags blog authors
1:44 labels genres stuff like that those are
1:46 going to be pretty simple to do
1:48 or or relatively simple compared to
1:50 doing something
1:51 like doing using this
1:55 for blog posts instead of using blog the
1:57 blog list stack
1:58 okay i mean you could you could
2:00 potentially use this instead of the blog
2:03 list stack
2:04 build your own custom one but it
2:06 wouldn't be too
2:07 too easy so um anyway without further
2:10 ado let's jump in i have a really cool
2:12 you know nicely styled example um so
2:15 let's uh let's go ahead and play
2:20 now here is just a simple web page and
2:23 it has a blog list up here that lists uh
2:26 some sample test data
2:28 and down here what you'll notice is this
2:30 is a
2:31 very nicely generated grid
2:34 of all of the categories within this
2:37 blog
2:40 so you know right now we have the access
2:42 to like the blog filters and we can have
2:43 a list of categories
2:45 that you know just has a ugly list right
2:48 but this you can we can now with this
2:50 total loop stack
2:52 dynamically generate um
2:55 very nice looking layouts for things
2:57 like categories or tags and things of
2:59 that nature
3:01 it was cool is if i click on this it
3:03 will dynamically filter this blog list
3:05 so it behaves kind of like you know blog
3:07 filter does
3:08 but you know this allows us to have full
3:10 customization over the layout
3:12 okay now this is using um total cm or
3:16 i'm sorry this is using foundation
3:18 six is block grid okay so essentially
3:21 what's going on is this is actually
3:23 using a block grid and creating one of
3:25 those dynamically on the fly
3:28 um so that's what this can do for us
3:31 let's go ahead
3:32 and look at wrap reaver and see how this
3:34 is accomplished so what's really cool
3:36 about total loop is that it integrates
3:38 with the existing stacks that you have
3:41 now this works really well with
3:43 foundation six stacks
3:45 okay now i can't guarantee how it will
3:47 work on other stacks outside of this
3:49 but um with all of the foundation six
3:52 layout stacks such as
3:53 you know columns pro block grid maybe
3:56 even a button group right you can create
3:58 um these dynamic pieces of content
4:02 using total loop so here i have a block
4:05 grid
4:06 and if we look at this layer let's go
4:08 ahead and look at that
4:11 web page again we'll notice that this
4:13 very first one
4:14 is is an all category it's kind of like
4:16 you know kind of reset to go back and
4:18 that's just static
4:19 right so this one's is static then all
4:22 the sub
4:23 subsequent categories are dynamically
4:25 generated so here we have in this block
4:27 grid the first cell in the block grid
4:29 is a static one and i just have all now
4:32 i'm not going to go over how i built
4:33 this layout um it's just a you know kind
4:35 of traditional um
4:36 layout where if i hover over this column
4:38 will be displayed
4:40 on hover and when you unhover it's just
4:42 the picture is displayed
4:44 right now if we go over here
4:47 if you notice instead of a block grid
4:49 cell i drag in a total loop
4:52 directly into block grid at that point i
4:56 build in my block grid
4:57 cell inside total loop and essentially
5:00 whatever you put inside total loop
5:03 it will duplicate that layout for every
5:05 single item
5:06 in the data set that you you want it
5:08 configured
5:10 so if we look at total loop this is
5:11 currently looking through blog
5:13 categories right so you put in the cms
5:15 id of your blog
5:16 you have blog categories you can have
5:18 all kinds of other filter
5:20 uh settings this the settings for this
5:22 are identical to blog
5:23 filter and also to the you know the
5:26 foundation six menus integration
5:28 where you can you know hide featured
5:29 stuff you can do all that jazz
5:32 now if you're using blog uh stuff here
5:35 you can you can set the blog list page
5:38 if you leave this blank it will use the
5:40 current page you're on
5:41 um you can set up acronym and word
5:43 formatting just like you could
5:45 in the filters in the foundation six
5:47 menus
5:49 then we also have the ability to do blog
5:50 posts okay so you can limit the number
5:52 of blog posts that are displayed if
5:54 you're using that method
5:56 now with this it is limited you don't
5:58 have access to like things like load
5:59 more and stuff like that like you do in
6:01 the blog list it will just display
6:03 everything okay um this only generates
6:06 html
6:07 there's zero javascript zero css
6:11 and let's just look at this really cool
6:12 so we have our block grid cell
6:14 okay and i have some classes um but
6:17 again i'm not gonna really review any of
6:19 that
6:20 inside of our link container you'll
6:22 notice that i'm using some macros here
6:25 so in the url i'm using this macro which
6:28 is
6:29 curly brace curly brace url very similar
6:31 syntax
6:32 to the blog list macros
6:36 the exact same syntax and i'll show you
6:39 which macros are available and how you
6:40 can determine which macros are available
6:42 depending on the data set that you're
6:44 using
6:46 so um here is the first one i'm using
6:48 and i'm using the url inside the link
6:50 um in the header i'm using the label
6:53 in the uh header below that i have i'm
6:56 specifying the count
6:57 because if you notice i have the count
7:00 available
7:01 so if we go back and i hover over you
7:02 see i've entrepreneur which is the label
7:05 one available because there's one blog
7:07 list in there
7:09 or i'm sorry there's one blog post
7:10 within with that category
7:12 but if we look at something else like
7:14 vacation if i click on that
7:16 that has three and if you look it says
7:17 three available
7:19 so we have access to a lot of other a
7:21 lot of kind of metadata within this
7:22 uh which is really nice and then if we
7:24 look at the picture
7:25 um essentially the picture um is using
7:28 warehoused images
7:30 and if you look at the url here it's a
7:33 common url so essentially i've created
7:36 a gallery here that you know i know the
7:40 url to that gallery
7:42 and if i name the images properly
7:45 um if i name the images with the slug in
7:48 the name i can easily determine the
7:50 images that we want here
7:53 so if i go back here for example
7:56 um this image that's here is called
7:59 dream.jpg
8:01 this particular image that i added to
8:02 the gallery is entrepreneur.jpg
8:05 right hangouts.jpg and we can look at
8:08 those here
8:09 so if we look at those images we'll see
8:10 that i named them to be
8:12 exactly what the particular category
8:14 that that
8:15 image is associated with in the gallery
8:18 so that is a trick you have to make sure
8:19 that you name the images
8:22 perfectly okay and then um here just on
8:25 my little sample page you see i
8:26 i just it's just a normal gallery it's
8:28 not associated with any blog posts
8:30 it's just a normal gallery um that i
8:32 uploaded all those images to
8:35 okay
8:38 and then here i i can easily determine
8:40 the
8:41 urls to those images um
8:44 and simply because i know the name is
8:48 going to use part of the macro itself
8:52 um we can then determine that with the
8:55 slug
8:59 okay so how can we determine uh what can
9:02 be done
9:03 what can't be done what macros to use
9:04 and what macros we can't use
9:06 okay one thing i should also note is
9:10 that unfortunately total loop does not
9:12 work in preview
9:13 so like if i were to preview this page
9:15 here you'll see that um
9:18 we really we kind of get this somewhat
9:21 of a
9:22 of a layout right but it has just all
9:23 the macros it's just
9:25 um basically it takes literally it takes
9:27 the macros
9:28 um and puts them in there for you um so
9:30 it does have something in preview but
9:32 not much
9:33 uh once we publish this page you'll see
9:35 what it what it is um which is
9:36 what i showed you here this is the
9:38 published page okay but we have some
9:40 um some helper uh functions in here that
9:43 allow us to know what data we have
9:44 access to
9:45 okay because um if we look at this grid
9:48 up here i'm going to go ahead and
9:49 unhide this we'll see that here i have a
9:53 total loop that goes through blog
9:54 categories
9:56 but at the very bottom here there's an
9:58 advanced setting called enable dump
9:59 macro and when you enable the dump macro
10:03 you can use this special macro only when
10:06 that setting is set
10:08 and it uses three curly braces and the
10:11 word dump
10:12 okay so three curly braces and a dump
10:15 let's go ahead and publish this online
10:17 okay here i've published that online if
10:19 we scroll down
10:20 we'll now see that we have this
10:22 additional grid that i
10:24 unhid and with that dump macro
10:27 where you know where the corresponding
10:30 layout that we want is
10:31 in this grid i'm just putting out a dump
10:33 and what we can see is we can see all
10:35 the data
10:36 available for each individual category
10:39 in this case i'm doing categories so
10:42 here we can
10:42 see that we have available url slug
10:45 label and
10:46 count that's all the data that we have
10:48 access to
10:49 for when we use categories now uh you
10:52 know it's smart to do this
10:54 on most blog attribute level things
10:56 these are probably
10:57 these are most likely all the attributes
11:00 that you have access to
11:01 but things like blog posts and galleries
11:03 are gonna have a lot more
11:05 okay and some some of the things like
11:08 history
11:09 um won't have a label um it'll just have
11:11 a slug
11:12 um so you know definitely make sure that
11:14 you check out
11:16 um you know the dump for whatever data
11:18 set that you're using
11:20 so that you can actually you know know
11:22 what data is
11:23 access actually available to you um and
11:26 essentially all these are just macros so
11:28 if you wanted to put the url you would
11:29 do curly brace curly brace
11:30 url curly brace curly brace so similar
11:33 syntax
11:34 but you would put in the name of the
11:36 attribute here
11:37 and that will be put directly into the
11:39 html
11:41 right so as you see here um this doesn't
11:44 give
11:44 us give us anything about images but
11:47 based on the slug
11:49 i know that the gallery name that i
11:51 added was entrepreneur.jpg
11:55 so that i can use that image and
11:57 reference that because
11:58 i'm referencing in the slug of this
12:01 particular category
12:02 so again if you make sure that you
12:05 upload the images
12:07 or anything else maybe a file as well
12:09 could be done
12:10 right um if you upload a file or image
12:13 or whatever
12:14 and you use naming standards um you can
12:16 do some really cool stuff like this
12:18 now a cool tip that i what i did uh
12:20 building this
12:21 layout here was before i built out the
12:24 total loop
12:26 okay what i did was let me unhide this
12:28 grid
12:29 on the bottom and basically i built out
12:32 a block grid
12:33 with what i wanted it to look like
12:37 with just straight static text
12:40 and then and then once i got the layout
12:43 and the content that i wanted
12:44 i then you know injected all the various
12:47 macros into it so i changed
12:49 this header to be labeled and i changed
12:51 the number in this
12:52 one to be the count right and then i
12:54 went inside the link
12:55 stack and changed the the actual link to
12:58 the url macro
13:00 and then i went to the picture stack and
13:01 changed that to be warehoused and i put
13:03 in the url
13:04 with the special slug in there to make
13:06 sure that it matched the image that it
13:08 uploaded to the gallery
13:09 right um so that's a that's a cool
13:12 useful tip right there
13:14 to help you you know generate these
13:17 layouts more easily
13:18 and again this example just uses block
13:20 grid but we can do use
13:22 any of the foundation six stacks works
13:24 great with them
13:25 so i i would try columns pro would be a
13:28 good one
13:29 um i did a nice example yesterday with a
13:31 with a button group
13:32 so we had you know just a button in a
13:34 button group for every single tag or
13:36 every category
13:37 um really cool idea um so yeah this is a
13:40 really powerful stack
13:43 so there you go that's total loop um as
13:45 you see it's
13:46 it is pretty powerful but it's also uh
13:49 you know semi-basic
13:50 um i think for um more experienced users
13:53 as long as you're not scared of
13:55 especially of those macros right and
13:56 kind of
13:57 digging into um you know foundation now
14:01 i'm using foundation layouts here
14:02 because i think you know those are
14:03 really nice you can
14:04 really nicely dynamically build out
14:06 grids and columns and stuff like that
14:08 with this
14:09 um if you didn't have access to that you
14:11 could probably use you know
14:13 you could definitely use just in normal
14:14 stacks just maybe a stack on top of each
14:16 other or something like that but
14:18 um you know i think the power is really
14:20 with foundation six here using
14:21 with total loop um again it it could
14:25 potentially work with
14:26 other things out there but i haven't
14:27 tested it out so i'm excited to see what
14:29 you guys build with this
14:30 um i kind of released this quickly
14:32 because i wanted to get it into your
14:34 hands to see what you guys can do with
14:35 it
14:36 um and see what you build and get more
14:38 ideas and see what
14:39 we can tweak and add more features and
14:41 make it even better in the future so
14:43 i hope you enjoy total loop experiment
14:45 with it play with it
14:47 um talk amongst each other on the
14:48 community and get ideas
14:50 um on how you can best use it and i
14:53 can't wait to see what you build
14:54 so i hope you enjoy it we'll talk to you
14:56 soon bye
15:02 [Music]"}]