Transcript

00:00 come on
00:09 hey guys Joe here and in points version
00:12 2.4 we have some really exciting
00:15 features that allow you to control
00:17 points using total CMS feeds and other
00:20 Dynamic layout tools right so in this
00:24 particular first example let's go ahead
00:26 and dive in and see how we can use total
00:28 CMS to integrate and manage this
00:31 particular points instance
00:34 so first to start off let's say we want
00:36 to manage this particular image the main
00:38 image of points using total CMS now
00:42 there are several different ways that we
00:43 could do this we can basically go into
00:45 uh the background the image and we can
00:47 do a warehoused image and if you know
00:49 you can actually set a total CMS macro
00:51 as the background you could do that
00:55 however I think a potentially an easier
00:57 way to do this is just to use a custom
00:58 Drop Zone
01:00 and what you're going to do is you're
01:01 just going to add in a total CMS image
01:03 stack and there you just point in your
01:06 your CMS ID for your image and this
01:08 gives you a little bit more control if
01:09 we wanted to you know specify if we
01:11 wanted a JPEG or a PNG or we wanted you
01:14 know display maybe on mobile we wanted
01:16 to display the thumbnail right
01:19 this gives us a little bit more control
01:21 by using a Stacks Drop Zone in points so
01:25 again inside points we're just going to
01:26 go ahead and set the background to
01:27 custom Drop Zone and what that will do
01:30 is that will give us basically a drop
01:32 zone that we're just going to add in a
01:35 total CMS image stack
01:37 okay I kind of had that pre-done so just
01:40 to kind of show you what it is you are
01:42 going to have to drag in this you know
01:43 from your Stacks Library this total CMS
01:45 image and then get that all set up
01:48 now how can we configure the individual
01:51 points that lay on top of the image
01:53 using total CMS
01:56 so with this what we do is we let's go
01:58 ahead and add a point now traditionally
02:00 you can't really do this with total CMS
02:03 or easy CMS actually everything I'm
02:05 showing you in this first example is
02:07 also possible in Easy CMS
02:09 but one of the problems is we can't
02:11 control the position because I can't put
02:13 a macro here so there's a new setting in
02:15 points of called Advanced positioning
02:18 and when you check that you'll notice
02:20 that those sliders then turn into text
02:22 inputs
02:25 so then what we can do is we can
02:26 actually use macros so let's go ahead
02:29 and put in something like
02:31 um
02:33 percent CMS data
02:37 um let's call this point P1 X right so
02:41 0.1 x
02:43 we're going to put a percent sign into
02:45 that so that is our macro
02:48 um and then obviously down here we can
02:50 then do
02:51 um P1 y
02:54 okay
02:56 now if I by using these particular
03:00 macros
03:01 we are required to actually have like 5
03:03 percent save but let's say you wanted
03:05 your user just to save a number 50 or 4
03:08 or 20 or whatever right essentially what
03:10 we're going to do is we're just going to
03:11 add an extra percent sign at the end so
03:13 that requires that our users do not
03:17 actually have to put in a percent sign
03:20 when they save the data into total CMS
03:22 this is very flexible because then you
03:24 know if we want to maybe use pixels
03:27 instead right we can really put in
03:28 whatever values we want
03:31 um in here
03:34 so here we're just going to use percent
03:36 signs
03:37 uh and then here in the info you can
03:39 then go ahead and put in
03:41 a uh let's see P1 I don't know info
03:45 something like that right so 0.1 info so
03:48 we put another macro here for our
03:51 information
03:52 and the last place that you might
03:54 potentially want to use a macro is if
03:57 your point has a bat an image associated
04:00 with it you can go ahead and there's a
04:01 new option for warehouse image and here
04:04 you can put in either a URL or another
04:06 CMS macro
04:08 okay
04:09 um and guess what if you want another
04:11 Point remember these in manage
04:13 individual points
04:16 so if we want to have another one we
04:18 then or let's just maybe easier just
04:20 copy and paste this we could then say
04:23 this is for point two and I'm going to
04:25 do p2x and then
04:28 p2y and then P2 info
04:32 so on and so forth so basically you're
04:34 gonna have to create for every single
04:36 point that you want let's say assuming
04:38 you're you're not going to have an image
04:40 here okay
04:42 so here I have two points I'm gonna have
04:45 to create
04:46 six different CMS IDs
04:49 um just to manage two points so three
04:51 point three CMS IDs for every single
04:54 point
04:55 while it's possible that is a lot of
04:57 work okay
04:59 um if you want to really manage this
05:01 individually
05:02 however there's a better way
05:06 so let me show you the end result here
05:08 essentially what I'm going to do is
05:09 we're going to use a Blog to manage
05:12 points on top of an image
05:14 so here I have a point stack that has
05:17 five points that just has some you know
05:20 tool tips in there positioned okay now
05:23 if we look here here I'm managing the
05:25 background image using total CMS and
05:28 then on this side I'm actually managing
05:29 the points where each point is an
05:32 individual blog post
05:35 so if I can go ahead and edit any of
05:37 these so I can go ahead and let's say I
05:38 want to edit the bottom right one let's
05:40 click on bottom right and here I'm um
05:43 I'm editing bottom right
05:45 um here's the horizontal and vertical
05:47 let's say I want to change this to be
05:50 um 75 and 75 okay let's go ahead and
05:53 Save
05:55 and let's refresh the page
06:00 and what you'll see is this point now it
06:02 used to be over here is now over there
06:04 because I easily added that we could and
06:07 we can add a new point right let's go
06:09 ahead and add a new point so if I go
06:10 ahead and click add new Point let's go
06:13 um demo Point okay and horizontal
06:17 position is
06:19 um 25 and vertical is 75 let's save that
06:25 okay let's go ahead and uh reload our
06:27 page
06:31 and there we go there's our demo point
06:32 so I can now add as many points as I
06:35 want onto this image
06:37 super powerful now in this particular
06:39 demo this demo is actually inside the
06:41 project file for points
06:44 um I have it all on one page
06:46 you probably want to you know have your
06:48 blog list in the Forum on separate pages
06:52 um I think it maybe makes a little bit
06:53 easier but it's up to you it does work
06:55 all on one page it just kind of makes
06:57 for
06:58 um slightly chaotic interface sometimes
07:00 when you have them both on the same page
07:02 but for demo purposes I just wanted it
07:04 all on one page
07:05 so let's look at how all this was
07:07 implemented so here inside points two
07:10 um what I've done is I I have the same
07:12 interface so I have a CMS image inside
07:15 the stacks Drop Zone area identical to
07:17 how we saw that before
07:19 now instead of adding a point directly
07:22 here what I did is I added a total loop
07:24 stack for my stacks Library into points
07:28 then I added a single point inside of
07:31 total Loop
07:33 now in the total loop stack you want to
07:35 make sure that you set it to be the ID
07:37 of your points blog so I created a Blog
07:41 called points
07:42 and essentially you just want to make
07:44 sure that uh for you know you can sort
07:46 and whatever
07:48 um I just have date set to all posts uh
07:50 so I see all all points basically
07:54 you can limit the number of blog posts
07:56 or AKA points as well so you can limit
07:58 it to 10 or whatever you want
08:00 um so if you want to you know you
08:02 definitely if you don't want to have a
08:03 maximum set that limit to be as as big
08:05 as possible
08:09 um so then how do we inject all that
08:10 data into our points so let's go into
08:13 the point stack and you'll see all I did
08:15 was I'm using three Fields I'm using the
08:19 author field as the X position I'm using
08:21 the genre field as the Y position and
08:24 I'm using the blog post title as the
08:26 info and also check that I'm also
08:28 putting percent signs in here so that I
08:31 don't require the user actually input
08:33 that percent sign
08:34 um they just need to input a number and
08:36 I actually put the percentage in there
08:38 directly into here
08:40 okay so let's scroll down on this page
08:42 we can kind of see how things are worked
08:44 out on the total CMS admin side so
08:46 here's my uh my image this is just a
08:48 normal image stack an admin image and
08:52 the CMI CD here is called points
08:55 and then here is our blog configuration
08:58 okay
08:59 um now this isn't a Blog image this is a
09:01 normal CMS image
09:03 um and then in our blog list
09:05 I'm setting that to be a CMS ID of
09:07 points now this is the blog IDE called
09:11 points whereas this image is the image
09:13 ID call points so you can actually use
09:15 the same ID
09:16 um across different types of CMS
09:18 elements and it's just fine okay
09:21 um so here I have a CMS idea of points
09:24 for this blog list and for fun I
09:26 actually went ahead and changed some of
09:27 the things so instead of posts I said
09:29 points right
09:31 um I didn't sort then I hid some other
09:34 elements that I knew I wasn't going to
09:36 use for this particular blog list right
09:38 so I wasn't using any of these elements
09:40 so I decided to keep hide those but I
09:43 wanted to kind of make things a little
09:45 bit user friendly so instead of it
09:46 saying posts it says points
09:49 now below that is the blog form and you
09:52 see here I just added a I have a
09:54 permalink
09:55 which is I just changed the placeholder
09:57 to be ID we have the title which is the
10:00 point info the author which I changed
10:02 the placeholder to be horizontal
10:04 position and the genre which I changed
10:06 the placeholder to be vertical position
10:09 then of course we have a save button
10:12 now in the blog form all you have to do
10:14 is make sure that you set the CMS ID to
10:16 be points which is the same blog as we
10:19 set up our list to be
10:22 uh then I just added a a button here
10:24 that just links to this page which is
10:25 just a new post or new point
10:29 and that's really it it's really simple
10:31 setup and forever this total Loop will
10:33 take care of every single point that we
10:35 add it'll go ahead and add those
10:37 attributes into points
10:40 super super powerful
10:43 now very similar to the total CMS total
10:46 Loop integration we can use feeds to
10:49 actually integrate and generate our
10:51 points dynamically
10:53 so here's an example of that and this
10:55 example is also inside of our demo files
10:57 we'll notice that we added a feed stack
11:00 into points
11:02 and basically I could generated a CSV
11:05 feeds so if you see here I just have an
11:07 example of info XY with all my
11:10 coordinates here
11:12 and then basically very similar to Total
11:14 loop I take that data points and then I
11:17 just add the the actual macros from
11:20 feeds into here
11:23 now what's great about feeds is it will
11:26 work inside preview whereas total Loop
11:28 you actually have to publish now if you
11:30 were using blog you can actually use
11:32 feeds
11:34 to bring in your points blog and
11:37 actually have that work inside preview
11:39 but total Loop will not work inside
11:41 preview you will have to publish for
11:43 that so as a workaround if you do want
11:45 to use total CMS blog you can actually
11:47 use the total CMS integration from feeds
11:49 to preview that data inside wrapweaver
11:52 and it will work in preview and on
11:54 publish just the way total Loop was
11:56 built that it requires that you publish
11:58 but here here's the example that we have
12:00 using feeds and uh yeah super powerful
12:04 now in this example I did use a CSV file
12:08 but the same really works with any sort
12:11 of data feed within feeds
12:14 um it doesn't have to be a CSV file you
12:16 can use whatever feeds you want to
12:18 basically generate points dynamically as
12:21 long as that data maps to what points is
12:23 expecting it'll work just fine