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