Transcript

00:03 oh it's connecting excellent we're
00:15 on let me do I we'll do multi view for now and then I could be like follow my view
00:22 right yeah follow host video Perfect okay hey everybody we have the
00:29 man Josh well at least on my screen he's right above me not sure where he is for you guys excellent David Mr Francis Dave hidding
00:38 Mr Cole Dr Bob we got a we got all the fan base here thank you everybody for coming on as you know we got uh Josh
00:47 Stacks weaver himself in the house he's going to be doing a little takeover today I I'm probably most of the today I'm probably just going to sit back and
00:55 uh you know maybe inject some comments here or there but uh he's going to show some really super cool stuff um that
01:02 he's been uh working on and building and he's got a new stack if you haven't checked that out feeds table Pro uh
01:10 really slick really good stuff um and that allows you to build well he's he'll do the the pitch but uh it'll let you build out tables from feeds um it'll
01:19 also work with total CMS 3 in the future I know that um and uh yeah it's going to be super cool so uh yeah Josh what you
01:26 got for us today bud perfect give me one second here and I'll get this uh oh and on top of that Josh has this new fangled
01:33 streaming setup he wants to he wants to show off today so I'm I'm going to be uh drooling over that let's see we'll see how that works out today yeah all right
01:42 um we will be sharing this one there we go sweet
01:51 perfect and I'm assuming you can see that yeah I well I see the stack weer desktop that's all you need to see perfect
02:07 first thing I want to do is kind of show um on a website that I'm utilizing feeds uh feeds with and how I'm using that to
02:15 generate newsletter emails for that customer so without further Ado I am going
02:25 to click here and wow check you out with the
02:32 transitions I got Transitions and everything fancy today all right perfect
02:40 so this is a uh customer that I work with and this is uh explore admins so it's a tourism um website in Edmonds
02:49 Washington and they have a ton of blog posts that they post so they create new blog posts um probably at least one a
02:58 week um I think there's sit's got about 160 posts at this current time and they also have uh events so they have their
03:08 events uh on their site um and they they maintain this all by themselves so they had come to me and said hey you know we
03:16 need to uh do a email newsletter and me being me I'm like how can I do this with
03:23 the least amount of work um so what I set up for them is something really cool in admin area it's a CSV
03:33 crud and what they're able to do is they come into their email setup here and they create a new entry so we'll look at
03:42 this last entry that they've put in here so in this last entry they put a send date to lets me know when they're wanting to send this email newsletter
03:50 out and then they create a tag that they're going to be sending this uh that's going to be related to this newsletter and this tag is really cool
03:58 it's a minus tag and that's very important when we're using this with total CMS um when you're tagging your blog posts a hidden tag a
04:06 minus tag is a tag that nobody sees um on the actual website so that's not something that is visible to the
04:14 public and then they go in here and they put in a header for their email newsletter and then they have an intro paragraph that they put into their email
04:23 newsletter from there they take this uh tag and they go to their posts
04:32 they edit their posts and they go in and add this tag to blog post so we'll search right now we'll see that we've got two blog posts here that have this
04:41 tag in it and then we if we go over to events now events this was sent earlier this uh month so most of these events
04:50 have passed so if I search here no upcoming events but if I search here in the past events we see here we have uh
04:58 two four five events pegged so we have all this data now we have a CSV we have blog posts and we
05:07 have event posts that have this tag on it so what do we do with that tag so with that tag what we can do is we can
05:15 bring that into wrong project file we can bring that into a email Stacks so email Stacks
05:25 actually has a really cool function uh when you're creating your email
05:32 newsletters you can utilize feeds to generate your HTML content for email
05:39 sex so in here I've created and designed a you know header section for their newsletter now I utilize uh sendy so
05:48 these are some sendy macros in here that will generate the current date and time that the newsletter is sent so we'll start with this first feeds in here
05:56 bring in the first feeds and this is a CSV V feed and in this CSV feed we've set a
06:05 pre-filter so this prefilter is set to contain tags and we set this filter of
06:12 that tag that they have actually just put in on that current email so if we actually preview this right
06:23 now we'll see that we've got that intro now Edmonds has it all and we have that intro parag
06:33 gra we just quickly disabled this so I don't have to see this every time here we go so I think everyone understands
06:41 exactly what this is doing we're pointing to a CSV feed but instead of bringing all of the CSV records we're literally filtering out by that tag
06:49 which is already in that CSV column and that's what allows us to grab that row display that header content that intro
06:57 content very simple next thing I have latest blog posts so in this one we do a feeds but now I'm
07:05 doing a Json feeds now why I'm doing Json feeds versus total CMS feeds well it's because this project file is not actually published on their website I'm
07:14 not actually on their domain so I'm accessing their data with this project file not having their actual domain setup in it so total CMS won't work in
07:23 this specific instance this will have to use the Json so you essentially have to point so quick clarification the total
07:31 CMS feeds stack wouldn't work because it would you use on feed yeah so right in here if we go into to add in a feed and
07:40 we go into uh that total CMS blog feed this particular uh instance won't work
07:49 because of what we're using it inside of email now that's different if you had your email templates I guess saved in your main project file that would work I
07:57 guess um in this case I run a completely separate project file just for newsletters
08:04 perfect now um yeah so now in here we put again a pre-filter feed and now we're feeding uh from those posts we're
08:12 filtering by tags and we're filtering by that same tag also um in this feeds on the core
08:20 feeds I've set this to uh not include any draft posts so it won't include anything that's set to draft so if they
08:28 have some they accidentally switch something to draft that pulls it out of the newsletter now in here I mean I'll I'll dive into kind of what I've done in the
08:37 settings here to pull in the data if we look at the picture stack here um you'll see here that I have the domain and then
08:44 I got image. image and if we previewed out the data that comes from this uh Json which I don't think this is going to look too pretty in here no because
08:53 it's all white so if we looked at this data um if we're trying to pull the blog image we
09:01 see here that we've got image and then under that is IMG and this is the the link I know it's all bright white this
09:09 is the link to the actual blog image that's uh on the on the
09:17 site so that's how you can bring in an image using feeds from that blog uh the blog post then of course just simple
09:26 here we have a spot for image alt if they actually put taging so like copyrights on the images that actually comes into their newsletter which is really
09:34 cool and then you got your header summary and I got a read more button and then in here if we were to look at the
09:41 URL we got a link to the blog post and then you see here I've got a permalink macro so all of that all of the data and
09:49 all the macros that I'm setting up in here you can preview your your data in uh inside of feeds and then you can actually see what your Macros need to be
09:57 set as and then upcoming events is very much just like the blog except we're pointing
10:03 to the calendar Json for that blog po uh for the blog lists and then again another
10:11 prefilter with uh picture their image alt title summary read more so if we
10:18 preview this right now we will actually get a newsletter we'll see edins has it all we have their L latest blog
10:27 posts and their up coming events and that's created now what's
10:35 really cool and what's really nice about um about Stacks is in the stacks menu now you can't see this right now but if you go up in the top Stacks menu and you
10:43 go into stacks and there is Page stats you get this nice little popup window that shows you all your stacks on
10:52 the page now this is where I cheat if I just click on pre- filter it selects all three pre filters at once and then I
11:01 could actually just go into back to their their email and if I wanted to preview this
11:09 email I can copy this tag and I could just paste it and it will change all three of those pre
11:18 filters at once and I can just hit preview and now I've got the other newsletter just like
11:26 that sweet and then from it's just simple as uh enabling your
11:33 pre-filter and copying the code and putting it into your email program so in this case I use sendy so I just copy the code paste it in good to go so that's
11:43 really easy it's it's really nice to be able to generate newsletters from content that's already on your website
11:49 and if you really to expand on this this could be products this could be you know you could have a you know classified you
11:58 could have ads you could have a whole bunch of different things um in that so feeds was really great at
12:05 bringing data in um but I challenged Joe a a little bit ago when I said hey I want to pull a single post I want
12:15 to bring one post into an email and this really kind of spawned from uh one of my
12:21 other clients that had a that they generate all the like all the content on their site and essentially they wanted
12:29 me just to program their newsletters so I found you know this the CMS file and previewed it couldn't get
12:38 it to work so Joe did a nice little update to feeds which includes for feeds Json a single record mode so let me show
12:46 you what that looks
12:56 like perfect this is already preset so this is an email newsletter uh for
13:02 the Social Club that I manage and if you add the Json feed to your uh feeds the
13:11 Json feed there's a little checkbox here that says single record mode now this requires a little bit of digging around
13:19 inside of your uh FTP into your website to actually find this so in this case
13:27 they had a upcoming Family Fund Bull event and we needed to I wanted to bring that into an email without having to
13:34 remake all of the blog content that they already had so if we were to
13:40 browse into their uh file server here and we go into CMS data blog and we go
13:48 into events so if we went looking through here um I have uh which one was
13:57 it oh I I switched it to activities there we go so in activities we have this family fun bull.
14:07 CMS so if you notice here we've got family funb we've got Christmas party we have AGM all these CMS files so these
14:16 CMS files are actually where all the blog content is stored now you don't want to edit those you don't want to open those you don't want to mess with
14:24 those but we just need to know where it is so in this case um I have my transmit set up here just a copy URL so I can
14:32 copy that URL and then I can paste that into the Json feed EUR now if we were to put this into uh
14:41 data preview mode in here we see the data that we're
14:49 now getting from that individual post and from here we actually have access to things like content extra content the
14:56 things that you don't normally have access to in a Blog list in a single record mode it's like loading a single blog post it's like adding a um blog
15:05 post to your page and it's single single blog post and you can actually load a single blog post on your website so now we're be able to do that inside of feeds
15:14 we can say hey I want to bring this specific blog post now in my case I'm bringing it into an email so all of
15:22 these little uh these little uh titles here these are all your little macros that you're going to need to use
15:29 so you can see in here I've placed an image and I did the same thing as I did in the other one it's you know image.
15:36 image I have links to the event so I got peral link added in there and then I have um some really cool date time uh
15:45 formatting in here with uh twig which is cool summary and then I got content raw
15:53 so if we actually preview this we see now that the uh blog image
16:01 comes in and the entire blog content comes into an email now if you now if you were to mix
16:10 this you said you had like we're posting this event but say we still have more upcoming events now you can mix the other thing from the newsletter with
16:18 more posts you could put another feeds in there and go other upcoming events and have a list and this entire email would generate itself like there's
16:26 nothing I need to do their next event when they post their next event I just come in here change that CMS uh link to
16:34 the next event hit preview make sure everything looks pretty send another email and so I'm automating this whole
16:42 email process of feeds feeds has completely changed my email marketing business so that's one thing I think a lot of people don't realize that feeds
16:50 can really help you have sub things other than just you know selling websites building websites you can actually use it for doing your own email
16:58 marketing or even providing email marketing for other customers of yours any questions so far automation is
17:07 amazing n everyone seems to be quiet Irwin's here happy to see you Irwin um so a couple things um just so let go
17:15 back to the edit mode um just I'll just clarify a few things so the in the feeds Json feed the URL if you notice once you
17:23 figure out the URL all you need to do is change the permal link in the in the end of that URL if you wanted like so in this case it's family-fun dbow right
17:33 yeah for the ATM I could easily change that yeah yeah right just so you know in the future like you didn't if you know what the peral link is you don't have to
17:40 like go and copy the URL as long as you know what the peral link is you can kind of just tweak it right there yeah so if I wanted to switch to you know um you
17:48 know the AGM I could literally just go in there and just change AGM d224 exactly and this entire thing will just swap out so yeah I wouldn't have to redo
17:56 the whole link just a AGM -224 hope that works we'll see what
18:05 happens boom and there you go yeah and it's cool these these buy tickets and view uh I think yeah the buy tickets
18:13 button also has the per Link in it so it will actually take you to that individual the events page nice yeah so the buy tickets actually takes you
18:22 straight to the proper events page which is really really cool that's pretty genius yeah it's uh it's a lot of fun actually for fun if you look at the
18:29 header where your time stamp is I I know that line probably scares some people a little bit right um and normally what I
18:37 do just to make it a little bit more readable you have time stamp and then you have a a pipe right normally I put a space before and after that just so that
18:47 it it it kind of delineates that a little bit right so now just to explain so uh a blog post has a timestamp field
18:55 right so um we're we're displaying that time stamp field but the time stamp field in total cs1 is just like this
19:02 ginormous number it's not readable at all right so twig um which is a part of feeds um has this date function that
19:10 then allows you to um pipe out whatever um you know date format you want and and Josh even s found that you can actually
19:19 Supply the time zone as well which is cool because this obviously this newsletter is for Edmonton right so you want to make sure that the time and
19:27 everything that you're outputting is for that particular time zone right so pretty cool there that he figured out you can also pipe in a time zone which
19:35 is pretty cool yeah and it actually comes out pretty um pretty nicely in here too it uh right there Sun it has
19:42 the proper date exactly they want to it probably probably don't need a common there but whatever now I'm just nitpicking
19:51 yeah yeah now image size here though like so you have to make sure that when they upload an image they they do it a particular size
19:59 right or I'm not too I have some settings on on that side um okay they actually
20:06 export I've got them really good I I've I've trained these people to now go to canva they design all like that's a nice looking poster actually um design them
20:14 on canva and they do proper export for sizes and yeah cool it's pretty it's pretty cool so a lot of a lot of the
20:21 hard work is you know when they say that they're ready to send I usually pop in and just tweak The Styling a little bit like it's all hip wig on the back end so
20:30 I kind of yeah spice it up for them just to make it look a little better um but they do most of that work get that in and then I'm able to easily generate now
20:39 uh these really cool emails now I'll call out this whole email um template um I got it off of from uh Massimo from RW
20:48 Pro space and then I completely customized it um but he had a kind of the similar style so this whole like top of this iPhone I I kind of screenshotted
20:57 that put that in there um and kind of added it in my future editing is actually going to probably put this width of this image to be like into the
21:04 iPhone so it looks like it bleeds over into the page which is gonna be really cool um yeah but no this is this is feeds has honestly changed my business
21:14 not only just the websites to do but even my business and that kind of leads me into what I built with feeds table
21:22 Pro hey you mind if I a couple on the go back to your other email
21:31 or did you close it oh yeah no big deal oh no I have it here somewhere I think the uh yeah no the the newsletter one
21:38 yeah yeah I just want to talk about the workflow on that one really quick so um you said that you um you create so a CSV
21:48 file I did notice that that is stored inside of a c total CS data store which is interesting but then you use CSV um
21:57 crud to edit CSV file now why why don't you just use data store just curious so the thing is is that there is a data
22:05 store on this site they don't have access to it the customer is the one doing this so I needed something easy for them to to manage um now this is
22:14 probably like way before I could have done like a feeds SQ light setup that was before I got into all that so I mean
22:22 this has been implemented since 2022 oh now yep yeah yeah so the reason why
22:29 I'll show you I'll show you I'll show you what the data Store look the well to create I've never used the data store form actually to be fair never use that
22:38 I that was my question now the only the caveat is like the data store form doesn't allow you to like edit an
22:46 existing entry so that is a that is a caveat where the CSV crud would allow you to oh if they messed up they can go
22:52 back and edit an entry the data store is kind of like a create it and save it one time sort of thing thing you know yeah
22:59 I've only ever like utilized this aspect uh this aspect of the data store I've never I've never actually utilized the
23:07 form I know like done the editing so I thought this was the only editing you really had I never even looked at the form so there's so many things about total CMS that I don't use it's
23:16 hilarious right there's just things just so funny enough the the data store form is on the is in the content Stacks the
23:23 reason that is is because it's meant for you like to create a form on your website that then saves into the admin
23:30 area if that kind of makes sense right so the form would be add on the content side um so for this is that like when
23:37 they create a new record by default these two first options are no and no so I come in here when I've scheduled it so
23:46 they can see that I i' I've come into this um one other thing that's kind of nice about this workflow um right here
23:54 this little button this is the uh world's smallest Foundation six form um it's literally it's submit button and
24:03 what that does is when they are ready for me to send a test they click this button and it sends me an email to bloody every email that I have it's like
24:12 my phone lights up like a firecracker um it's really cool so yeah they they press this button it's a preset up form that I like email that
24:20 I've set up that said hey they're ready for you to send a test email I won't press it because it also messages one of the other admins for the site so they
24:28 know that it was pressed so I'm I'm not pressing that button but it's really cool um something something you would never think to use Foundation 6 forms
24:36 for a simple button that just notifies so it's all preset up with like an alert emails hits me on every email address
24:44 that's a really cool function that I don't think a lot of people ever utilize now future fying this in total cus 3 this could just be a custom collection
24:53 in total cms3 as well right exactly yeah there's so much stuff that this site will change with total CMS 3 that will make life easier actually forgot I had
25:02 one more thing I wanted to show in the email stack so um I did do a launch of feeds table Pro and that is the exact
25:10 same thing I did for my feeds table Pro email is I used feeds now I did add my own little header here uh but it there's
25:20 a video that pulls from the blog post everything so when I hit preview this generates my my feed stable Pro email
25:26 and it was just generated straight from post which is super slick like that is slick Automation and laziness for for
25:36 the win it's it's one of my favorite things um right let's see
25:42 here we can get out of this one and out of that one cool oh sneaking showing
25:50 stuff I shouldn't be showing uh let's see here dou project
25:58 all right so let's start with oh you can give a sneak peek of that if you want I'll give you permission oh F6 I I'll I'll show that
26:07 that's when I do my images that's my images One um okay open recent oh I've opened way too many projects give me one second just got to
26:15 load one more project file here I'll show that that'll be my last
26:26 my last demo I think's lagging today there you go
26:38 cool so feeds table Pro so feeds table Pro is a stack that I made that is for
26:46 making HTML tables and it is just an HTML table stack there is no super power
26:54 that my stack has in bringing data in that's why it's called feeds table Pro because really the power is in using
27:02 feeds with it but let me show you a basic HTML table um and we'll start that
27:09 from scratch I'll actually delete this out and start from
27:16 scratch so we'll bring uh feeds table Pro onto the page and this is your
27:24 initial stack that comes out so with feed sabled Pro you have a couple different settings some things I will kind of go through and go over um first
27:33 area you have a header row most tables will have a single header row but you do have the power to add more header rows if that was
27:39 needed so it's very simple header row so in here I'm just going to put your name I'm just going to add a couple more
27:47 cells here going to add date We'll add
27:55 age um what other name did I have here I'll just do those three perfect so if we previewed this right now we'll see
28:03 that we have a header row name date age down here in the body we can add a
28:10 row I'll just add a few cells here and I'm just going to put
28:16 Joshua and we'll put in today's date
28:30 I look like I'm 25 perfect preview that boom we now have a simple table now if
28:37 we wanted to add some more rows so if we just wanted a static table that didn't have any extra data we can just change some of the stuff
28:49 out some of these dates
29:07 and then um I'm just going to have a row that has a similar date different
29:14 name perfect so if we preview this now we have a very simple table we have the
29:22 uh name date and age now inside of feeds table Pro um in the main setting here on the side you have some option to turn on
29:30 some filters um you've got search sort or both so we'll add on certain search and
29:37 sort and what that allows you to do essentially is the data that's in your uh table can be sorted so if I hit name
29:45 you got it sorted by uh alphabetical you can reverse it now what's really cool is you can also do dates so this is
29:54 actually detecting the dates and then sorting it in calendar order and you can do reverse sort as well as you can sort by age so a very simple way of
30:03 displaying your data now feed table Pro does come with a secondary stack it's called feed uh table
30:10 search and the search stack um they needs to be tied with an ID to the table so ways this works and you see that
30:17 there's table ID you got a table ID one and you got table ID one so if you want to have multiple tables on the page you just have to change the table ID to a
30:26 different number so you could have unlimited tables as long as none of the IDS are the same um if you're utilizing any of the search and sort functions if you're not utilizing any of the search
30:35 and sort functions the table IDs don't matter it's really just working with the how the JavaScript calculates um the data and sorts it for you so if that
30:44 search stack on the page we can simply just search you know in here if I want to search 2022 boom I got the two people that are from 2022 I can search you know
30:52 25 I can search multiple things so I could search 20 22 and then maybe I want you know David DAV day and that will
31:02 filter out from there so search and sort is very uh is very useful um what's neat about that as well is that you can
31:10 search and while you're searched then you can actually sort the data still that's on screen so you still have the power to filter down and then
31:19 search but that's just a basic HTML table and that's really no fun the real fun is when you actually start getting
31:26 into utilizing it with feeds so I already have this preset up uh table here um we have a header row with uh
31:35 first name last name Age Country email salary date uh I have some CSV data here now if we actually took a quick second
31:44 and looked at the CSV uh data um on the page what's really uh neat about
31:52 this is that you see that the data that's coming in is name age but if we looking at that header row we see here we've got first name last
32:07 this here is a twig statement that splits the name into two words first name and last name and it gives you new
32:16 macros of first name and last name and then that here in the rows we now split that to first name last name and so now
32:23 we're not only you know viewing the data we're now going to be able to sort by last name even though before it was all in one field in your database now it's
32:31 split out and yeah so on the table body area here if for the people that didn't catch that if I just pull this Feeds out for
32:40 if my dragging starts working so if we go down here and you go
32:48 to add something you can add add row or feeds You' add feeds and then you would add a row command Z scary add a row into the
32:58 into the feeds so what you're actually using feeds for is to reproduce the row that's that's what you're doing you're
33:06 reproducing the row HTML and that's what gives you a table um on your
33:13 site so let's preview this perfect so now we have that CSV
33:19 data and we have that in feeds and now you can just search so if you wanted to search you know again let's try that 20
33:27 22 boom we've got all the 2022 dates and then say I wanted to see someone who's 33 years old boom instantly filtered and
33:37 you can do this a whole bunch of different ways you know if you want to filter out UK we now can filter out that data point and then we could filter out
33:45 you know people who make $56,000 boom just like that and the same thing
33:52 we have that sorting we can still sort the dates we can sort the emails and of the columns any of the data easily
34:01 sortable now something I didn't uh show in my video uh and actually came up someone asked this question and I don't
34:09 know how I uh I missed this my my computer is choking on something um is
34:17 inside of the cells here um if you select any of the cells
34:26 what bringing me down today all right um there is an option for custom content so if you check mark that you can actually
34:34 bring in your own Stacks into this so I've kind of created a another demo here on my
34:43 sandbox and this is using uh feed table Pro feeds and someone secretly cool
34:50 awesome stack coming out soon called pop-up caption 2 so in here I connected this to my
34:59 stacks Json from stacks weaver.com and I've added in a pop-up caption stack
35:06 this pop-up caption stack is got that same you'll see the same similar macro to what we did in the emails where we are going stacks.com image. image so I'm
35:15 getting it to bring in the blog post image and then I have for the hover content media on my site the title of
35:23 the stack is stored in the media field and then I have a a view link and the view link if we pop into here you'll see
35:31 that the the uh Perma link for me is stored in the title it's just something to do with uh Viber cart and my
35:38 integration with Viber cart so that's how my my link to the actual like the peral link is linked over to the blog
35:46 post then if we go down to the other cells you'll see just have a data cell with summary raw so if we preview
35:55 this we now get a table that actually has all of my stack data and images that's coming in and what's really neat
36:03 is the media field which is inside of Pop uh caption here uh that data that's
36:10 actually there is searchable it's actually something that you can still search so if I actually wanted to search you know cloudflare now cloudflare is
36:18 also named in this in the descriptions here so it could be popping in from there um I think you look at URL cury
36:25 mixer for search feeds uh what I got Turn
36:32 Style yeah turn style oh it's mentioned
36:39 here search is really good so yeah so you can have images you can have multiple forms of data points in there
36:47 and what's really cool is like you can click this link and actually go out to the um out to the actual page from
36:56 inside of this this form and you can still sort actually no this is how I know it was working because if you hit sort it sorts those images in
37:03 alphabetical name so I know it's reading your data so my sorting code is reading so if you actually sort the stack it is
37:12 reading the data because it that is in alphabetical order which is pretty cool and also I love this I could do this all
37:20 day
37:21 [Laughter]
37:22 Joe this is actually deadly now with feeds table Pro um of course it's it's
37:31 really powerful um but also simple so if you utilize uh Foundation uh six there
37:40 is uh some really cool stuff that you can do with uh the table Swatch that was the slowest I've ever seen that
37:49 go saw that right it was like y so in uh
37:57 in here you can actually have uh the table style Swatch and if you use the table style
38:04 Swatch you can just style the table because it is an HTML table and it conforms to um all of those uh Swatch
38:13 settings um and you can do some cool stuff where like I did here with the the search stack I used Target to bring in a
38:19 search icon and added some padding uh this is in the feeds table Pro uh demo project and so you end up with you know
38:27 a like this where you can now stylize the table exactly the way you want to and it's just using a single Swatch
38:35 like there's there is no real stylizing options um inside of my stack because uh
38:42 most people are utilizing Foundation 6 and all those table styles are there but i' have seen that most Frameworks have some sort of default table Styles um so
38:51 I've decided not to complicate the stack anymore by adding in any of those complicated settings um and if you're if
39:01 you're not using foundation and you still want like the cool table style stuff that Foundation has well all of
39:07 those swatches still work in any theme that is true so um yeah that is
39:14 absolutely true um yeah now a couple other things I kind of skid it over um I'll quickly touch you we have a few
39:23 minutes till Joe yeah yeah we're good dude cool so inside of the stack here there is a columns width settings now
39:33 this is a little tricky it has to be here because of HTML this whole thing was based upon how you actually have to
39:40 write HTML so column width settings have to be in a separate area above all the table code um so in here you see I have
39:49 you know I if I wanted to get the first name last name to be certain with I have to add two of these in and then predefine what they look like so if we
39:57 went like 150 pixels uh on that first one we previewed that that's now locked in that first one
40:05 to 150 if we actually maybe bring it down just to show um bring it to like 100 for
40:13 instance you'll see that it kind of scrunches so that's a little too much oh that's also
40:20 oops that's also a little too much there you go so you can size your columns the way you want Even if we said like like
40:27 the date now say you know date column 7 we just have to add all the way up to column 7 don't touch any of these that
40:35 say Auto and in column seven just add a pixel so if we said you know 150 over
40:43 here bring that down too so now we've got the date locked
40:50 in but what happens if we have uh you know you're looking at smaller devices and you see as we get down to smaller
40:57 devices here all of a sudden it scrunches and the data goes off the screen what's going on
41:04 so with this you the table actually has Sid scrolling automatically enabled so it just you can actually scroll that
41:11 table um and view the data but this still doesn't look pretty at top so to fix that
41:20 um that computer is fro there we go to fix that if we click
41:27 on feeds table Pro when that load and here we have a
41:37 set width and set Min width so if we up this minimum width to like
41:47 900 preview that now that's the minimum width on the entire table correct correct so that's a
41:56 Full Table width so now you see here we come down once it hits 900 uh pixels of the width of the table not the screen
42:03 the width of the table so you'll see here it will start it already starts to lock off right around 920 it will then just slide
42:14 off yeah so you can set your minum width um you can also set just a width in
42:21 general so if you set a width in pixels um of course or in percentage so if you did this at 50% you'll see that the 900
42:30 takes over if I turn off that minimum width then it will actually push it in and look ugly so you can kind of protect
42:37 yourself you mind testing something for me do you have my you have my measure stack I assume yes I do Chuck it up above your table and then do your little
42:46 width test thing
42:57 it's measuring the actual page not the uh do uh instead of do Target the parent instead of the
43:06 browser oops where oh it's oh it's at the bottom of the page it's still not measuring that container oh
43:15 oops can I put it in the table I put it in the table oh can you I don't know interesting uh let find out I'll put it
43:23 in the header row if it will yeah it'll let me put it in here interesting we'll see how that
43:33 works so it's still showing yeah is weird how that
43:40 works still going full wide it's whatever it's it's it's matching whatever the search is so it
43:48 must just be the width of that particular container try in here and see what happens
43:57 H yeah I don't know it should be the row should be the row should be I was expecting it to measure the width of the container the table is in not the table
44:06 itself uh I was just thinking when you were playing around with the width and as long as the table was full width then you you could easily see the width at
44:15 which it you know seems to be pulling the padding still it it does yeah it looks like it's pulling the padding too interesting it was just a little test
44:23 case that I I was like oh let's see how measure Works in that case cool yeah so that's um you know some settings
44:32 um there is options to do column spans row spans so if you wanted a you know
44:39 header column to be across two columns um we can do that for instance if we just take this first name and switch it back to
44:49 name we can then um do a column span on that to two
44:56 columns so you preview that now you have name is actually taking you know both columns
45:04 the bad thing about that is sorting is only going to sort the First Column you're not going to get you kind of lose your last name sorting but there is some like Advanced you know there's even row
45:12 spans but I don't think most people are ever going to use them but they're there um it can be useful in very rare cases
45:22 yes I agree nice thing is you can also do you know sell alignment if you wanted to specific cell align you can do cell
45:28 alignment um you do have the power to do row alignment and then um I do realize that
45:35 my stack takes up a lot of space so it's been set up uh thanks to the great
45:42 programmers of pen to uh minimize the the row and header columns as well as if you just really want to go into it you
45:50 can just minimize the entire stack Sean was wondering if we could reduce the width of the search field
45:57 oh absolutely this was a really uh recent update so on the search field um you have the option to uh do custom
46:06 widths and they're custom widths based on a mobile tablet desktop and you can also set alls um for each of those as
46:15 well so if you uh wanted to you know mobile here we've got 100% we've got
46:20 tablet 40 uh desktop 40 um preview that
46:27 the search can be adjusted if we wanted desktop to be on 50 there you
46:37 go nice same with alignments if you wanted to have uh you know alignment on you know mobile be left or whatever
46:46 medium Center and then you could do you know right if you really wanted to so all of that is uh programmed into the
46:55 search deck um very well yeah cool score
47:03 dude perfect uh any other questions Jo um no there was a lot of people that were blown away by all your email stuff
47:10 though yeah the email stuff I knew the email stuff would be popular um and I know you you brought out that um that
47:18 update and you didn't really tell anyone what it was so I was like you know that was it was a fantastic it's kind of a
47:25 hard thing to explain without you know going into an entire use case you know what I mean so it it really is it's it's
47:33 hard to it's hard to go hey what am I gonna actually you know utilize this for and explain it but it does kind of
47:43 expose your CMS data location to so I can see why it's not like the most thing You' want to explain or show off but um
47:51 no it's a very powerful I I I enjoy feeds I I find ways to use it in almost every produ project that I'm currently working
47:59 on I mean I use it every day all right any other guys just let me know uh I'm going to show off something really quick I'll I'll give you guys a
48:07 sneak peek of pop-up caption a little bit since we do have a about 10 minutes here um I know Josh showed you a little
48:15 bit inside of his table I figured i' I'd show you a little bit more um the stack I did finish it this morning um so now
48:23 it's just getting all the various other stuff to get it launched um this is um a paid upgrade to the stack um it will be
48:31 version four I released version two and three as free updates so um yeah version
48:37 4 the only thing that's same about it is is the name and the icon I'm keeping the name in the icon everything else about
48:44 the stack is totally new um yeah I didn't even try to bring in any of the same code it is completely Rewritten from scratch completely reimagined and
48:53 really what what um kind of made me look at this and I think it was two or three weeks ago I did that um live stream on
49:03 overlaying text on images and um yeah I was like hey you know what I want to uh you know and I
49:12 showed off popup caption just a little bit and when I showed it off I was like uh this thing is it used to be a really
49:19 cool stack and I was like ah it's it's not it's not as nice as it once was so I was I felt I needed to restore its
49:28 former glory um and yeah let's let's show it off cuz it's mighty beautiful
49:35 okay um this is just a a a test file okay so uh we we'll be playing around with this hopefully I didn't break
49:43 anything let's go ahead and preview this over here all right
49:50 so here is popup caption and oh there um well as you see
49:58 it it does do a nice fade in um you know caption um I added fade this morning um it's probably the most boring effect I
50:06 felt like I needed to have just a simple fade effect though okay because the other effects are pretty amazing right watch this so um we're going to go into
50:15 here and I I'll show off the stack in a little bit but I just want to show off kind of some of the cool stuff about it
50:22 so this is the default um style which is called swing and as you see when you have a grid of these um the animation as the the things
50:31 just kind of flow into each other right now I have the same caption and title on all of these again this is just a demo um you could obviously have them all the
50:39 same are all different right so um really cool um but as you see it kind of follows your mouse so the animation follows your mouse and the same thing on
50:48 mobile okay so if you're on your phone and you tap these um it knows where you last tapped um so that the animation
50:56 kind of follows the direction of where you were to where you are now um it's pretty slick um so yeah there's swing
51:04 there's also um let's see slide um so there slide where it kind of
51:11 follows uh your mouse another thing you can kind of make this one big link as well you can also customize the stacks in here and add a button inside if you
51:19 need to um but yeah pretty cool um and then there is roll out and roll out is
51:26 very similar to slide um where it differs is you can notice the the content doesn't animate with the um the
51:35 background so the the the content kind of is there and the the the background kind of animates over it um which is kind of cool so slightly different than
51:43 slide um but similar um and then we have rotate as you see rotate goes ahead and
51:53 kind of rotates from the corners pretty slick it's kind of like a a monkey swinging from the trees or something right um and then which one
52:02 didn't we do yet Flip Flip is the last one I don't think you did all right and flip um yeah just kind of it's it flips
52:09 the card so that kind of gets rid of the overlay feature okay because yeah it flips the image in order to see the the
52:15 content um now there are other modes um I won't go into every possible combination of them um but let's go to
52:22 slide and I'm going to choose a push animation of the push version of slide and so let's refresh that and what that
52:29 does is um it pushes the image for in order for the caption instead of overlaying the caption it pushes it okay
52:37 um and then there there also is the ability to Overlay by default um so by default on uh
52:44 before we showed the image now we're going to show the overlay by default and when we hover over you see um you know
52:51 the difference there pretty cool now um next up is uh let's go ahead and uh I'm
52:58 just going to preview inside rapid Weber here um so we're showing the T the um overlay by default but there's other
53:05 things like sometimes um the background images even though we have that overlay sometimes the background image can distract from the text right so I wanted
53:14 the ability to help with that and yes we we could go ahead and like adjust the opacity of that background color but
53:22 then I don't know that's not really the same right um so what if I wanted it to be less you know less but then what are
53:30 other things we could do um so one one thing we do is we can blur right so we can add a blur for when the and it's
53:38 only only blurs it when the overlay is there right so um yeah really cool where that adds some level of you know
53:46 abstraction between the background and another thing we can do is saturate right so we can desaturate the image as well I'm going to turn off the blurring
53:54 so we can kind of see that okay so now I turned off blurring and I only have Satur desaturation turned on
54:03 so as you see it it mutes the colors and if you go desaturate all the way down to zero it essentially makes the um the
54:10 images black and white right but only only when the overlay is over them right so pretty cool question for you Joe yeah
54:18 we got two questions from the chat we've got first can the images also be links uh can the yes yeah so the ire
54:26 thing as I said earlier you can go ahead and inside the stack uh you can you can click add link and it'll make the entire thing one big
54:35 link and question two can we now this is my question it's not in that chat is uh
54:42 can we use filters your filters uh Swatch on this as well yes you can um so yeah I mean there's classes here that you can then I mean essentially this the
54:51 the um the blur and saturation that's the same thing from filters I just didn't want to add in you I thought
55:08 class here um and yeah it should that should work perfect perfect awesome
55:16 um okay then we have various things like ver you know vertical alignment for you know if you want to vertically align your the text content blah blah blah um
55:24 by default it is just a markdown area here but you can also just do custom content so you can drag and drop Stacks so like here in this particular example
55:33 I was playing around with that earlier I have some text and a link image or a link button and if we look at that now um well in this reverse animation
55:42 doesn't make sense because it goes away let's turn off turn that off but now if we go into this one you'll see that there's a link there that I can then
55:50 click right um so you have options either you can make the entire thing one big button or you can add like a button within the layout out um that's then
55:57 clickable okay you can do either way um let's go and turn off custom content um now you can do image
56:06 Warehouse image and actually a video file as well okay um so for example here let's play around I'll put a video in
56:14 here for now um I think I have a video file in me all right there we go we're going to put in
56:22 that video file um and let's just preview right so there it has a video it autop
56:31 plays and as you see the filters even work over the video which is pretty cool okay and obviously that video maybe
56:40 interesting let's go ahead I'm going to try let's add in some blur we add in some blur as well
56:48 okay um we're going to Let's preview that in the browser now in the video You could also add a poster image so that you don't as
56:56 the video's loading the poster image would display but um yeah there we go even blur works on video and as you see
57:03 it the video still plays in the background um with the blur effect um yeah pretty cool that looks
57:12 really cool um sweet okay let's see yeah so we
57:19 did image uh batch Warehouse uh video um alt text links classes uh oh you can
57:26 also uh let's say I wanted to make them all square okay so you can you can even though those images weren't um squares
57:34 you can go ahead and make them you know force them to be a aspect ratio of 1: one um and at that point they're all now
57:43 squares right so yeah uh make that super easy um and then there's various things
57:51 for the grid so you you can change your grid sizing a little bit um it is made so it's kind of in inic sizing so it's based on the minimum width so you just
57:59 Define the minimum and maximum width um of your item within the grid and then it will uh yeah it'll just kind of autof
58:09 flex all the way down right most of the time I'm just going to say most time you're only going to set the minimum M Max you almost
58:17 always want that to be 1fr I'm not going to try to explain that right now but there are there could be edge cases where you'd want to change your max but most of the time you're you're you're
58:25 going to want that one okay and then the Gap here is obviously the Gap in between um the gallery okay now you can also do a custom layout if
58:34 you choose custom layout that doesn't use uh the grid from pop-up caption at all um and then you can drag in your own
58:42 whatever if you want Bento or if you want whatever you can drag that in here and then move all your popup items inside of that okay um so yeah uh by
58:51 default there there are two stacks that come with pop-up caption there's pop-up caption and popup grid I've been showing you grid so far um but yeah there in the
59:08 I'll popup item works perfectly for inside of feeds or um some sort you could use feeds in this as well if you wanted to utilize the pop-up grid you
59:16 could chuck feeds into here as well um and then you know and then and then feeds could generate as many popup items
59:23 per image or per whatever right so yeah um yep okay and then yeah I mean there's
59:31 various other animation options and timings and all that jazz but that's pretty much the gist of popup caption uh let me show you the popup uh solo stack
59:41 um it's just pop-up caption and popup grid okay so again we've been showing you pop-up grid popup caption it it behaves pretty much all the settings are
59:49 identical to what I showed you um the difference with popup grid is all the style options are kind of centralized in
59:57 the main grid stack whereas and then in each item it's just the content for that specific item right so just the image
01:00:05 and the link and the and the and the text content right whereas in popup caption you have the content and the
01:00:12 style settings all in one right so this is just kind of like a standalone popup caption um you could build the same
01:00:20 exact layout um that I did here with the popup caption stack like you know um I think I deleted that demo that was
01:00:27 stupid of me like you can throw in a foundation 6 block Grid in here and then add you know a pop-up caption per block
01:00:34 grid the annoying part of that is most of the time when you have a a grid of these things you're going to you want to make sure that the settings are the same across all of them which is why I came
01:00:43 up with this pop-up grid option because a lot of these settings is going to be all the the same the same across each one um but you could have multiples of
01:00:52 these on the page and they'll all act independently of each other hopefully that makes
01:01:03 sense okay um yeah I sent you in the zoom chat a link to my popup caption
01:01:11 feeds image demo oh yeah oh cool let's check it
01:01:24 out yeah sweet wait yep so this one you know he has instead of you know having the entire
01:01:32 thing a button he had a view button in here so when you click on that and then takes you to the product page right um so these are done with the solos or is
01:01:40 this the that's solo because yeah I did that solo sweet yeah it's pretty it's pretty
01:01:47 slick and so so what happens if if you notice here the way the animation works is it follows your mouse so um here
01:01:56 let's go into uh the bigger example here so um as I hover from the bottom you see that animates up and in and if I an if I
01:02:04 move my mouse out it animates out okay and if I if I leave from the top guess what it leaves from the top and as soon
01:02:11 as I enter this one that one comes in from the bottom so while most of the time people are going like this and it
01:02:18 looks like it's a continuous motion okay um they kind of act independently of each other so if you move your mouse slowly enough I can get this one to exit
01:02:26 but not get the other one to enter yet okay so but most the time people are are just going to kind of swipe from one to the other and then that gives you that
01:02:34 very smooth pretty amazing animation I think it's really awesome um oh before I forget I check out this demo so I was
01:02:42 playing around last night now I have to give props to my son for this one and um Josh and uh came out with this demo um
01:02:51 this is pretty slick this is using the pop-up grid and two swatches I'm using clip path with a uh a diamond shape and
01:03:07 just do I don't let's do two there here I'm going to I'll cut that one for really quick all right um so let's
01:03:14 refresh this page so this is the default grid okay um I and I remove I have no padding or no gutter okay um so this is
01:03:23 what we have um I made everything a square okay so let's go ahead and turn back on the clip
01:03:30 path okay now let's so clip path what that does is it adds a clip path to each one of those
01:03:38 images okay so that we get this interesting layout now I got this far and I was like this is cool but like it' be really cool if like this bottom row
01:03:46 was shifted and up right um so what I did there is I added a class to the bottom three okay called shift
01:03:54 left so the bottom three popup items have a class of shift left and um so I created that that
01:04:02 swatch a transform Swatch and what it does is it moves it 50% to the left and
01:04:09 45% up okay and it's 50% of the size of the actual
01:04:17 item okay so I moved um again I moved like this one it takes the 50% of the
01:04:24 width of the actual Square Square here and it moves it over so that perfectly centers it here and then I moved it 45%
01:04:31 up and the reason I did 45 is actually thought it would be interesting to have this little Gap right um so if I would have moved it 50% up it would actually
01:04:39 probably be it should be perfect like it should be right next to that is per that reminds me of those tile things you can
01:04:46 get like those lights I just ah yeah see so if I did 50/50 it's now this I mean there's no Gap I kind of liked it with
01:04:54 The Gap so that I only did 4 five the Gap looks better yeah so there we go like that's just
01:05:03 that's very cool now originally we tried this with circles um and it it it was kind it
01:05:10 worked but the animations were kind of odd um well well let's here I'll remove the overlap really quick one
01:05:20 second okay so we have circles right and it it it works Works however what what's
01:05:27 kind of odd is that we have this straight line animating over the circle right and I don't know we I thought that
01:05:35 was kind of odd it's not horrible uh but shift it left but don't bring it up like shift it up
01:05:43 like 10% so do the 50% left and then do like 10%
01:05:50 up let's try yeah it's not bad that's not bad that looks good here if we add in we
01:05:58 probably need to add some grid add some P or let's add a little bit of gutter in this example so there's a little separation
01:06:06 yeah I that doesn't actually look ugly that's not bad circles actually look good too me clip clip poth's pretty cool in
01:06:15 this right how can we put that in a moving box just have dots going across the
01:06:23 page uh ah don't like deagon that's kind of horrible how about hexagon hexagon interesting well that could be
01:06:32 interesting yeah that's a very interesting way of
01:06:41 doing that I did like the diamond though I think Diamond's cool I like that
01:06:46 yeah no it definitely looks good so there we go okay uh let me see
01:06:54 if there's anything inant uh D do you have uh do you know the stack name I remember this stack too but I forgot the name oh they were saying
01:07:03 that there I guess there was another stack on the market that did something similar to what popup caption did um I don't know but we'll have pop-up caption
01:07:11 this week so there we go it's a fantastic stack it was it was honestly it was so easy to start playing
01:07:18 with and format and I was looking to do like someone had asked me about images on my table and I was like oh my gosh I totally forgot that I can do custom
01:07:26 content I don't even know why I didn't even show that and then you're like hey you want to see this and I was like absolutely it looks perfect inside of my table it works
01:07:35 great know that's uh it's pretty neat it's a good sack I think it's a really quality step thank
01:07:43 you uh could you have a background behind um I'm not sure why you'd have a I mean the image kind of is the
01:07:50 background so not sure not sure maybe on the overlay no no so put the so do this
01:07:58 so put a container and uh and put the put that you know that cool diamond design in a container and then put a background on the
01:08:06 container to like have a background behind your your grid yeah you could do that I mean yeah I think you just want
01:08:15 to see it happen just it's I know it's a little easy to set up but you could have like a yeah just
01:08:22 a hero or whatever uh we want an image or image just put an
01:08:32 image yeah um I don't really have any air or we'll do this is not going to look good I'm
01:08:41 not gonna win any Design Awards on this one but can you blur it oh wait not that's not the right
01:08:51 one oops oh I didn't put it the class on the container that would help that would that would
01:09:01 help it's like now you could put like and then you could put Shadows if you wanted on the on the diamonds like you could style this up like if you had like
01:09:09 a blur on that background that would look that'd be perfect yeah yeah so it'd be a really nice design y here let's
01:09:19 do um okay we're we're just playing here then let do oh wait it's under
01:09:25 components let's go to filter Pro um BG
01:09:33 hero I want I think I'd want to do it overlay all right let's try I don't think that's going to work here let's
01:09:41 just do a blur the blur on that kicks in so fast I was actually going to ask you about that one pixel blur on this is
01:09:50 insane that's the browser there's nothing I about that yeah is it is crazy
01:09:56 strong that blur kicks in exactly nuts I that that's that that that does
01:10:05 see I thought I thought that was gonna I thought that was going to blur everything let's do uh I have to do an overlay yeah overlay before right yep an
01:10:13 overlay on BG uh and we could do let's do like
01:10:22 white pacity 25 and then on this one we want to do it on
01:10:29 before before
01:10:37 no interesting wait here oh no we don't even we can do uh
01:10:47 blend oh wait no let's see
01:10:56 this is doing oh Black Baron land
01:11:03 [Music]
01:11:17 they why isn't that working where is it here it goes
01:11:38 there any effect if you check the filter
01:11:51 interesting h oh whatever play that and figure it out
01:11:59 later yeah but it's possible you can definitely have have it in front of a background that's what someone wanted to
01:12:06 know yep uh but one thing what you had an idea let's play around uh let's do a
01:12:16 shadow like if we were to do a shadow on popup caption
01:12:28 let's try that you oh if you're doing a clip do you have overlay yeah I'm wondering yeah I could
01:12:37 clip the Shadows oh you might want to here let's do a do a drop shadow in instead of a box Shadow oh what oh
01:12:46 interesting um because it's definitely been clipped by
01:12:53 overlay because because of the clipping I think that's where you're getting in trouble yeah that would have been cool if we could if we could put a drop
01:13:02 shadow on the CLI
01:13:15 [Music]
01:13:18 yeah Daren I thought that was going to work I had a similar issue with the that little badge thing I made the other day
01:13:27 where I needed to add some margin because it was clipping when it Target was targeting it it was clipping
01:13:34 it overflow no darn if you did overflow visible
01:13:41 wouldn't that mess up the clipping it doesn't no but yeah that drop shadow doesn't doesn't work with clipping darn
01:13:50 it oh well there's a challenge you can figure it out maybe we need to maybe we need to add an additional class on top of it and
01:13:58 find a way to do it
01:14:07 oops all right um sweet all right I don't want to waste anybody else's time I appreciate it thanks everybody thanks
01:14:16 for popping in Josh share your wisdom your feeds wisdom I appreciate it my pleasure sweet okay let me see if
01:14:24 there's any other question okay everyone enjoyed it cool thanks everybody hopefully see you on Friday um
01:14:32 yeah Friday is uh our Hangouts as usual um go ahead and uh yeah see you on
01:14:41 Friday it's at uh basically 45 minutes from right now but on Friday oh and something I didn't I haven't actually said I'm G to put I forgot to put it in
01:14:48 my latest newsletter the calendar the Weaver space calendar um if you subscribed to it before um you know it's
01:14:56 kind of flaky um because I was using it on Apple iCloud I've deleted that um so if you were subscribed to it go ahead
01:15:03 and delete that and go ahead and subscribe again just Weaver space calendar um there's a link on our homepage um you can subscribe to that as
01:15:11 well and that way you won't miss any of the hangouts or live streams or stuff like that that that are on the calendar so check that out um and yeah hopefully
01:15:19 I'll see you on Friday at the hangout cool thanks Josh thanks to everybody for joining and ask them some great questions