0:10 been since we uh went live it's been i don't know maybe a little over a month four or five weeks

0:15 something like that a little longer excellent

0:21 uh just some confirmation in the chat as usual that everything is golden let's go ahead and

0:28 make sure this is all working okay

0:38 excellent mr cole sean excellent everything's good on a visual looking good sweet

0:44 dr bob going i just saw your post on the community i uh i'll try to answer it

0:50 later i haven't even read it yet okay

0:55 so man exciting it's been uh it's been a while excellent jody thanks for coming on tony

1:02 aloha hopefully your everyone's doing well

1:07 um now what i'm going to show today is if you join the hangouts maybe the past couple weeks you've probably seen it

1:13 um and uh yeah it's pretty cool we got a cool new stack called feeds out

1:19 and uh i have i've wanted to build this stack for a very long time actually like years and

1:26 years um but you know i just kept working on total cms and working on uh foundation

1:33 six and um i'll be honest part of me didn't want to release because i was like well i don't

1:39 want it to eat into total cms but total cms has really

1:44 um obviously become a very mature product obviously i am still working on version

1:50 two uh and you know i i while you could use this for some total

1:57 cms esque things um it they the two products really complement each other and i think that

2:03 uh a lot of users are going to use probably use both on a website it could be you

2:09 know um so yeah we're going to show you how um

2:15 how we're going to use feeds to import csv files to import rss feeds so

2:22 actually but way back in the day you know you're probably aware if you've been around for a while i used to have a whole suite of rss stacks right

2:30 and unfortunately like the the yahoo apis that i was using because you know

2:36 yahoo's kind of been bought and sold all over the place all those apis got shut down

2:41 and uh so all of my rss stacks were dead and

2:46 i just never got around to building new ones well this is our new rss stack and

2:51 you can kind of do whatever you want with it it's pretty awesome

2:56 um so yeah scott's here he's done some really amazing stuff with the beta version already so um it's it's pretty

3:04 cool um so yeah anyway getting back csvs rss feeds

3:10 um json which is definitely kind of more developer centric but it's a it's probably the standard way on the web to

3:18 communicate via websites right is json it's uh it's a very great serialized language that

3:24 allows you to have complex data um

3:31 easy to programmatically parse through okay total cms uses json as well so um it's a

3:37 very uh a very popular format or along the around the web you've probably heard of it

3:43 um and it's very human readable as well which is nice next up is databases

3:49 okay and i know we've a lot of people have wanted um a suite of stacks that

3:55 allows you to pull data out of a database and we finally have that feeds is very powerful

4:02 with that um and i added support for pretty much every major

4:09 web database out there so we have mysql sqlite um

4:15 postgres and sql server so microsoft sql server because i know i was like uh you

4:21 know what someone's gonna ask for it so uh let's go ahead and do that i think the only big dog i didn't add

4:26 was like you know the big enterprise databases like oracle and scibase and db2 and stuff like that but

4:34 um i could add those connectors if anyone ever wants but anyway um let's dive in you don't want to hear me

4:40 talking about it you want to see this bad boy in action so um what i'm going to show you uh is kind of i've been

4:46 working on the demo for the product pages and i would love more ideas i mean because

4:53 this tool is very generic right it just allows you to take whatever data and build whatever layouts you want so um as

5:01 you're thinking or watching me show this demo okay

5:06 uh go ahead and let me know in the in the chat at the end what are the things you'd think would be interesting to see

5:14 okay um because it is very again wide open so i want to show as

5:19 much possibilities of what the stack can do so you guys can get inspiration

5:25 um from it so all right let's go ahead and uh let's dive in

5:31 all right um

5:36 let's see where is oh there it is okay

5:41 let's just open up feeds there we go oops it's opening over here

5:48 all right um and actually i will show you so one thing i um i want to point out before we

5:56 get started okay um let's actually go in now the product pages aren't ready yet okay but i want

6:02 to show you something okay because

6:09 um the there is two two stacks right now that i'm releasing okay

6:14 um so we have the base feed stack and here's the cool little robot icon that

6:20 we have for him he's a he's a cool little dude um so the bass feeds stack

6:27 okay supports csv rss json and actually also integrates with total cms blog

6:35 okay um the database uh connections are an additional add-on okay so i plan

6:43 on in the in the future to add some more feed packs okay um so the first feeds pack is

6:50 going to be a date the database add-on so if you want to use feeds to connect

6:55 to your databases you'll need to purchase feeds as well as the database pack

7:01 another pack i plan on releasing in the future is a videos pack so um that will connect to youtube and

7:08 vimeo okay and think of this as a way of you know creating your own version of a video

7:14 wall so video wall is of one of my most popular stacks it's awesome but um

7:20 i'll create this uh basically a data connector an add-on pack for feeds that will allow you to

7:26 build your own version of that with your maybe your own features your own layouts or your own whatever right so it's kind

7:31 of a build your own video wall um so yeah maybe in the future maybe we'll do like a social pack i don't know

7:38 um i mean integrating with stuff like twitter and instagram and stuff like that is always such a pain in the in the

7:46 rear right it's a pain in the neck you know i just get i get a crank in my neck just thinking about it so i don't know

7:51 maybe eventually something like that could happen but um for now we're definitely gonna have a database pack and i'll definitely have a

7:57 videos pack um so there we go okay

