Transcript

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