don't know
[Music]
so in this video let's look into the
feeds files pack so what does the feeds
file pack give us it allows us to
basically inspect a directory of files
on our web server and then display that
data within any layout we can imagine
now here in the demo I have a couple
really simple examples of a fully
interactive file browser so here I'm
listing out a list of files and folders
on my server
and if I were to click on the files they
actually download directly to my machine
and if I click on any of the folders
it's fully interactive so here I click
on that here's another folder I can
click on that and here are the files
within those now once I'm inside of a
folder I can click the back button and
go backwards
and then once I'm at the top level I no
longer have a back button okay so really
cool this gives us a very interactive a
way to display and interact with files
as you see I'm also displaying data
about the files so the file size
um the date the last modification date
of the files now let's look at another
layout
here's something different and again
another spin of a file browser
um but here I have a grid and if it's an
image I displayed as an image
um if it's a folder I display this SVG
and if I click on it it goes into that
folder and as you see as I keep going
through here it goes all the way down
and if I click on any of these images it
actually downloads the image directly to
my machine
now these layouts again are built with
Stacks the the files pack doesn't
actually give us any of this this is all
built with our own tools that we already
have it just gives us access to the data
so in in that case you know we could
build out let's say a gallery let's say
I listed out all the images and when I
clicked on one of these images it opened
a light box that displayed a full image
right it's really up to you
um to build out these layouts
um this demo here just gives us some
inspiration on what we could do for
example if I go into PDF embed
um while this this actually is a PDF
this is my PDF embed stack with the
actual PDF embedded inside of it
right
um so this gives us really interactive
um you know way of displaying file data
so let's jump into rap Weaver and uh see
how uh these are implemented
so here is the files demo page that's
inside the feeds demo project and if we
see here this is the actual file browser
uh demo and uh it's just a four column
um so I have this static four column
here
um and then we have a I have a divider
and then here's my feeds stack
and in feeds I go ahead and I added a
files feed from my feed and in here it's
super simple you just simply put in
Depot or you know here I have slash
Depot which is the path to the folder in
which I want to display the files and
folders
now here in the ignore rules you can
actually Supply a comma delimited list
of file names or folder names of strings
that you want to ignore so let's say we
want to ignore anything that has the
word sale in it or anything that has the
word
um you know private I don't know
anything right and if any of these words
are contained within that file name or
folder name they will be ignored
now if you only want to display files
and no folders at all just simply click
ignore folders and all folders will be
ignored
so with that said let's let's go ahead
and dump I mean really the feeds file
pack gives us data to process within our
feeds and we can create any sort of
layout we want
now I am going to assume some knowledge
of how fees works so I am going to glaze
over some of this but let's go ahead and
turn on data preview and let's look at
the type of data available now when we
are in preview there's a standard data
set that is displayed obviously because
feeds doesn't have access to the files
on your server it just kind of gives you
some dummy data to play with
so here we go I have just some dummy
data that we can see here and we can see
all the type of data that we have
available to us for each file and folder
so we have the name okay which is the
full file name we have the base name
which is the name without an extension
we have the full path to the file
we have the path link which is different
but depending on whether or not it's a
folder or a file if it's a file it's
going to be actually the same exact path
as the path
but if we see further down we'll see
that folders slightly different
next we have what type is it is it a
file or a folder we have the size now
this is the size of it in bytes
and I'll show you uh in this in the
layout here how I'm converting that to
kilobytes which is interesting
um then we have the time stamp and we'll
show you how we can modify that to
format that a little bit using twig and
then we have the extension so if we want
to you know figure out the extension of
the file so this particular one's a PDF
so here's another file it's just a JPEG
now here is a folder we'll notice here
in the folder that the path link is
slightly different and this uh is kind
of the magic that gives us the
interactive ability so if we have a
folder and we click on it
um it'll actually tell uh the files
engine to go ahead and drill into that
and change the path of our file
or the folder that we're displaying okay
so pathlink is a is the easy way for us
to link to folders if you notice for
folder for folders extensions are blank
because there are no extensions on a
folder
okay let's dive into the layout now that
we've kind of seen the data
um
and what that data looks like
so here we are
um as you saw above I have my four
column which has that static header that
has all of the you know columns that
we're going to be creating and in the
feeds essentially what I'm going to do
is I'm going to create a new
four column layout for every single file
or folder
so here um if you've watched our Twigs
video
um we have the HTML wrap stack which is
uh useful it's in our getting started
it's in our starter pack so make sure
you get that
um and it is a great resource for doing
tweak templating actually
um so here I just have an if statement
that says if the type is the file
uh I'm going to go ahead and display
this and if we notice really the only
difference here is
um the icon so I'm just playing a file
icon versus a folder icon and those are
just svgs directly in the button label
and then I'm injecting the name okay and
the name is the same
um you know variable for both folders
and whatnot
now for the link you'll notice inside
the link for each button okay
essentially I'm putting the path link
macro into the link okay now um for the
files I you I'm using the path macro but
since I the path macro and the path link
macro are the same for the file I could
use the path link variable here as well
and it would be identically the same now
here I am using the foundation six
button
um and it has a force download option
um I in another layout I show you how
you can get that with the getting
started link um as well okay
um and then here in column two with the
type I'm just displaying the type so
whether or not it's a file or a folder
um and then in the size we'll notice
here that I'm actually doing something
different
um if it's a file I want to display the
size in kilobytes yet if it is a folder
um else I'm just going to display two
dashes because folders do have something
they're like 60 bytes
um you know depending on what a folder
is or the name of the folder but the
folder itself doesn't necessarily have
any size so I just want to just play two
dashes if it's a folder and we're gonna
convert
um the size here remember this was in
bytes
so I actually want to do uh the size
divided by technically it's a thousand
twenty four okay
um and then I'm going to round that this
is all using twig and then I'm going to
put KB at the end
okay so this again
we're taking the size attribute we're
dividing it by 1024 and then I'm
rounding it because I don't want
decimals I want to round it to the
nearest whole integer and we're going to
display KB at the end of that pretty
cool
next up is uh our next column our last
column is the date and I simply am
taking the modified field
and passing it the date format function
using twig and that allows us to do date
formatting
so as you see here's some really great
examples of how to use twig
um if you want more in-depth examples of
that go ahead and check out our video
that we already have on twig templating
um using feeds so some really good
powerful stuff there
now there is one stack that I haven't
talked about yet that comes with the
feet the files pack and that is the
folder backlink so when you notice
inside the feeds stack there is a folder
backlink here
and you can add it here but it's
actually intended to be moved outside of
the feed stack okay as it says right
there in edit mode so here I have the
folder backlink stack and this is where
I want my back button to be
and here you're just going to add
whatever button you want and I just have
a little SVG icon with the word back
and if you look here inside the link
um this folder backlink stack gives us
one macro that we can put in and it's
this it is the back macro so um we
simply put that inside of our link and
that will intelligently do two things
for us it will show or hide the back
button based on if we're in a subfolder
or not
and then it will actually intelligently
create the backlink for us so it figures
out what the backlink is and dynamically
puts that in there in the layout for us
so pretty cool
now we've already done a pretty
extensive look but I figured I'd look at
that second sort of layout that we built
um and so here we have the folder
backlink with the button and the link is
set to be the back macro and then here I
just have a grid and inside here I have
feeds we're giving it the feed the file
feed of Depot the same one okay and you
see here I have actually a few ignore
rules
um so I'm ignoring a certain file names
here
and then inside here we have a grid cell
and I have some logic and as you see
here I did some Logic on based on
whether or not the file is a PDF so if
it's a file and if the extension is PDF
then I'm actually displaying the my PDF
embed stack here
and then I have an else and then if I
was then assuming it it's a picture or
an image and I'm going to display that
inside a picture stack
and then below that I have a link which
links to the path which has a header
with an SVG that has a little download
icon
and then if it's not a file it's a
folder so I have the link here as well
and then I have the SVG of a folder
um with the name of that folder below it
and this link here you'll notice that it
actually uses the path link variable
because that's how we get that interact
ability when we click on a folder and it
drills down and displays the contents of
that subfolder before we go I want to
show you one quick tip and this has to
do with how the demos work on the Weaver
Space page and this is a pretty cool
interesting example here if you'll
notice that when I click on a folder
the page itself doesn't refresh now
let's go directly to that particular
demo where it's isolated this demo is
only on a particular page there's
nothing else on here
and so we'll notice when I click on a
folder here
the page actually refreshes and I can go
back now it's really fast because it's
just minimal it's Bare Bones
um but if I drill into any folder the
page actually does refresh
now if you have a full-blown web page
like this one having the page refresh
could cause some jarring right it maybe
it takes you to the wrong page wrong
place in the page if the page refreshes
um although most browsers are pretty
good about that
um it is nice that it's kind of
encapsulated here and the way I
accomplished this was through my
off-site stack so my offsite stack
basically here has an iframe that then
points to this page so while the iframe
is refreshing uh when I'm in the actual
demo the page doesn't move because the
iframe just simply loads and refreshes
actively on the page so it feels like
it's a very fluid experience so if this
is something that you're doing where you
you're baking in a file browser and
maybe a part of a larger web page
um iframing it could be a great solution
for you and you can do that using my
offsite stack
[Music]