this particular uh instance won't work 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
guess um in this case I run a completely separate project file just for newsletters
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 filtering by tags and we're filtering by
that same tag also um in this feeds on the core
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 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
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 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 it's all
white so if we looked at this data um if we're trying to pull the blog image we
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 is the link to the actual blog image that's uh on the on the
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 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 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 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 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 set as and then upcoming events is very much
just like the blog except we're pointing to the calendar Json for that blog po uh for the blog lists and then again
another prefilter with uh picture their image
alt title summary read more so if we preview this right now we will actually
get a newsletter we'll see edins has it all we have their L latest blog
posts and their up coming events and that's created now what's
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 go into stacks and there is Page stats
you get this nice little popup window that shows you all your stacks on
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 could actually just go into back to their their
email and if I wanted to preview this email I can copy this
tag and I could just paste it and it will change all three of those pre filters at once and I can just hit
preview and now I've got the other newsletter just like
that sweet and then from it's just simple as uh enabling your
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 really easy it's it's really nice to be
able to generate newsletters from content that's already on your website 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
could have ads you could have a whole bunch of different things um in that so feeds was really great at
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 to bring one post into an email and this
really kind of spawned from uh one of my other clients that had a that they
generate all the like all the content on their site and essentially they wanted me just to program their
newsletters so I found you know this the CMS file and previewed it couldn't get
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 you what that looks
like perfect this is already preset so this is an email newsletter uh for
the Social Club that I manage and if you add the Json feed to your uh feeds the
Json feed there's a little checkbox here that says single record mode now this
requires a little bit of digging around inside of your uh FTP into your website
to actually find this so in this case they had a upcoming Family Fund Bull
event and we needed to I wanted to bring that into an email without having to remake all of the blog content that they
already had so if we were to browse into their uh file server here
and we go into CMS data blog and we go into
events so if we went looking through here um I have uh which one was
it oh I I switched it to activities there we go so in
activities we have this family fun bull. 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
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 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 copy that URL and then I can paste that into the
Json feed EUR now if we were to put this into uh
data preview mode in here we see the data that we're
now getting from that individual post and from here we actually have access to
things like content extra content the 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
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 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
these little uh these little uh titles here these are all your little macros that you're going to need to use
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. 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 formatting in here with uh twig which is
cool summary and then I got content raw so if we actually preview
this we see now that the uh blog image comes in and the entire blog content
comes into an email now if you now if you were to mix 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
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 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 the next event hit preview make sure
everything looks pretty send another email and so I'm automating this whole
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 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 marketing or even providing email
marketing for other customers of yours any questions so far automation is
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 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
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 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 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
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 the whole link just a AGM
-224 hope that works we'll see what
happens boom and there you go yeah and it's cool these these buy tickets and
view uh I think yeah the buy tickets 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 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
header where your time stamp is I I know that line probably scares some people a little bit right um and normally what I
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 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
right so um we're we're displaying that time stamp field but the time stamp field in total cs1 is just like this
ginormous number it's not readable at all right so twig um which is a part of
feeds um has this date function that 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
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 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 is pretty cool yeah and it actually
comes out pretty um pretty nicely in here too it uh right there Sun it has
the proper date exactly they want to it probably probably don't need a common there but
whatever now I'm just nitpicking 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 right
or I'm not too I have some settings on on that side um okay they actually
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 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 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 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
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 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 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
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 not only just the websites to do but
even my business and that kind of leads me into what I built with feeds table
Pro hey you mind if I a couple on the go back to your other email
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
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 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
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 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
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 this has been implemented since 2022 oh
now yep yeah yeah so the reason why 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
I that was my question now the only the caveat is like the data store form
doesn't allow you to like edit an 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 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 I've only ever like utilized this aspect uh this aspect of the data store I've
never I've never actually utilized the 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
hilarious right there's just things just so funny enough the the data store form is on the is in the content Stacks the
reason that is is because it's meant for you like to create a form on your website that then saves into the admin
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
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 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 this little button this is the uh
world's smallest Foundation six form um it's literally it's submit button and
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 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 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
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 for a simple button that just notifies
so it's all preset up with like an alert emails hits me on every email address
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 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
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 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
a video that pulls from the blog post everything so when I hit preview this generates my my feed stable Pro email
and it was just generated straight from post which is super slick like that is
slick Automation and laziness for for the win it's it's one of my favorite
things um right let's see here we can get out of this one and out
of that one cool oh sneaking showing stuff I shouldn't be showing uh let's
see here dou project
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 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 load one more project file
here I'll show that that'll be my last my last demo
I think's lagging today there you go cool so feeds table Pro so feeds table
Pro is a stack that I made that is for making HTML tables and it is just an
HTML table stack there is no super power that my stack has in bringing data in
that's why it's called feeds table Pro because really the power is in using feeds with it but let me show you a
basic HTML table um and we'll start that from scratch I'll actually delete this
out and start from scratch so we'll bring uh feeds table
Pro onto the page and this is your 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
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 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 cells here going to add
date We'll add 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 that we have a header row name date
age down here in the body we can add a row I'll just add a few cells here and
I'm just going to put Joshua and we'll put in today's date
I look like I'm 25 perfect preview that boom we now have a simple table now if
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
out some of these dates
and then um I'm just going to have a row that has a similar date different
name perfect so if we preview this now we have a very simple table we have the
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 some filters um you've got search sort
or both so we'll add on certain search and 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
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 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 displaying your data now feed table Pro
does come with a secondary stack it's called feed uh table 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 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
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 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
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 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
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 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
search but that's just a basic HTML table and that's really no fun the real
fun is when you actually start getting into utilizing it with feeds so I already have this preset up uh table
here um we have a header row with uh first name last name Age Country email
salary date uh I have some CSV data here now if we actually took a quick second
and looked at the CSV uh data um on the page what's really uh
neat about 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 name so this is where feeds is comes in
and actually can reformat your data so this here is a twig statement that
splits the name into two words first name and last name and it gives you new
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
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 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
if my dragging starts
working so if we go down here and you go 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 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
reproducing the row HTML and that's what gives you a table um on your
site so let's preview this perfect so now we have that CSV
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 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
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 you know people who make $56,000
boom just like that and the same thing we have that sorting we can still sort
the dates we can sort the emails and of the columns any of the data easily
sortable now something I didn't uh show in my video uh and actually came up
someone asked this question and I don't know how I uh I missed this my my
computer is choking on something um is inside of the cells here um if you
select any of the
cells what bringing me down today all right um
there is an option for custom content so if you check mark that you can actually bring in your own Stacks into this so
I've kind of created a another demo here on my sandbox and this is using uh feed table
Pro feeds and someone secretly cool awesome stack coming out soon called
pop-up caption 2 so in here I connected this to my
stacks Json from stacks weaver.com and I've added in a pop-up caption stack
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 getting it to bring in the blog post
image and then I have for the hover content media on my site the title of 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
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
integration with Viber cart so that's how my my link to the actual like the
peral link is linked over to the blog 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
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 is the media field which is inside of
Pop uh caption here uh that data that's 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
also named in this in the descriptions here so it could be popping in from there um I think you look at URL cury
mixer for search feeds uh what I got Turn
Style yeah turn style oh it's mentioned
here search is really good so yeah so you can have images you can have multiple forms of data points in there
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
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 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 reading the data because it that is in alphabetical order which is pretty cool
and also I love this I could do this all day [Laughter] Joe this is actually
deadly now with feeds table Pro um of course it's it's
really powerful um but also simple so if you utilize uh Foundation uh six there
is uh some really cool stuff that you can do with uh the table Swatch that was
the slowest I've ever seen that go saw that right it was like
y so in uh in here you can actually have uh the
table style Swatch and if you use the table style Swatch you can just style the table
because it is an HTML table and it conforms to um all of those uh Swatch
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
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 a like this where you can now stylize the table exactly the way you want
to and it's just using a single Swatch like there's there is no real stylizing
options um inside of my stack because uh 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
I've decided not to complicate the stack anymore by adding in any of those complicated settings um and if you're if
you're not using foundation and you still want like the cool table style stuff that Foundation has well all of
those swatches still work in any theme that is true so um yeah that is
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 minutes till Joe yeah yeah we're good dude cool so inside of the stack here
there is a columns width settings now this is a little tricky it has to be
here because of HTML this whole thing was based upon how you actually have to 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
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 went like 150 pixels uh on that first one we previewed
that that's now locked in that first one to 150 if we actually maybe bring it
down just to show um bring it to like 100 for
instance you'll see that it kind of scrunches so that's a little too much oh that's also
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 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 say Auto and in column seven just add a
pixel so if we said you know 150 over here bring that down
too so now we've got the date locked 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 devices here all of a sudden it
scrunches and the data goes off the screen what's going on so with this you the table actually has
Sid scrolling automatically enabled so it just you can actually scroll that table um and view the data but this
still doesn't look pretty at top so to fix that
um that computer is fro there we go to fix that if we click
on feeds table
Pro when that load and here we have a set width and set Min width so if we up
this minimum width to like
900 preview that now that's the minimum width on the
entire table correct correct so that's a 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
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 off yeah so you can set your minum width
um you can also set just a width in 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
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
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 width test thing
it's measuring the actual page not the uh do uh instead of do Target the parent instead of the
browser oops where oh it's oh it's at the bottom of the page it's still not
measuring that container oh 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
in the header row if it will yeah it'll let me put it in here
interesting we'll see how that works so it's still showing yeah is
weird how that works still going full
wide it's whatever it's it's it's matching whatever the search is so it
must just be the width of that particular container try in here and see what happens
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 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
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 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 um there is options to do column spans
row spans so if you wanted a you know 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
name we can then um do a column span on that to two
columns so you preview that now you have name is
actually taking you know both columns 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
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
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
alignment um you do have the power to do row alignment and then um I do realize that
my stack takes up a lot of space so it's been set up uh thanks to the great
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 can just minimize the entire stack Sean was wondering if we could reduce the
width of the search field oh absolutely this was a really uh
recent update so on the search field um you have the option to uh do custom
widths and they're custom widths based on a mobile tablet desktop and you can
also set alls um for each of those as well so if you uh wanted to you know
mobile here we've got 100% we've got tablet 40 uh desktop 40 um preview that
the search can be adjusted if we wanted desktop to be on
50 there you go nice same with alignments if you
wanted to have uh you know alignment on you know mobile be left or whatever
medium Center and then you could do you know right if you really wanted to so
all of that is uh programmed into the search deck um very
well yeah cool score
dude perfect uh any other questions Jo um no there was a lot of people that
were blown away by all your email stuff though yeah the email stuff I knew the email stuff would be popular um and I
know you you brought out that um that 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
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 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
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
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 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
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
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
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 version four I released version two and three as free updates so um yeah version
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 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 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
overlaying text on images and um yeah I was like hey you
know what I want to uh you know and I 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 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
former glory um and yeah let's let's show it off cuz it's mighty beautiful
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 anything let's go ahead and preview this over here all right
so here is popup caption and oh there um well as you see
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 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 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 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
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 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 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
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
there's also um let's see slide um so there slide where it kind of
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 need to um but yeah pretty cool um and then there is roll out and roll out is
very similar to slide um where it differs is you can notice the the
content doesn't animate with the um the 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
slide um but similar um and then we have
rotate as you see rotate goes ahead and 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
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
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
content um now there are other modes um I won't go into every possible combination of them um but let's go to
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
does is um it pushes the image for in order for the caption instead of overlaying the caption it pushes it okay
um and then there there also is the ability to Overlay by default um so by
default on uh 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 the difference there pretty cool now um
next up is uh let's go ahead and uh I'm just going to preview inside rapid Weber here um so we're showing the T the um
overlay by default but there's other 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 the ability to help with that and yes we
we could go ahead and like adjust the opacity of that background color but 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
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
only only blurs it when the overlay is there right so um yeah really cool where
that adds some level of you know 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
so we can kind of see that okay so now I turned off blurring and I
only have Satur desaturation turned on 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 images black and white right but only
only when the overlay is over them right so pretty cool question for you Joe yeah
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
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 link and question two can we now this is
my question it's not in that chat is uh 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
the um the blur and saturation
that's the same thing from filters I just didn't want to add in you I thought those two made the most sense for
this more if you want to add more you can use filters Pro and just tack on a
class here um and yeah it should that should work perfect perfect
awesome 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 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
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 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
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 clickable okay you can do either
way um let's go and turn off custom content um now you can do image
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 here for now um I think I have a video file in me all
right there we go we're going to put in that video file um and let's just preview
right so there it has a video it autop plays and as you see the filters even work over the video which is pretty cool
okay and obviously that video maybe interesting let's go ahead I'm going to try let's add in some
blur we add in some blur as well 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
the video's loading the poster image would display but um yeah there we go even blur works on video and as you see
it the video still plays in the background um with the blur
effect um yeah pretty cool that looks really
cool um sweet okay let's see yeah so we did image uh batch Warehouse uh video um
alt text links classes uh oh you can 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 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
squares right so yeah uh make that super easy um and then there's various things
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 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
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 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 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 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 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
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 grid you just basically keep adding new
popup items and you can just build out your grid okay um and
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 could chuck feeds into here as well um
and then you know and then and then feeds could generate as many popup items per image or per whatever right so yeah
um yep okay and then yeah I mean there's 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
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 identical to what I showed you um the difference with popup grid is all the
style options are kind of centralized in the main grid stack whereas and then in
each item it's just the content for that specific item right so just the image and the link and the and the and the
text content right whereas in popup caption you have the content and the style settings all in one right so this
is just kind of like a standalone popup caption um you could build the same
exact layout um that I did here with the popup caption stack like you know um I
think I deleted that demo that was 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 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 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
these on the page and they'll all act independently of each other hopefully that makes
sense okay um yeah I sent you in the zoom chat a link to my popup caption
feeds image demo oh yeah oh cool let's check it
out yeah sweet wait yep so this one you know he has
instead of you know having the entire 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 this the that's solo because yeah I did that solo
sweet yeah it's pretty it's pretty slick and so so what happens if if you
notice here the way the animation works is it follows your mouse so um here
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
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 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 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
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 very smooth pretty amazing animation I think
it's really awesome um oh before I forget I check out this demo so I was 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
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 then um I transform here I'll I'll turn
off the transform so we can kind of see the progression of what I did um let's 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 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
what we have um I made everything a square okay so let's go ahead and turn
back on the clip path okay now let's so clip path what
that does is it adds a clip path to each one of those 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
was shifted and up right um so what I did there is I added a class to the
bottom three okay called shift left so the bottom three popup items
have a class of shift left and um so I created that that swatch a transform Swatch and what it
does is it moves it 50% to the left and 45%
up okay and it's 50% of the size of the actual
item okay so I moved um again I moved like this one it takes the 50% of the
width of the actual Square Square here and it moves it over so that perfectly centers it here and then I moved it 45%
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 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 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 The Gap so that I only did 4 five the
Gap looks better yeah so there we go like that's just
that's very cool now originally we tried this with circles um and it it it was kind it
worked but the animations were kind of odd um well well let's here I'll remove
the overlap really quick one second okay so we have circles right and
it it it works Works however what what's kind of odd is that we have this straight line animating over the circle
right and I don't know we I thought that was kind of odd it's not horrible uh but
shift it left but don't bring it up like shift it up like 10% so do the 50% left and then do
like 10% up let's
try yeah it's not bad that's not bad that looks good here if we add in we
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 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
this right how can we put that in a moving box just have dots going across the
page uh ah don't like deagon that's kind of horrible how about hexagon hexagon
interesting well that could be interesting
yeah that's a very interesting way of doing that I did like the diamond though I
think Diamond's cool I like that yeah no it definitely looks
good so there we go okay uh let me see 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 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
this week so there we go it's a fantastic stack it was it was
honestly it was so easy to start playing 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 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
great know that's uh it's pretty neat it's a good sack I think it's a
really quality step thank 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 background so not sure not sure maybe on
the overlay no no so put the so do this 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 container to like have a background
behind your your grid yeah you could do that I mean yeah I think you just want
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 a hero or whatever
uh we want an image or image just put an image yeah
um I don't really have any air or we'll do this is not going to look good I'm
not gonna win any Design Awards on this one but can you blur it oh wait not that's not the right
one oops oh I didn't put it the class on the container that would help that would that would
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 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 do
um okay we're we're just playing here then let do oh wait it's under components let's go to filter
Pro um BG 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 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
insane that's the browser there's nothing I about that yeah is it is crazy
strong that blur kicks in exactly
nuts I that that's that that that does 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
overlay on BG uh and we could do let's do like
white pacity 25 and then on this one we want to do it on
before
before no interesting wait
here oh no we don't even we can do uh
blend oh wait
no let's see this is
doing oh Black Baron land
[Music]
they why isn't that working where is it here it goes
there any effect if you check the
filter
interesting h oh
whatever play that and figure it out later yeah but it's possible you can
definitely have have it in front of a background that's what someone wanted to know yep uh but one thing what you had
an idea let's play around uh let's do a
shadow like if we were to do a shadow on popup caption
let's try that you oh if you're doing a clip do
you have overlay yeah I'm wondering yeah I could 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
interesting um because it's definitely been clipped
by 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 shadow on the CLI
[Music] 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 where I needed to add some margin
because it was clipping when it Target was targeting it it was clipping
it overflow no darn if you did overflow visible
wouldn't that mess up the clipping it doesn't no but yeah that drop shadow
doesn't doesn't work with clipping darn 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
find a way to do it
oops all right um sweet all right I don't want to waste anybody else's time
I appreciate it thanks everybody thanks for popping in Josh share your wisdom
your feeds wisdom I appreciate it my pleasure sweet okay let me see if
there's any other question okay everyone enjoyed it cool thanks everybody hopefully see you on Friday um
yeah Friday is uh our Hangouts as usual um go ahead and uh yeah see you on
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 my latest newsletter the calendar the Weaver space calendar um if you
subscribed to it before um you know it's 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 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
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 I'll see you on Friday at the hangout cool thanks Josh thanks to everybody for
joining and ask them some great questions