Transcript

00:06 hey everybody Joe workmen here and in
00:09 today's video I thought it would be
00:11 really cool to show like some ideas
00:14 around integrating the CMS into third
00:16 party stacks so we'll woodgate I've
00:20 mentioned a couple times in other videos
00:21 has released a playlister stack okay
00:24 it's an mp3 playlist stack right it's
00:27 awesome it looks beautiful and it pretty
00:30 much curbs all my desires and needs to
00:33 build a playlist act that's powered by
00:35 the CMS because his works so well with
00:38 the CMS now it works well without any
00:42 sort of direct integration now i'm
00:44 working with will right now to add some
00:46 direct integration so that it's just
00:48 even easier to build right but i figured
00:52 this would be a great case to to take a
00:54 stack and then let's that has no ties to
00:58 the CMS at all right and integrate it
01:01 with the CMS and this is a great one
01:03 because it uses not only just text right
01:05 but we're gonna manage text images and
01:08 mp3s for this stack right so it's really
01:13 cool um so without further ado let's
01:15 jump on in and see how it's all done
01:17 okay so here's a really simple webpage
01:20 that i built and at the top here we have
01:23 the playlist or stack that contains our
01:25 album art some you know all of our
01:27 information about the album and then a
01:29 few tracks here that obviously if we
01:31 click on them we can play all of those
01:33 tracks and all of this data is actually
01:36 managed by total CMS as you see at the
01:40 bottom of this page we have an image
01:42 area that controls the album artwork we
01:46 have a few text boxes that control the
01:48 album title the artist and the album
01:50 info and finally down here at the bottom
01:53 I have an area where i can add new mp3
01:55 files to the playlist stack so this is
02:02 super easy let's show you just
02:04 everything that they can do right now
02:05 obviously I have the admin and the
02:08 content stack on the same page right and
02:10 you're probably ultimately going to have
02:11 these on different pages right
02:13 but let's just go ahead and change some
02:15 things right so I'm going to go ahead
02:16 and add some new album cover okay i'm
02:20 going to call this we're going to change
02:22 the name to hangout classics okay the
02:32 original hangout crew okay and i'll
02:40 leave that as is okay and let's go ahead
02:42 and save our new text areas okay so i've
02:46 saved our text aries i have a new album
02:48 art let's go ahead and add a new song
02:50 right so i'm going to go ahead and just
02:51 drag and drop a new mp3 file it gets
02:55 uploaded and it's done okay now um all i
03:00 need to do is refresh my webpage here so
03:03 what we'll notice now is we have new
03:04 album cover art i have a new album name
03:08 new album artist okay i left the album
03:11 info alone okay and i added a fifth song
03:15 okay here the full work of an intro now
03:18 while i was doing this someone else
03:20 added another song here okay but as you
03:23 see you can easily just add songs in
03:25 here as you see fit so that's really
03:28 cool now keep in mind that as of this
03:30 version right now the playlist or stack
03:33 has zero direct integrations with the
03:35 CMS all this is done because total CMS
03:39 has the ability to control content
03:42 within stacks right now playlister also
03:45 has the ability to look at a folder of
03:48 files which is how really all of this is
03:50 up you know able to work for listing out
03:53 the mp3's right but it's a perfect
03:55 situation that we can leverage um so
03:58 let's jump into rapidweaver and see how
04:00 easy this was to set up so here we are
04:03 within rapidweaver and this is the page
04:05 that we just looked at okay and this is
04:07 edit mode for this page and i see here I
04:10 have my playlist or stack and if we
04:12 scroll down we'll see that i have my CMS
04:14 admin stacks okay so we're actually
04:18 going to look at the admin set up really
04:20 quick um and that's pretty
04:22 straightforward right at the very top of
04:25 the page i have my admin core stack
04:27 okay and then here I have an image i set
04:30 the d ID to be an album I have my text
04:35 three text boxes one for album title
04:37 which is set to the idea of album we
04:40 have the artist which has the idea of
04:42 artists we have a text box here that has
04:45 an ID of info for the album info and
04:49 ultimately here i have an admin Depot
04:51 stack that has the ID set to play list
04:54 okay really simple now let's go ahead
04:59 and jump into the playlister stack so if
05:03 we go into the playlist or stack the one
05:05 key thing you're going to want to make
05:07 sure you do is you set the setup mode to
05:09 use a simple warehouse okay now in this
05:13 mode will has a great little tutorial
05:15 here that teaches you how to find the
05:20 directory and it needs to be a what's
05:22 called a relative path to your folder
05:23 now / wills instructions I would have
05:26 set my mp3 directory to be this dot dot
05:30 slash CMS data Depot playlist and that's
05:34 because the current web page that I'm on
05:36 is / playlist index PHP so I'm going to
05:40 use the dot dots to go back up one level
05:42 to my root directory okay or the root of
05:45 my website and then i'm going to do cma
05:48 i'm going to go into the CMOS data
05:49 folder the Depot folder and the playlist
05:52 folder okay if you notice this playlist
05:54 this is ultimately the CMS ID of our um
06:00 file depot okay so we know that our
06:04 playlists are stored inside CMS data
06:07 depot and then our folder is playlist
06:10 okay now you're gonna change his
06:12 playlist folder to be whatever CMS ID
06:14 you define inside the depot okay now if
06:18 you ever have any kind of worries about
06:20 how many dots you need because sometimes
06:23 you'll need dot dot slash dot dot slash
06:25 right it's all sometimes that could be
06:28 confusing um so inside stacks there's
06:31 actually a macro that is normally
06:34 reserved for developers but if you're
06:35 watching this that it is a convenient
06:37 where if you do um percent relative doc
06:41 % that will automatically add these
06:44 little dot dots for us okay
06:46 automatically so this is going to
06:49 automatically determine what the
06:51 relative path to the doc route is and
06:53 then we need to add / CMS data / depot
06:56 and then our our Depot ID which in this
07:00 case is playlist okay so here i just
07:03 copied this and i put that inside my mp3
07:06 directory setting now you'll know here
07:09 notice here inside the artwork setting
07:12 here I have a URL and this is the URL
07:15 the warehouse to URL to the image okay
07:19 that we've done so basically what I did
07:21 is if we if we preview this page inside
07:23 rapidweaver I can go here and I can
07:27 click this little copy paths I copy the
07:30 path to the full image okay and then I
07:34 pasted it here inside the artwork this
07:37 way whenever I change that image the
07:41 artwork for the player will also change
07:45 now next up we have the album title the
07:48 artist and the info okay and here I'm
07:51 just inserting the CMS text macros okay
07:55 and remember if you're using the macros
07:57 at the bottom of the page you need to
07:59 make sure you have at least one CMS text
08:01 stack on the page okay so that's the
08:03 CEMEX content stack the white one okay
08:06 so you add that to your page and then
08:10 that will make sure that it processes
08:11 all the the macros on the page okay and
08:14 that's it right um the rest of the
08:17 settings inside the player stack there's
08:20 tons of them those are for all
08:21 controlling the player okay but these
08:24 basic settings this is all that we need
08:26 to fully integrate playlister into the
08:29 CMS okay so just another review right
08:32 you set up the playlister a setup mode
08:35 to be simple warehouse then you need to
08:38 set up the directory to the depot okay
08:41 on the relative path now we have this
08:44 cool little macro the relative da crew
08:45 macro that gets us you know that helps
08:47 us out so we can do relative doc route /
08:50 CMS data / depot and then we need to
08:53 have our CMS ID
08:55 we have our artwork image that you can
08:58 get the URL directly from the image
09:01 admin stack so you can just copy and
09:03 paste that in and then we use our text
09:05 macros for the title artist and info
09:09 areas okay and that's all that we need
09:12 to do to tie the playlister into the CMS
09:16 so that's about it right everybody right
09:18 i mean as you see we took a stack that
09:20 didn't have any sort of direct
09:23 integration with the CMS and we
09:26 integrated it with the CMS very nicely I
09:28 might add right now this particular
09:31 stack is super nice because you know
09:33 we'll did a great job in supporting a
09:35 simple folder of images or a folder of
09:39 mp3's right so and we have a generic
09:42 folder tool in the CMS in in the file
09:45 depots so we were able to leverage that
09:49 right but just look at how we integrated
09:53 the images and the text into the stack
09:55 as well right we could do the same thing
09:57 with so many other stacks out there you
10:01 can integrate images into everything ok
10:03 just by using that warehouse to link you
10:06 can use the text macros to integrate and
10:08 customize the text in the stack right
10:11 now this particular stack where I'm
10:13 going to work with will directly because
10:14 I it's something that I really wanted to
10:17 do and he did it so I just want his to
10:19 shine and be as awesome as possible
10:22 right so I envision potential in the
10:24 future you put in your put your your
10:26 depo ID and it takes care of doing the
10:29 path for you and all that stuff right um
10:32 and I'm going to work with will to to
10:34 make that happen ok but outside of this
10:38 playlist or example there are so many
10:41 stacks out there in the universe and I
10:44 hope you can take what i did here and
10:47 really take it and apply it to other
10:49 stacks as well so I I also look forward
10:53 to the integrations that you're going to
10:55 build right if you come up with a really
10:57 great one go ahead and let us know or
10:59 post it to our Google Group right it I'm
11:02 really excited to see how we can take
11:04 you know the CMS and really make it a
11:07 lot more
11:08 powerful and I do plan on working with a
11:11 lot of other Deb's to try to get as many
11:13 other stacks as possible tightly
11:16 integrated with the CMS so that we
11:18 really get a a great online editing
11:21 solution for our clients right so I am
11:25 excited about this I hope you are too
11:27 and I can't wait to see what you build
11:30 with it so thank you very much for
11:31 watching I hope this video helped and
11:33 have a great day bye"}]