8:03 so without further ado let's dive in and see what

8:08 feeds can do now i'll show you uh basically kind of what i've built and

8:14 then maybe after that we'll we'll implement one from scratch okay and i'll kind of show you the difference the

8:21 differences between the different data types and all that jazz but what you'll notice is there is a

8:27 generic feeds stack okay and then inside there you can add

8:33 different feeds so here i've added a csv feed okay but you could add whatever feed you

8:39 want and the feed and the creation of your layouts based on that data is 100

8:45 independent okay what's kind of interesting is you can actually add multiple feeds so if you want to add a csv feed and

8:54 a database feed and basically what this will do is it'll actually merge all that data together into one view which is kind of cool um

9:01 okay so very interesting um i think most most time we're going to be dealing with

9:07 one single feed okay but it is an interesting idea that we can actually add multiple feeds in there if we want

9:13 and merge them okay into one feed um so the feed stack itself is pretty

9:20 generic so we have the ability to sort our data

9:26 apply some filters which we'll look at in a little bit you can limit your data and then you can do some data preview

9:32 okay and then inside this area here it's very similar to if you've built

9:39 something with like um total loop okay it's very similar to total cms blog

9:45 list as well where you're you build out what one blog post is gonna look like

9:50 and then basically that template is gonna that template or that layout that you build is gonna get applied to each

9:57 record in that particular layout okay so let's preview this page just

10:04 kind of show you what we have all right so

10:09 here is a pretty interesting page that has some various examples

10:15 so up here we have kind of an online store okay and this is all powered and all the

10:21 everything on this page is actually powered by csv okay but the data doesn't really matter and we'll get into that

10:28 okay um so here we have an online store that kind of has the icon it has the title a

10:35 little subtitle and a buy now button right um here we i've built out a whole

10:42 restaurant menu okay so here we have various hamburgers we have the the title of our of our

10:47 hamburger we have um the price and then we have all the ingredients below

10:53 right um so pretty cool uh we have galleries so here's an image

10:59 gallery of some cars i click on it i get a light box with the with the full resolution image

11:07 pretty interesting okay and then we have a really a way to do like a

11:12 and maybe an employee directory or a friends directory or you know my team directory or whatever right so here we

11:19 have a bunch of you know friends of weaver space right so you know you probably are aware of all these amazing

11:25 designers and developers they make awesome stuff for foundation total cms right so this way where we can

11:31 have you know kind of the image of the user their name a little snippet about them and then a

11:38 link to their website right um so really cool this is just three

11:43 again three out of an infinite possibility of what we can do so what we'll do now is let's go ahead

11:50 and dive in and let's look at these examples okay

12:00 so as i said just to keep things simple on this page i'm using csv okay um and inside the csv feed you'll

12:08 notice that you can actually paste in um the csv data directly into here now

12:14 you can also do a file a csv file on the server or you can do a url to a file

12:20 okay now you'll notice when i choose url to file

12:25 right you might see that this url here is to a google docs spreadsheet

12:31 now this will work you can actually get a csv

12:37 url to a google sheet okay you can't do this i am publicly saying please don't do

12:45 that okay i should actually change the the url to this maybe i don't know but

12:50 um yeah google sheets is prone to having tons of issues and when you

12:57 have production data relying on google sheets um it's just it's not if you're gonna have

13:04 an issue it's when uh because google sheets are just known to go down i remember a few weeks ago like for days

13:11 google changed something maybe it was like a week um you know and

13:17 everyone's google sheet stuff broke okay and uh

13:22 yeah kind of sucks so i wouldn't recommend it at all okay but you do you

13:29 um so it's possible to have this in here you can get a url a csv url to your google

13:35 sheet you can put it in here and it will work okay and uh so there we go

13:42 but for right now we're just gonna do all this data here we're gonna do it inside of a paste it locally

13:49 just works best locally inside rapidweaver okay um what we'll do is actually we'll let's copy this here and

13:55 i will uh we'll even open up a little

14:01 file oops just do this can i get this in a new tab

14:07 please jesus come on

14:12 give me a break here all right close it

14:22 there we go finally okay so here we go let's go

14:30 ahead and let's look at this csv data let me give it a little bit bigger so you guys can see it

14:40 okay so here we go you'll see that this is some csv data okay

14:46 and uh you'll see up at the very top i have all of my

14:53 fields okay so in your csv data that the first

14:58 record in the csv needs to be like your the titles of your um of each row or

15:04 each column i mean okay so we have id name

15:09 cart cart loom which is actually the cart loom id okay a color

15:14 and the summary right now you can you can create this with a spreadsheet okay like numbers or

15:20 something like that um you don't need to do a text editor but in this demo i did pretty simple

15:27 data points right so it should be easy for us to for us to see so we'll see here we have uh the id is call to action

15:34 um the that's the name so we have the call to action name um here's my cart loom id

15:42 um here is the rgb color code okay and then here next to that is the

15:48 little subtitle okay and then so on and so forth we have it for each of these okay

15:55 so if we wanted to look at the data really quick for this particular online store

16:02 what i'm going to actually do is inside feeds i'm going to click this preview data okay and let's go ahead and preview that

16:08 again and what we'll see is instead of my online store layout what i'm what i'm

16:14 looking at here is all of the raw data from my feed okay so it's that csv data

16:20 just kind of processed by feeds and displayed in an interesting format okay

