Transcript

00:00 slot machine is the perfect way to
00:02 dynamically add a little bit of variety
00:04 to your websites
00:14 hey everybody Joe workman here and today
00:17 we're gonna be looking at slot machine
00:19 3.0 this is a really exciting update to
00:22 slot machine it adds a lot of power and
00:25 a lot of simplicity it is super easy to
00:27 use is definitely the easiest and most
00:29 powerful way to add a little bit of
00:32 variety to our webpages so as I said
00:35 slot machine ships with three different
00:36 stacks as we see here in the stacks
00:38 library
00:39 it comes with slot machine randomize and
00:41 a random image let's look at the main
00:44 slot machine stack first when you add
00:46 slot machine to the page what happens is
00:49 you have multiple slots that you can add
00:51 and what happens is on page load slot
00:54 machine will randomly choose one of
00:56 those and display just that slot so if
01:00 we look at this really simple web page
01:02 one knows this top randomizes a
01:04 completely different layout every time
01:06 and on the bottom eight randomly chooses
01:09 different images so that we can display
01:11 different images on page load and if I
01:13 just refresh this page we'll notice that
01:15 every small time here we have a
01:16 different sort of layout up here we have
01:18 a two column and here we have three
01:19 different images
01:20 if we keep refreshing this page we'll
01:22 notice that we get different layouts on
01:24 the top and different images on the
01:25 bottom
01:27 oh we were a winner and to do that
01:30 inside edit mode is really simple as we
01:32 notice here in this top one we have
01:34 different slots and every single slot
01:36 contains a different sort of layout
01:37 right and on the bottom here I have a
01:40 three column stack with a slot machine
01:44 and inside each slot is a different
01:46 image now for convenience sake so it
01:50 doesn't take up tons of space inside
01:51 edit mode slot machine has a collapse
01:53 lots option which will then only display
01:56 the very first slot for you inside edit
01:58 mode and if you ever want to force
02:01 preview a particular slot you simply go
02:04 into the slot and click preview slot so
02:08 if you want to like if you're working on
02:09 the layout for this particular one and
02:11 you want to make sure when you preview
02:12 inside rapid over this layout is always
02:15 displayed just simply click this preview
02:17 slot and that will exactly do that for
02:20 you so now that that particular slot is
02:23 previewed
02:25 and we show a little icon here to make
02:27 you know that that particular slot is
02:29 getting previewed manually within
02:32 rapidweaver
02:32 you can simply turn that off when you
02:34 don't need it anymore now the next stack
02:37 is super simple this is called a
02:38 randomized and what this does this
02:40 always displays all your content but it
02:43 randomizes the order so here we have
02:45 just a simple set of numbers here that
02:47 is just a bunch of numbers just on top
02:49 of each other if you notice when I'm
02:51 refreshing this page but orders of those
02:53 numbers are changing now we've also
02:55 added support for other things such as
02:57 foundation grid so if you're using
02:58 foundation grader other layouts you can
03:00 actually randomize those particular
03:02 layouts as well now in this example I
03:05 just have very simple just some numbers
03:06 but imagine you can really randomize
03:08 anything it could be images it could be
03:10 entire layouts of stacks it doesn't
03:12 really matter
03:13 um the randomized stack will just random
03:16 those orders for you now configuring the
03:19 randomize stack couldn't be easier on
03:21 you simply if we add a new one to the
03:23 page you'll notice all it is is a single
03:27 drop zone so in this example here I just
03:29 added a bunch of text stacks on top of
03:31 each other and then randomize will
03:34 randomize the order of those text stacks
03:36 dynamically on every page load and then
03:40 further down the page you'll notice here
03:41 that we have a block grid that is inside
03:44 of randomize and then inside block grid
03:47 basically what we want to do is we set
03:49 inside randomize there is a single
03:51 setting here that defines what elements
03:53 so you would choose foundation block
03:55 grid inside here and then that will then
03:57 notice that it has a block grid inside
04:00 and it will randomize the elements
04:02 within that block grid
04:06 now there are other options such as if
04:08 you just have any sort of lists it can
04:10 randomize the list this also lists tend
04:12 to be used for a lot of different
04:14 layouts tax so that could potentially
04:16 work for a lot of different grids and
04:18 whatnot because a lot of those do use
04:20 lists and for those of you that are CSS
04:23 Wizards you can choose custom and then
04:25 define your own CSS selector for and
04:28 then the contents of that selector will
04:30 be randomized now the last stack in this
04:33 set is called random image and it's
04:35 really in a very interesting stack
04:37 what is the use case that this is
04:39 solving let's say I have a folder of
04:41 images on my server and I want to
04:44 randomly display one of those images on
04:47 the webpage so for example here on my
04:50 server I've created a folder called slot
04:53 machine and I've added four different
04:55 images to this folder on my server and
04:59 what I can do here is this is
05:01 transmitted I can right click and say
05:02 copy URL so I get the URL to one of
05:05 those images
05:06 all I need to then do is paste in the
05:09 URL to that image on inside the stack
05:14 and we'll see that so we know right now
05:16 in edit mode whether or not that works
05:18 this is that actual image that I
05:20 uploaded to the server
05:21 now within rapidweaver we were always
05:24 going to be seeing this particular image
05:26 but once we publish the server you'll
05:29 notice that when i refresh this page it
05:31 randomly chooses any image from that
05:34 folder but this only happens after you
05:37 publish to your server
05:40 now as you see slot machine is super
05:43 easy to use it couldn't be easier
05:45 there's only a couple settings per stack
05:47 um it just works now you might be
05:50 wondering how does slot machine differ
05:52 from a lot of other you know random or
05:55 randomizing stacks or stacks that
05:58 randomly choose content and display only
05:59 one there's a big difference and slot
06:04 machine currently is the only one that
06:06 actually uses PHP and what that means is
06:08 it actually randomly chooses the content
06:12 you want on the server and only sends
06:15 the content that it chooses down to the
06:17 browser this is important because if you
06:19 have a lot of content that you want to
06:21 randomly display if all of that content
06:25 is sent to the server it could slow down
06:27 your webpages we only want the content
06:29 that is actually randomly selected okay
06:32 so that is a huge benefit and how slot
06:35 machine differs from a lot of the other
06:37 stacks that are out there now that does
06:39 come with actually a couple caveats
06:41 there are some stacks let's say you
06:43 wanted to put in an entire I don't slide
06:46 err inside slot machine kind of crazy
06:49 but let's say you wanted to do that um
06:52 that could potentially not work too well
06:56 if it's not chosen there are some stacks
06:59 that when you put it inside something
07:00 like slot machine and slot machine
07:02 doesn't choose it um if those stacks
07:04 have some JavaScript on the page it
07:06 could cause some conflicts because the
07:08 JavaScript looking looking for that
07:10 particular stack slot machine didn't
07:12 send it down okay because we only wanted
07:15 to display certain content so um while
07:18 slot machine is cool and it does it is
07:20 the best and that it only sends down
07:22 content that you really really want
07:24 um it does have that caveat where some
07:27 particular stacks um have JavaScript
07:29 that don't function properly when the
07:32 HTML components of those stacks don't
07:34 exist on the page so that is one
07:37 drawback I want to let you know about
07:38 that it's a minor one though so I really
07:42 don't think you should be using any
07:43 really crazy complex tax inside slot
07:46 machine really just randomize your
07:48 content a lot of you know random images
07:50 is a great way to do it so anyway yeah
07:53 hope you enjoy
07:53 slot machine this is a great great
07:55 update really powerful free update to
07:58 all existing users as well so hope you
08:00 enjoy the free update and take care have
08:02 a wonderful day and see you over on
08:04 Weaver space
08:11 "}]