Transcript

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