16:25 so we can see for each thing i have an id a name a cartoon id a color and a

16:32 summary so this gives us a way to preview all of our data and this is also good if you don't necessarily know all

16:38 the fields available to you you can see we have id name cart loom color and

16:44 summary okay so let's start building our layout

16:52 here so you'll notice here um i do have to say that while

16:57 um feeds doesn't require foundation six the two work so well together just because the way

17:04 foundation 6 is built like you can here we have a feeds inside of a block grid

17:10 and what feeds is going to do is it's going to create tons of different block grid cells right

17:16 that's hard to do maybe not even possible to do with other grid stacks okay um i don't know um but

17:24 yeah foundation six makes that really powerful and easy to do okay

17:30 we'll see some other layouts here that don't necessarily require foundation six but this the block grid one

17:37 i don't know if it does or doesn't work with other other ones um it's possible it will um but it might not as well

17:44 okay so inside what feeds is going to do is it's going to take every single item in that csv data

17:51 and it's going to create a block grid cell for each one

17:58 okay so essentially it's the same as if i were to um if i were to create this block grid

18:05 with an icon and a title and a subtitle and a button and a background color and

18:11 created one for each okay but who wants to do that right because that that just takes lots of

18:17 time so let's create it once so we got i have a block grid cell now here i am using a css box stack

18:26 uh to apply the background color um i tried my best not to

18:31 you know use all foundation sticks you could definitely do this with swatches okay i just wanted to say that you could

18:36 use swatches for all your foundation six users um but css boxes has an interesting feature in that you have an inline style

18:44 okay so um this is our first look at um some of the macros actually let me

18:51 skip this one okay so i have a css box that has a background color okay and

18:56 then in inside that and again that is this outer shell this box

19:02 okay inside that i have a two column okay here actually you know for fun i'm

19:07 gonna go ahead and let's make this a little bit bigger there we go i'm just going to temporarily drag that out of

19:13 the block grid so we can see everything a little bit nicer okay then i have a two column

19:19 inside two column um i have a range check purely for performance stay uh sake i'm actually

19:25 here we'll just remove raincheck raincheck is my a cool stack i released about a month

19:30 ago um not needed just makes page load a little bit faster okay so i have a picture

19:36 stack inside the picture stack i defined a a use warehouse and i define a url

19:43 and then over here in this column uh we have the text content here we have

19:49 a header which is an h3 and here i'm injecting the name now look at this syntax your if you've used total

19:55 cms blog list or you've used a bunch of my stacks you probably recognize this

20:01 syntax sometimes it's called mustache templating um and what that is is curly braces

20:07 and you put in the field name from the csv file so remember in our csv data

20:15 i had name so if i wanted to inject the name field

20:20 in this case call to action all i need to do is do curly brace curly brace name

20:26 and then close my curly braces so again you just type that directly into the setting

20:32 okay same thing for here in the summary in the summary i'm doing curly brace curly brace summary and closing those

20:39 curly braces so this is a great example of how to

20:44 leverage and inject your data okay now let's look at some other

20:50 interesting things here i had a buy now link okay now i use cart loom on my actual

20:56 website um and so in cart loom all you need to do is know

21:01 that the id of a car of a of a product okay and you just add that id to the end of a

21:08 specific link right so i have you know joeworking.cartloom.com slash cart slash

21:13 ad and then i need to have the cart loom id okay so i'm injecting that cart loom id

21:20 with those little curly braces

21:26 pretty simple now every single button is gonna say buy now and that's okay

21:31 if we go ahead and look at this picture now this url is going to look really complicated um it's basically a way for

21:37 me to get the stack image from the weaver space from total cms on weaver space so it's using um

21:45 some apis from total cms2 um and i'm in all i need to know is the id

21:51 okay so i inject the id um and that's going to give me my url to

21:57 an image okay

22:02 and remember i skipped the css box really quick but here i just did in the inline style setting i did background

22:09 colon and then i'm injecting the color which is an rgb value

22:16 okay so i now have all of this data

22:23 okay hopefully you can understand how i'm building and how i'm how i am integrating that data into my content

22:30 okay now i should add that you can use these curly braces in

22:36 any setting or in the content area here you should be able to use it in any

22:42 content area okay and you should be able to use it in any setting as long as the

22:47 results of that setting are inside the html that makes any sense okay so like if i have a text setting

22:54 and that text gets added to the javascript file or to the css file

23:00 um it's that that value isn't going to work okay because these templates just like

23:07 total cms macros okay they only work in the html

23:13 so um how do you know whether or not a setting goes into the html or into the

23:18 javascript um try it um you know they're just there isn't any

23:24 you know for you as the end user there's no way of knowing okay i would say most text-based settings are probably going

23:31 to end up in the html but i can't guarantee that okay so

23:37 um yeah if if it does end up in the javascript or in the css then you won't

23:43 be able to use those values because the templating engine can't affect your css

23:49 or javascript files okay so all we need to do is once we build out

23:54 this block grid cell i add that into my feed okay and the rest is history you see you saw

24:01:00 the results here it creates it loops through each one okay and if we wanted to kind of see uh

24:07:00 i i can modify the data as well right so if i go in here and uh you know i can implement let's

24:14:00 just quickly change uh this call to action to hello live stream

24:21:00 okay there we go so as you see all of that is

24:27:00 built off the data okay let's undo that because i need

24:32:00 need that okay so sweet online store

24:37:00 great use case for and it fully works uh it doesn't work inside this demo but um if we go to

24:45:00 the actual feeds page i'm still working on tweaking the demo because

24:51:00 weaver space is still running foundation one and and so but if you click on these buy now

24:56:00 buttons it actually works boop

25:01:00 right so it's an actual online store okay uh pretty slick

25:09:00 all right next up menu right

25:15:00 so if we go down the menu okay and uh you'll notice that uh here we have our

25:20:00 feeds and inside here i'm using the csv feed and again i just it just has a ton of data let's go ahead and peek at that

25:28:00 data oops that worked

25:34:00 that didn't work there it goes all right so here i have an item a price

25:41:00 and ingredients that's it right so i have my item name i have the price

25:47:00 and then i have ingredient a whole you know list of ingredients okay if you guys aren't familiar with

25:54:00 csv you'll notice that some of these values have quotes some don't the reason is

25:59:00 if if your particular value like this ingredients list has commas in it

26:06:00 therefore since it has a comma we need to make sure that we put the entire thing in a quote so that the csv knows

26:13:00 um that any any commas inside there just have it a

26:19:00 part of the data instead of you know delin delineating a new field okay so a

26:24:00 little csv data for you there so you have um what eight different burgers okay um with different

26:31:00 ingredients different names different prices all that jazz okay again you can create this data in your numbers or a

26:38:00 spreadsheet or whatever your favorite spreadsheet app is and export it to a csv or get a url um you know like via

26:45:00 air table or something like that um i haven't played with error table yet but i'm sure they have some way of getting

26:50:00 the data into a csv format from a url so i would hope so okay

26:57:00 um but air tables similar to google sheets i don't know i wouldn't necessarily trust it for a live production website um i think the best

27:04:00 your best option is especially since the data isn't gonna change very often it's just to uh put a csv file on your server

27:11:00 okay but anyway um let's look at this data so here i'm it's just a three column stack

27:17:00 okay i use columns pro for foundation six you could use any three column stack

27:22:00 okay um the ones in foundation six to have some interesting features that allow me

27:28:00 to do like this dots no matter you know the the content length here and here

27:34:00 these dots will always span the middle in between them right um kind of one of the unique features to

27:41:00 to the foundation columns okay so in column one i just have it set to shrink to content

27:47:00 and inside there i just said it's a header it's a paragraph set to item that's it

27:53:00 okay and then in my my second column it actually has no content i just put i just styled it with a bottom border

28:00:00 okay so that's how i got the dots it's just a bottom border on that middle column

28:08:00 okay and for that set to size auto and then

28:13:00 the last one again is just set sizes set to shrink to content and then i have my price now this is an interesting one

28:21:00 you'll notice that here i have a slash in front of the dollar sign

28:27:00 and the reason for that is um if there are certain characters dollar being one of them um that the templating

28:35:00 engine tries to interpolate as maybe a programming variable or something like that so

28:41:00 i'll remove that just kind of see we get a little error so um just a little tidbit of

28:46:00 information um yeah if you want to have a dollar sign either have to escape it with a little

28:51:00 backslash or you can actually use like the html code i think it's ampersand dollar semicolon um

29:00:00 and then that um but anyway you'll see that i have a dollar sign and then um the price so i'm injecting

29:06:00 the price from the data okay and then below that i have another header stack that is the ingredients

29:14:00 so this this is a really simple layout it's just three columns with the item

29:21:00 a middle column that has dots and then the price and then i have my uh

29:27:00 ingredients below it and if you see if you notice oh i closed the window

29:33:00 i mean it makes a really elegant menu right it's pretty much what we would expect the menu to look like

29:40:00 just super simple and this just a three column with a header and then a three column with a header three column with a

29:47:00 header right so as you see feeds is just taking the layout that i

29:52:00 built and it's just replicating it for each item boom boom boom boom boom boom boom

30:01:00 okay um next is the gallery okay

30:07:00 now the gallery is interesting uh let's go ahead and look at this csv for here

30:14:00 oh you guys might be getting bored because as you see this is pretty simple i mean every single one of these is is

30:19:00 is the same but also unique right the process of getting the data is is

30:24:00 the same here i just have an image name okay so i have an image name

30:30:00 and then an alt tag okay and then if you're curious on my server

30:35:00 is it i think it's inside resources do i have it no it's just um here i'll show you

30:42:00 this particular website in finder really quick

30:50:00 let's go to weaver space so um inside my resources folder

30:56:00 uh this is actually images from the photo pro demo so i photo pro cars and

31:01:00 then inside there i have full resolution images and thumbnails okay the image name is the same for both

31:08:00 it's just the full res is inside the full folder and the thumbnails are inside the thumbs

31:13:00 folder okay and if you looked at my csv data all i have here is the

31:20:00 image the image name okay so

31:25:00 what i did here layer let's go ahead and make this

31:31:00 big so we can see it so we have a launcher um this one's

31:36:00 quite interesting um so let's go to the basics let's go to the picture okay uh inside the picture i have um

31:44:00 the url to the file so i have you know weaver space slash resources photo pro slash cars slash

31:52:00 thumbs and then in the name of my image

31:58:00 okay now remember in my um in my example

32:04:00 remember i had i was in resources photo pro cars thumbs

32:09:00 and the name of the image right and these are this that's the files that are on my server right

32:18:00 and conversely um let's see and then oh in the picture i have the alt tag so i put the alt inside of the alt tag

32:25:00 and then i also added a caption stack um and i i added the caption so the caption

32:31:00 the alt this is uses the alt tag and the caption okay

32:36:00 now if you look i click on this it actually opens up a light box that

32:42:00 shows the full resolution image so let's go ahead and look at how we did that

32:47:00 so i added a light box into the template okay

32:53:00 and i'll come back to the lightbox id because by with this kind of more advanced uh

32:58:00 situation multiple a lightbox has to be created for each picture that's inside the csv

33:05:00 file okay and so and every lightbox has to have a unique id

33:11:00 okay so we'll get into that inside the lightbox pretty much i have the same exact setup as the thumbnail

33:18:00 it's just my url is resources photo pro cars full

33:25:00 and then the image name okay so remember uh remember i have the full and these are

33:33:00 the full res images with the image name okay so

33:39:00 there we go there's that and then i'm adding the alt tag information as the caption and as the alt as well okay

33:47:00 um so now how are we going to launch this lightbox i need to

33:53:00 have a special um id i need the way of assigning a unique

34:01:00 id to each thing right if you look inside here up here i have a launcher which

34:06:00 says open lightbox and here you'll notice that i have a slightly different syntax

34:12:00 okay um what i'm doing is i'm using the image name so let's look at this really quick

34:18:00 let's go ahead and look at this large okay so normally to get the image name

34:24:00 we would do this okay now however image contains some unusual characters

34:31:00 primarily a dot okay and that's not gonna work you can't have a dot

34:37:00 but um there's a lot of really cool little helper functions that we can do

34:43:00 um in the templating machine or the temporary language that we have

34:49:00 and one of these interesting one is slug so we can do all kinds of stuff so here i'm doing um pipe slug and what that

34:58:00 does is that will create let's look at let's look at this first one here we'll just look at it in the source code

35:14:00 um where is it

35:22:00 where's my launcher okay here we go now this is long because these image

35:29:00 names are really long okay but if you look here data open equals audi a1

35:34:00 quattro blah blah blah blah and if you look at the end it's instead of a dot jpeg it's a dash jpeg

35:41:00 okay so what this slug does is it kind of makes a url friendly version of a

35:46:00 string okay and so um what i'm doing is i'm passing the image

35:52:00 name to slug and a slug is modifying that slightly

35:57:00 okay and it's creating a valid id for this launcher okay and what i did is i put uh in this

36:04:00 launcher now launcher is a foundation six stack that will launch a light box um from anything you can also use

36:10:00 buttons or whatever but i wanted to make this one big button right so the launcher stack is perfect for that

36:17:00 so here i say open lightbox and then i give it this image slug and then inside my lightbox i give it

36:24:00 that same exact id image slug

36:29:00 okay and that is exactly how all this magic is done um

36:35:00 so it just you can build your own stuff right so that's how we were able to do a

36:41:00 pretty cool example um of how to use a gallery now in here you could do in your csv you

36:47:00 could put in the the full url to each one to each of these images however i

36:53:00 knew that was kind of a waste because i knew the urls were standardized okay so all i really needed was the unique

36:59:00 aspect of each image which was the name and the alt tag or the caption

37:11:00 okay uh last example friends of weaver space um you know i'll

37:17:00 zip through this one really quick it's the same exact stuff okay

37:22:00 we have some csv data all i did is i inject the same exact data

37:28:00 um via all these template macros so i have the image i uploaded the images to my server

37:36:00 um i put in um the now here's an interesting one okay

37:42:00 um so oh this is another inch this is a pretty interesting one actually

37:47:00 all right so let's go ahead and look back at my server now if you look here uh my feeds friends

37:55:00 and then here's all my friends okay and if you look here it's all it's their name

38:01:00 okay but in lowercase and the spaces have a dash

38:07:00 okay so in my csv for that now let's go ahead and look at the csv data for this

38:20:00 okay um i have name website and about that's it

38:26:00 now i could put in image as a field okay but i'm i'm a stickler for repeating myself

38:34:00 so i knew if i just named the images a certain thing um we'd be golden so i have i know

38:42:00 all of our names joe workman chris powers scott williams davide massimo yohan okay

38:50:00 so as long as i name these and i can determine the name of the image based on

38:55:00 the name i can just use the name right so if you remember the the names

39:01:00 if you remember it's all lowercase and the spaces are dashes so um let's look at this what i did

39:08:00 here it is okay so what i did is i have i processed the name

39:13:00 and then i parse it through the slug helper function which creates

39:19:00 um let's let's do my name as an example so here it's doing joe workman

39:26:00 and then the slug it's good it's going to do joe dash workman

39:31:00 and you'll notice here i'm then parsing it through the lower function which is going to give me

39:39:00 joe dash workman okay there we go now this is all fancy

39:46:00 pants right i could add another field in my csv that is just joe dashworkman.jpjpg

39:55:00 i could do that okay but you know for these demos i try to do some fancy pants stuff to show off

40:01:00 okay um again you don't need to know this

40:07:00 you could just create an image field in your csv with the name or the full url to the image and you're good to go

40:14:00 okay but let's look at this okay so here in the picture

40:19:00 i'm going ahead and i have the url and at the end you'll see that i have that macro.jpg

40:31:00 pretty cool right okay um and the right i think that's the only

40:36:00 kind of advanced feature inside this one um the rest of this actually this layout

40:42:00 with the circle and it's hovering over top that's one of the foundation six templates um i think it's a card template um

40:51:00 yeah it's a contact the contact card template that's what i used so the freeze foundation six templates for

40:56:00 contact card that's what this is okay um so i just leveraged that and then i ejected the data um for name and

41:04:00 about and injected the website via the link

41:11:00 okay pretty cool okay um i think that kind of answers all the

41:17:00 questions here now probably for the demo someone pointed out i should equalize all these heights yeah yeah i probably

41:22:00 should probably equalize this um this paragraph right here so then um you know

41:28:00 it all goes so they're all pretty in that same height we could definitely do that

41:35:00 so nano nano scott okay um

41:41:00 so let's look at some questions i know some questions were coming through i want to make sure i answer them

41:47:00 all right let's see um feeds is not yet on lever space no i have not launched it yet it will be

41:53:00 launched um by friday i'll send out an email and all that jazz um i'll

41:58:00 definitely record like a quick overview video as well that's probably a little bit more concise than this one

42:04:00 um so that you know but yes uh technically if you they are available um on the website

42:11:00 right now but the web pages aren't finished yet um they are available for purchase if you could figure out the urls

42:17:00 um what plug-in are using for the online store i use cart loom for my i've used

42:23:00 cartloom for 13 years now um

42:28:00 and yeah i love cartloom i have a an affiliate link i think that gets you a slight discount on my website weaver

42:35:00 space slash start if you want to check out cartloom there's tons of other things you could do you can you can use

42:41:00 this to integrate with ecwid or or vibra cart or there's all kinds of stuff i've done a bunch of live streams on online

42:47:00 stores um check those out i think they're they're all valid um i do really like cartoon though i think implementing

42:54:00 it is just really simple um feeds is not yet on yep uh any idea

43:00:00 if cartoon lets you book appointments no cartoon does not have a booking appointment system has invoices

43:08:00 but no way of booking appointments at least to my knowledge um is there a site for cart loom

43:15:00 oh here's the site for cartoon yes cartloom.com is there documentation for the functions of the templating engine yes

43:22:00 so um the templating engine oh i'm not sharing my screen

43:28:00 let me go ahead and do that okay so the name of the templating engine that we're using

43:35:00 um is called twig and i will it will be linked to on the product page

43:40:00 okay and there is a whole bunch of stuff you could do in twig

43:46:00 okay let's do twig for template designers so you can do all kinds of interesting

43:53:00 stuff you can like do for loops you can do if statements you can do all kinds of

43:58:00 really crazy stuff um and yeah you can set your own variables

44:04:00 you can you know yeah you can do all kinds of stuff inside twig okay see here you can like join a list

44:11:00 by you know if you have like a let's say all the tags or categories in a blog post you want to create a con comma

44:18:00 delimited list of those there you go um you know you can you know here's an

44:23:00 example of using multiple fil they call them filters the helper functions okay filters so you can do you know name

44:29:00 strip all the html tags and then give it a title case okay really cool stuff here um

44:37:00 i really love twig i'm going all in with twig um total cms2 will be based we'll be

44:43:00 using the twig templating engine as well and um i'll be migrating some of the older

44:50:00 mustache-based template systems that i have in various other stacks to use twig so we have access to twig everywhere all

44:57:00 right it's very similar to mustache where we have the little you know two curly braces okay um so the syntax is

45:04:00 familiar it just gives us so so much more okay and if you're curious of all the various

45:10:00 helper functions if you go to the main docs page there's all of these okay

45:17:00 now i will state that i don't include all of some of these are optional add-ons that i'm not including

45:24:00 the reason is um let's say like a lot of the currency and the format options

45:32:00 um require a a install this extra bundle which is

45:38:00 like over 20 megabytes and it has a ton of files

45:43:00 um because it's an international extension so i haven't included it yet because of

45:50:00 just the raw size of it and the annoyance of having to upload it when i'm not sure people are

45:56:00 really going to use it or need it um i've included most of the other extensions um except

46:03:00 for the international one because it's so big okay um so yeah um you have access to probably

46:11:00 80 85 percent of these functions um the only thing i didn't include again

46:17:00 is this international one so you'll note any of these if you go down and you see it cost it takes this international

46:23:00 extension um i haven't included it um because just because of the raw size i'm willing to

46:30:00 do it i mean once you upload it it's on your server and it's done but you know sometimes people with

46:36:00 shady internet connections publishing 20 megabytes you know often

46:42:00 is not fun so um if we don't need it i i don't want to include it okay so that's that

46:49:00 um very helpful my wife noticed it too hi everyone awesome why did you left

46:54:00 part possibility of a full crud system so um

47:01:00 i wanted to make this the ability to have uh

47:09:00 you know there are a lot of people well a like this is all about processing tons of different data right so you know csv

47:16:00 json it's about integrating external sources and i built it and i was like you know a

47:22:00 lot of people have existing databases and they want to do that um and i didn't i'll be honest i didn't

47:29:00 want to waste the time on a full crud system with a date for a database when

47:35:00 um i'm building total cms2 which kind of serves that function

47:40:00 okay and uh yeah but with that said

47:46:00 i do know about a a a small crud system that someone else is is kind of building

47:52:00 here um and i think once feeds gets released he's kind of waiting on feeds to get released

47:57:00 because he he has a nice little crud system um being built so awesome

48:03:00 you know that's the great thing about a community is you know i can build one part someone else can build another part

48:08:00 and together we work together to make amazing amazing things so super stoked

48:14:00 about that um sweet okay um

48:21:00 i didn't i didn't really go through any of the filtering okay or sorting okay let's look at some of the sorting okay

48:28:00 um so if we look at this online store um

48:34:00 we'll notice that this data is not sorted okay so let's go ahead and do a sort and

48:41:00 we're going to sort by name

48:47:00 voila magically it's all sorted by name pretty cool you can also do reverse sort

48:54:00 or shuffle right so let's just shuffle and voila and that will actually happen

49:00:00 on every page load just kind of shuffles pretty interesting

49:06:00 okay filtering um

49:11:00 let's look at another simpler demo that i have that shows some filtering

49:17:00 uh well let me let me show you uh some examples here okay

49:24:00 um so let's do this online store let's do a filter let's just do a static filter for right now

49:31:00 and in the static filter you can say equal to not equal to starts with doesn't start with ends with doesn't end

49:37:00 with contains doesn't contain less than less than or equal to greater than greater than or equal to so there's

49:43:00 a lot of types of rules that you can build okay let's use like contains

49:49:00 let's see is there a common word here time live

49:56:00 style of course there's nothing

50:03:00 nothing is there okay um i guess we'll just do um

50:11:00 name contains call okay

50:16:00 for that oops it was call typo

50:23:00 it is case sensitive there we go so in in i'm filtering for anything

50:30:00 where the name contains the word call okay and uh yeah there we go

50:37:00 um if you add something like you know um here let's let's do

50:45:00 hold on set that to none let's look at the raw data here can i do ampersand here oh yeah let's do

50:51:00 an ampersand so we're going to do a static filter where the

50:58:00 summary i think it yes summary contains ampersand just so you can see something

51:03:00 with multiple records there we go right so here we can we filter we created a

51:09:00 filter and every time i load this page because this is a static filter we're filtering the data to show a limited set

51:15:00 of that data okay you can also provide limits down here where you can be like um you know

51:21:00 if here let's just turn that off let's say i only want to have four

51:26:00 okay so what it's going to do is gonna it's going to show four records right

51:32:00 even though there's more okay you can also do from offset and basically you can say like start at record one

51:38:00 okay so then it call to action isn't it started from parallax and it did four

51:44:00 right so that's kind of where the count and offset uh help you out okay

51:49:00 setting those to zero basically cancels out that setting um

51:55:00 you can also do multiple sort and multiple filters so let's say for example i wanted to

52:01:00 sort by name but first i wanted to do a pre-sort

52:08:00 okay and i wanted to sort by um summary

52:14:00 okay so what this will do is first it will sort by summary then it will sort by name in this particular case that

52:21:00 doesn't really matter um but you you can do as many sorts

52:26:00 and also as many filters as you want so you can do inside the feed stack i allow you to

52:32:00 provide one sort and one filter but then you can add as many pre-sorts and pre-filters as you want

52:38:00 um to create a much more complex data

52:44:00 structure okay so um the last bit

52:49:00 i want to show you is the ability to filter based on

52:54:00 um the url

53:00:00 okay so in this example we'll see that i have a grid of an image

53:07:00 with some tree or with a title okay and what happens is if i click on one of

53:12:00 these i go to a different page

53:18:00 where the title is passed to the url and then basically the feeds here will

53:25:00 filter the content and only display data for that one particular item

53:32:00 that's very powerful all right let's look at that really quick so in this particular project it's

53:38:00 csv and then post page okay so the csv i have no filters we're displaying everything and actually in

53:45:00 this particular example i'm actually using two csvs just to show you that you can do multiple uh pieces of data

53:52:00 okay and then we have that simple card layout okay now on the post page

53:58:00 what you'll notice is in the feeds i have filter set to

54:04:00 dynamic url and the rule is equal to title

54:09:00 so it's going to look for title in the url and then it's going to get that title

54:16:00 and filter the data in the csv file by it and it has to be equal to it

54:24:00 pretty cool right and in this particular case um

54:30:00 feeds there's only one that results into that so it's basically like creates like a blog post page right so a dedicated

54:37:00 page that and this particular csv is really simple but you can then display more data or more detailed data in this

54:44:00 than you would on like the the listing page okay

54:49:00 super super powerful

54:54:00 um and i guess lastly let's see can i use external search box to filter or sort the results

55:03:00 so you could create i guess a search box that does a

55:10:00 um a filter and a search just by um sending

55:16:00 url data to the browser right so for example here

55:21:00 let's say this this csv data is pretty pretty dismal um

55:34:00 what you would do is you would say dynamic url filter and then you could say um search for title or maybe this is

55:40:00 tags or whatever right just like blog does where you can pass tag or category you do the same exact thing here

55:47:00 and then you can create a search box using a foundation six form that does a get url action and it just basically

55:54:00 sends the data to the browser okay um

55:59:00 should totally be possible i mean a thousand percent sure it'll work okay hopefully that makes sense

56:07:00 marcelo yes there is total cms1 integration you'll see you'll notice here um i have a total cms demo here

56:13:00 um and it's just bringing in a blog feed now why would you want to use feeds

56:19:00 instead of like blog list or total loop um purely because the feeds has the a

56:25:00 more advanced filtering and more generic filtering and sorting um so you can sort by any field you want

56:31:00 in feeds the total cms stacks don't allow you to do that so so that's why i added the integration

56:38:00 all you need to do is put in your blog id and you can filter out a blog list

56:44:00 really easily with feeds

56:52:00 okay let's look at some of the other data types so rss here is a a rather probably ugly demo um

57:01:00 that shows data from the hrefs rss blog or blog rss feed so it gets the data

57:07:00 from the rss feed and voila there we go

57:13:00 um we just display each one pretty cool right

57:18:00 um and again if we turn on the the data preview we get to see now rss is tricky because

57:26:00 every rss feed is a little bit different okay in terms of what data is provided so you're going to you're definitely

57:32:00 going to want to use this data preview tool um with if you want to use rss feeds so you can see

57:37:00 what particular fields your rss feed is using okay

57:43:00 so like for example um this particular rss feed uses author instead of

57:48:00 contributor some might use contributor okay um so yeah uh these fields are are

57:55:00 i've kind of i've tried to standardize it in in the feeds but everyone's going to be different

58:02:00 okay so if you're using rss you're definitely going to want to utilize this data preview feature so you can see all

58:07:00 the fields available to you for a particular rss feed

58:14:00 okay um json json pretty simple you give it a url you can

58:20:00 also give it um a path within so you can like parse sub parts of the data um

58:27:00 so there we go um total cms you kind of already saw that all you have to do is give it a blog id you're done

58:33:00 mysql here you can give it mysql is interesting so all the database

58:40:00 ones have this as a feature since i can't connect your database from inside rapidweaver i want to give you

58:47:00 the ability to still develop your views and layouts inside rapidweaver so what we like what i do is

58:54:00 inside preview you can put you can supply csv data okay and that csv data is used inside

59:02:00 preview so here um these are just you know supplied from this okay so basically you

59:07:00 would take a sampling of your database create a csv from it so that you can actually preview it inside rapidweaver

59:13:00 and then when you publish it'll actually connect to the database okay so and that way you'll need the the

59:19:00 host name and the database name username password all that jazz okay by default you can do all data from a

59:26:00 table limited data from a table or you can provide a actually custom sql query okay

59:32:00 so for those that aren't scared of sql okay um same exact setup for sql lite it's

59:39:00 another database here instead of user and password you just give it the path to the sqlite file

59:45:00 and inside preview you would give it you know some csv data to you know preview your layouts inside preview

59:53:00 um and we saw the demo already okay um total cms external url

1:00:01 not sure what that means marcelo um uh you know total cms only works on your

1:00:08 current domain so um so yeah the total cms integration will only work on the cms of the site you're currently

1:00:15 on okay total cms does have an rss feed

1:00:22 so you can use the rss feed i guess on a different domain if you wanted

1:00:30 david this is really terrific solves a whole bunch of issues that i'm having um to overload the blog data model looking

1:00:36 forward to yes so yes this is interesting concept um and this is uh

1:00:42 think of feeds combined with like total this current version of total cms

1:00:48 um and that with crud of it all and that gives you that's what total cms2 will give us okay

1:00:54 so um hope you guys like feeds um if you really really want to go buy it

1:01:01 now and you can't wait um you can go to uh weaver space dot weaver space slash

1:01:07 stacks slash feeds um and you can purchase it right now okay

1:01:13 um it is available although the download isn't quite ready yet so you can

1:01:19 purchase it but you won't be able to download it um hopefully i should have the the official download done by the

1:01:24 end of today okay um so yeah weaver space stack feeds

1:01:30 and then there's also a link to the database um one directly in the features

1:01:35 um you can go to feeds um dash db

1:01:40 um is the url for that okay here i'll put the two urls in the chat

1:01:46 for you guys there you go so i put both urls in the

1:01:52 chat for those that uh wanted to uh you know jump the gun and and purchase

1:01:58 it now um i am still working on on the pages obviously um so you know as you

1:02:03 see a lot of this this information is empty right so um yeah i hope you enjoy feeds if there's

1:02:09 any other questions let me know let's see i think i think we're good to go

1:02:14 i appreciate um everyone joining in today it was a fun one hopefully you enjoy feeds i think it's going to be

1:02:20 really powerful and a beloved stack so

1:02:25 hopefully we'll see you guys on friday um at the hangouts um we'll probably be

1:02:30 talking all about feeds on friday and um and all the amazing stuff we can do hey did anyone think of any cool

1:02:37 demos go ahead and post on the um if you think of anything after this that you'd like me to kind of mock up

1:02:45 go on on the community obviously there's a post for this live stream go ahead and post some ideas there i would love to

1:02:51 hear from you right so go to uh do do do where is it there you go go ahead and on this post

1:02:58 oh on this post here just go ahead and comments okay let me know your thoughts

1:03:05 of feeds and if you have any ideas for more demos go ahead and add comments there and i'd

1:03:10 love to hear your feedback and i'll try to build them before we launch by friday okay so

1:03:16 cool thank you very much everyone um have a wonderful rest of your week go out there and make your

1:03:22 websites great bye