00:00:11:22 - 00:00:13:01
In this tutorial we will
00:00:13:01 - 00:00:16:05
investigate the options
available for the image fields.
00:00:16:29 - 00:00:19:09
So these are fields
where a customer is able to place
00:00:19:09 - 00:00:22:01
images onto the canvas area itself.
00:00:22:24 - 00:00:26:06
The administrator
or template designer has full control
00:00:26:06 - 00:00:29:05
over the customization options
available to our users.
00:00:29:22 - 00:00:33:24
For example, the customer could be given
a fully dynamic field
00:00:34:19 - 00:00:36:27
with almost as much customization options
00:00:37:04 - 00:00:40:19
as the administrator themselves have.
00:00:40:19 - 00:00:42:21
At the other end of the scale,
00:00:42:21 - 00:00:45:29
options available to the end users
could be heavily restricted
00:00:46:08 - 00:00:50:07
so that they can do little more than place
an image into a completely fixed frame.
00:00:50:21 - 00:00:53:14
And the configuration
that you would select there is based on
00:00:53:14 - 00:00:58:01
what you would want to allow the customer
to actually do.
00:00:58:05 - 00:00:59:22
We'll also explore in this video
00:00:59:22 - 00:01:03:22
how to review our dynamic template
as a customer would to ensure
00:01:03:22 - 00:01:07:16
that the desired customization
options are available.
00:01:10:19 - 00:01:11:07
The first thing we're
00:01:11:07 - 00:01:14:18
going to do is to actually place
an image field onto our canvas
00:01:15:02 - 00:01:19:19
just by going to our fields section
on the top left of our MegaEdit editor
00:01:20:04 - 00:01:24:04
and dragging and dropping an image frame.
00:01:25:29 - 00:01:30:10
I have the ability to transform this frame
as I see fit so I can resize it
00:01:30:13 - 00:01:33:20
using any of these icons available
00:01:33:20 - 00:01:36:22
around the perimeter of the field.
00:01:37:13 - 00:01:40:16
I can rotate it
using this selection icon offset
00:01:40:16 - 00:01:43:00
from the top of the field
00:01:44:05 - 00:01:46:02
and I can reposition the fields
00:01:46:02 - 00:01:49:04
just by dragging and dropping.
00:01:49:04 - 00:01:51:19
Now, how that field will reposition
00:01:51:27 - 00:01:56:04
will be controlled by our editor settings.
00:01:56:04 - 00:01:58:19
So in the menu,
which we saw in a previous video
00:01:59:02 - 00:02:02:18
where we have the ability
to snap, to grid, snap to objects
00:02:02:27 - 00:02:06:16
or a free mode,
00:02:06:16 - 00:02:10:26
it's just gives us a a different way
of actually positioning different frames
00:02:10:26 - 00:02:15:05
relative to the canvas
or relative to other items.
00:02:15:05 - 00:02:15:29
So next, we're going
00:02:15:29 - 00:02:18:16
to add an image to our frame.
00:02:19:03 - 00:02:21:27
So to do this, we actually need
some images to select from.
00:02:22:13 - 00:02:25:21
So if I come over to the left hand side
and go to our Images tab,
00:02:26:28 - 00:02:28:27
what you'll see here
is that we have a number
00:02:28:27 - 00:02:31:11
of different galleries available to use.
00:02:33:03 - 00:02:35:07
So the default gallery is always there.
00:02:35:07 - 00:02:35:22
At the moment.
00:02:35:22 - 00:02:40:00
There's nothing specified in the default
gallery and I have a second gallery
00:02:40:00 - 00:02:43:05
specified as well,
which has a few sample images
00:02:43:05 - 00:02:46:01
located within it.
00:02:46:06 - 00:02:50:02
If we want to create a new gallery
or add entries
00:02:50:02 - 00:02:53:00
to an existing gallery,
we can just go to add files,
00:02:54:09 - 00:02:56:12
selects the files that are relevant to us.
00:02:56:12 - 00:02:59:17
So I'll just select
a few of those, for example,
00:03:00:21 - 00:03:02:13
and click open
00:03:05:28 - 00:03:07:15
those files before we upload it
00:03:07:15 - 00:03:10:05
with the upload progress
shown on the left hand side
00:03:11:21 - 00:03:14:01
and when they're finished uploading,
we'll see
00:03:14:01 - 00:03:18:05
those placed in our gallery.
00:03:20:11 - 00:03:23:03
So to get an image into our image field,
00:03:23:10 - 00:03:27:04
we just need to select an image
from one of our galleries and drag
00:03:27:04 - 00:03:31:08
and drop that from the gallery itself
into the image field.
00:03:32:13 - 00:03:35:11
Now what you'll see
is that the image we have highlighted will
00:03:36:01 - 00:03:39:27
populate the image field,
but it will not resize it,
00:03:39:27 - 00:03:41:28
it won't reposition it
or anything like that.
00:03:42:11 - 00:03:46:18
It will instead
rescale the image itself to fit the field.
00:03:46:18 - 00:03:49:06
So the field is
the overriding factor here.
00:03:49:27 - 00:03:53:13
So if I release that, you can see that
the field itself hasn't changed.
00:03:53:22 - 00:03:56:07
The image has been
adapted to fit the field.
00:03:57:21 - 00:04:00:11
We can change how that behavior operates
in the
00:04:00:22 - 00:04:04:09
in more detailed settings,
which we'll cover
00:04:04:09 - 00:04:06:25
in a moment's time.
00:04:09:12 - 00:04:10:19
Now, we also need to take a look
00:04:10:19 - 00:04:13:16
at some potential image field issues.
00:04:14:03 - 00:04:17:01
So this is a couple of warnings
that might appear
00:04:17:10 - 00:04:19:14
whilst you are modifying your image field.
00:04:20:02 - 00:04:24:08
The two main ones that you'll see are
resolution issues and positional issues.
00:04:25:01 - 00:04:27:12
So positional issues
are quite straightforward.
00:04:27:12 - 00:04:30:18
If your image is placed
outside of the main canvas area,
00:04:32:04 - 00:04:33:00
then you see that
00:04:33:00 - 00:04:36:09
you'll get this little warning
icon on the actual image field itself.
00:04:36:24 - 00:04:39:13
You get messages at the bottom
right of the screen
00:04:40:06 - 00:04:43:09
where you can get some more information
00:04:43:09 - 00:04:45:18
and it's telling you what's wrong
with position positional issues.
00:04:45:24 - 00:04:47:29
It's just a case of it's outside the area.
00:04:48:21 - 00:04:50:12
If you're happy with it, you can leave it.
00:04:50:12 - 00:04:53:26
Alternatively,
move it back into the canvas area
00:04:53:26 - 00:04:58:13
and you can see that
the problem has disappeared.
00:04:59:22 - 00:05:01:26
The other main issue is resolution.
00:05:01:26 - 00:05:04:26
So if I just rescale my image and again,
I'll cover these options
00:05:04:26 - 00:05:08:12
a little bit later on.
00:05:08:12 - 00:05:12:14
So I've rescale my image there so that
we've zoomed in on a particular section.
00:05:12:25 - 00:05:15:05
You can see that
a warning icon has reappeared
00:05:15:17 - 00:05:18:10
and we've now got a message
which says resolution issues.
00:05:20:07 - 00:05:22:00
I can get more information.
00:05:22:00 - 00:05:25:16
And what it's basically saying is that the
00:05:25:16 - 00:05:29:09
the quality of our image
does not meet all predefined settings.
00:05:29:18 - 00:05:33:25
So make sure you're happy with it
before you proceed with it.
00:05:38:18 - 00:05:39:17
So to resolve this,
00:05:39:17 - 00:05:42:09
we could change the scale, of course,
if we have the ability to do so.
00:05:42:22 - 00:05:46:13
Alternatively, if you are happy
with the image as it is it,
00:05:46:14 - 00:05:50:16
but you don't want the message to be
there, you can change in the settings.
00:05:50:24 - 00:05:53:07
The minimum required resolution.
00:05:53:18 - 00:05:57:04
So if I go to my menu from the top
00:05:57:04 - 00:06:00:12
bar here and then in my admin settings
00:06:00:12 - 00:06:02:25
so only the admins will have access
to this.
00:06:03:03 - 00:06:06:18
We can go to product options.
00:06:07:10 - 00:06:10:08
Then about halfway down here
there is a section
00:06:10:08 - 00:06:14:10
called General Field Features,
and then within there
00:06:14:10 - 00:06:18:27
we have minimum image resolution
where you can specify a value to use
00:06:28:25 - 00:06:31:17
if you want to replace the image
that's been used within the frame.
00:06:31:26 - 00:06:34:17
This again is very easy to do,
so you can just drag
00:06:34:17 - 00:06:37:09
and drop an image from the gallery.
00:06:37:27 - 00:06:39:14
If you hover over the image field
00:06:39:14 - 00:06:43:15
that we've been utilizing, you can see
it becomes highlighted and then release
00:06:44:14 - 00:06:48:23
and the image being utilized will be
replaced with the newly selected image.
00:06:49:05 - 00:06:53:00
But again, the actual field itself,
the image field that we're using
00:06:53:00 - 00:06:57:07
as a guide will not be altered.
00:06:57:07 - 00:06:57:22
Okay.
00:06:57:22 - 00:07:01:24
So let's take a look
at some additional image options
00:07:02:00 - 00:07:03:10
that we have available to us.
00:07:03:10 - 00:07:06:20
And these are just ways we can modify
the image that we have selected.
00:07:07:19 - 00:07:11:03
You can open this tab
just by double clicking on an image field,
00:07:12:06 - 00:07:15:01
and then what we'll do is we'll just walk
through the different options
00:07:15:13 - 00:07:18:10
available in these different tabs.
00:07:18:10 - 00:07:21:16
So starting off on the Image Options tab,
which is the first one
00:07:21:16 - 00:07:24:16
that's highlighted,
this is generally focused on
00:07:26:20 - 00:07:27:19
transforming
00:07:27:19 - 00:07:30:10
and rearranging
the image frames themselves.
00:07:30:25 - 00:07:33:00
So to start off with,
we have a scale slider.
00:07:34:21 - 00:07:37:27
So as is the change,
the zoom on a particular part of the image
00:07:39:02 - 00:07:40:00
we can transform.
00:07:40:00 - 00:07:41:06
So we can rotate the image
00:07:41:06 - 00:07:44:04
within the frame without actually
rotating the frame itself.
00:07:45:13 - 00:07:46:21
We can mirror
00:07:48:28 - 00:07:49:26
and we can change
00:07:49:26 - 00:07:52:24
the arrangement of the frames as well.
00:07:53:06 - 00:07:56:29
So if I have multiple frames overlaid
or multiple fields overlaid.
00:07:57:14 - 00:08:05:10
So if I had a second one here,
for example,
00:08:05:10 - 00:08:09:24
the arrangement option just allows me
to move certain frames forwards, backwards
00:08:10:09 - 00:08:20:10
and bring them right to the front
and right to the back.
00:08:20:10 - 00:08:21:21
And then we have management.
00:08:21:21 - 00:08:25:23
So one of them allows us to reset our
image frame or image field.
00:08:27:15 - 00:08:30:19
One allows us to actually remove the image
that we have specified
00:08:30:19 - 00:08:36:08
just to take it back to an empty image
field.
00:08:36:08 - 00:08:39:17
We have the ability to delete the field
and we have the ability
00:08:39:17 - 00:08:43:12
to duplicate the field.
00:08:43:12 - 00:08:47:04
Next along,
we have the Effect Options Tab.
00:08:48:07 - 00:08:49:18
So this just allows us to apply
00:08:49:18 - 00:08:52:02
some artistic effects
to the image that we have applied.
00:08:52:21 - 00:08:56:03
So briefly, walking through
some of these options, we've got image
00:08:56:03 - 00:09:00:01
effects such as the ability
to specify a black and white image,
00:09:01:05 - 00:09:04:27
sepia tones and so on.
00:09:04:27 - 00:09:07:00
We've got opacity
00:09:07:25 - 00:09:09:02
so we can change the opacity
00:09:09:02 - 00:09:12:21
of that particular image field.
00:09:12:21 - 00:09:16:26
We can control elements of the image
such as the brightness, contrast
00:09:17:18 - 00:09:21:16
the kids that we're utilizing,
and we can apply sharpness
00:09:21:24 - 00:09:25:13
and blur options
at the bottom of the screen here.
00:09:26:04 - 00:09:26:21
Next up,
00:09:26:21 - 00:09:28:25
we have border and background options.
00:09:29:23 - 00:09:32:07
So again, a few different things
that we have available here.
00:09:32:27 - 00:09:35:09
We can apply different
border styles to your image
00:09:35:10 - 00:09:38:10
so you can have a solid
00:09:38:10 - 00:09:42:13
outline or outer border style
where you can also control
00:09:42:13 - 00:09:45:08
the width, the radius
and the stroke for these border styles.
00:09:45:21 - 00:09:47:23
Now, do be aware
that these are fairly sensitive.
00:09:47:23 - 00:09:51:23
So if I start increasing the width,
you'll see that it does increase the width
00:09:51:28 - 00:09:55:16
at a very fast rate.
00:09:56:20 - 00:09:57:17
We've also got the option
00:09:57:17 - 00:10:00:22
to change the color of those outlines
00:10:00:22 - 00:10:04:08
as necessary as well.
00:10:06:04 - 00:10:07:18
We've also got the option down here
00:10:07:18 - 00:10:10:04
to apply a background color if we require
00:10:11:06 - 00:10:15:10
so we can override the actual background
color used within the image field itself.
00:10:15:17 - 00:10:20:18
Assuming that there is some blank space
in the image that this can be applied to.
00:10:21:04 - 00:10:24:16
Then you've also got the ability
to control the color that's been utilized
00:10:26:04 - 00:10:27:23
so you can use a color picker
00:10:27:23 - 00:10:30:07
or you can actually specify
the required colors
00:10:32:14 - 00:10:34:22
along with controlling the opacity of that
00:10:36:07 - 00:10:39:28
background colour.
00:10:39:28 - 00:10:41:24
Next up, we have shadow options.
00:10:41:24 - 00:10:44:15
So on this tab,
you have the ability to control.
00:10:45:10 - 00:10:47:20
So you can enable or disable a shadow
00:10:47:20 - 00:10:50:13
on the chosen image.
00:10:51:15 - 00:10:53:16
You can control the position,
00:10:53:16 - 00:11:05:18
blur and transparency of that shadow.
00:11:05:18 - 00:11:09:02
And you can control the color
of the shadow using a color picker
00:11:10:28 - 00:11:19:07
as necessary.
00:11:21:25 - 00:11:24:15
Now, arguably,
the most important tab within
00:11:24:15 - 00:11:27:16
this screen here is the final one,
which is the details tab.
00:11:28:17 - 00:11:31:21
So from an administrator
and a template designer perspective,
00:11:31:21 - 00:11:34:18
the details tab is definitely
the most critical.
00:11:35:07 - 00:11:37:18
Within here, you can control the frame
00:11:38:29 - 00:11:42:18
and field configuration
and customization options
00:11:42:29 - 00:11:46:06
and can control what the customer is able
to actually utilize.
00:11:47:01 - 00:11:51:08
So there are a lot of options
within this tab, essentially enabling or
00:11:51:08 - 00:11:56:10
disabling the individual customization
options discussed in these previous steps.
00:11:56:27 - 00:12:00:23
So for example,
we could eliminate the customers ability
00:12:00:23 - 00:12:02:02
to put a shadow on, or we could
00:12:02:02 - 00:12:05:28
eliminate the customer's possibility
to resize or reposition the field
00:12:12:10 - 00:12:14:04
so we
won't go through all of these options.
00:12:14:04 - 00:12:16:27
It's one of those things that's best seen
00:12:16:27 - 00:12:20:06
just by browsing through the list
and seeing what's available.
00:12:20:29 - 00:12:23:27
But just to point out
a few of the critical ones here.
00:12:25:15 - 00:12:27:09
So we do have the ability to restrict
00:12:27:09 - 00:12:29:18
movement direction to certain axes
00:12:30:15 - 00:12:32:25
that's done in the movement
restriction section.
00:12:33:07 - 00:12:35:13
We can see by default
that it's set to free.
00:12:36:04 - 00:12:39:09
We can set it to completely fixed
if we don't want it to be moved,
00:12:39:23 - 00:12:43:01
or we can limit it to a horizontal
or vertical movement.
00:12:44:00 - 00:12:46:03
Also within there,
we have the ability to limit
00:12:46:03 - 00:12:51:10
whether or not a customer
can change the size of our frame.
00:12:55:03 - 00:12:58:06
If I scroll a little further down,
another couple of critical ones,
00:12:58:06 - 00:13:01:25
which you might use
quite a lot are these three here.
00:13:02:16 - 00:13:05:01
So we have one which does not open pop up.
00:13:05:15 - 00:13:09:15
So that eliminates the ability
for the customer to open this image.
00:13:09:15 - 00:13:11:07
Options pop up at all.
00:13:11:07 - 00:13:14:03
So if you don't want them to access
any of these settings,
00:13:14:12 - 00:13:17:00
your easiest method
is just to activate this option. Here,
00:13:19:00 - 00:13:20:24
you've also got the option to select.
00:13:20:24 - 00:13:23:16
Do not delete and do not select.
00:13:24:01 - 00:13:27:24
So do not delete, as the name
suggests, prevents the user from actually
00:13:27:24 - 00:13:32:22
deleting an image field and do not select
means that they can't select it at all.
00:13:33:00 - 00:13:35:29
The only way
they will be able to interact with it
00:13:36:07 - 00:13:40:13
is to actually apply a new image
to the existing image field.
00:13:40:18 - 00:13:43:23
No other changes can be made,
00:13:45:21 - 00:13:48:09
so we'll modify
a few of these as an example.
00:13:49:19 - 00:13:52:06
So if this is our logo field
00:13:52:06 - 00:13:55:13
here, let's say we're making
00:13:55:13 - 00:13:58:11
a flyer or something like that
for our particular customer.
00:13:59:12 - 00:14:01:23
So we might have a logo up in the top
right hand corner.
00:14:02:25 - 00:14:05:00
So we might want to say
that the customer is able
00:14:05:00 - 00:14:08:10
to actually replace the logo
to their own customer logo.
00:14:09:25 - 00:14:12:15
They don't
they shouldn't be able to reposition.
00:14:12:15 - 00:14:14:11
They shouldn't be able to delete it.
00:14:14:11 - 00:14:18:04
And the image also needs to actually fit
within our specified frame.
00:14:18:05 - 00:14:20:19
So there's a few options
we might want to specify here.
00:14:21:26 - 00:14:25:01
So if I activate our details, tab again
00:14:25:14 - 00:14:27:22
and just identify a few of those.
00:14:29:00 - 00:14:32:01
So in order to actually allow us
to see the entire image,
00:14:32:19 - 00:14:36:29
we're going to activate this fit
without cropping.
00:14:38:28 - 00:14:39:08
Now what
00:14:39:08 - 00:14:42:18
We'll see if I apply a new image
to that image field.
00:14:43:06 - 00:14:48:02
We see the entire image itself, even
if it doesn't fit to the entire frame.
00:14:48:13 - 00:14:54:20
So it won't crop the image
that we apply to the field.
00:14:55:07 - 00:14:58:04
We said we also want to limit the ability
to move
00:14:58:04 - 00:15:03:11
or to delete or select
that particular frame so we could start
00:15:03:11 - 00:15:06:25
modifying some of these movement
restrictions and positional options.
00:15:07:09 - 00:15:09:19
However,
in this case, seen as we're giving quite a
00:15:10:20 - 00:15:12:28
very limited
00:15:13:13 - 00:15:17:17
availability for change,
we could just specify, do not select
00:15:17:26 - 00:15:20:21
and do not delete
and maybe do not open pop up
00:15:20:21 - 00:15:23:05
for good measure.
00:15:24:08 - 00:15:26:14
That was a lot more options
we could play around with in there,
00:15:26:14 - 00:15:30:10
but that's probably good
for our first simple solution.
00:15:30:25 - 00:15:34:10
And what we need to do
next is to actually test how that works.
00:15:34:17 - 00:15:37:04
Whilst we're viewing this as a user.
00:15:37:04 - 00:15:39:04
Because whilst we're
still in administrator mode,
00:15:39:04 - 00:15:41:14
we can still do every change
that we want to do.
00:15:41:24 - 00:15:45:09
We can still move it around,
we can still resize it
00:15:45:14 - 00:15:48:07
and whatever else we can still select it.
00:15:48:07 - 00:15:49:18
To see how this operates.
00:15:49:18 - 00:15:52:29
As a user, we go to menu
00:15:53:26 - 00:15:55:29
and then to emulate user mode.
00:15:56:20 - 00:15:58:22
You can see it's
the moment it's set to off,
00:15:58:22 - 00:16:00:22
which means I'm viewing
this as an administrator.
00:16:02:00 - 00:16:05:04
If I click
that to on, then what we should see is
00:16:05:04 - 00:16:09:16
I have far fewer available options
for modifying that particular field.
00:16:10:01 - 00:16:12:09
I can't select it,
therefore I can't delete it.
00:16:12:09 - 00:16:14:06
I can't get the pop up.
00:16:14:06 - 00:16:16:22
However, the only thing I can do
00:16:16:22 - 00:16:28:25
is replace
the image that used within that field.
00:16:30:15 - 00:16:31:29
So once you have actually configured
00:16:31:29 - 00:16:36:07
all of the fields that we need, so we'll
keep with our very simple image field.
00:16:36:07 - 00:16:37:18
Here is an example.
00:16:37:18 - 00:16:40:19
I'm going to turn off
emulate user mode to begin with.
00:16:40:19 - 00:16:43:23
So we're modifying this
as an administrator.
00:16:43:23 - 00:16:47:05
Again, you can test that
just by making sure I've actually
00:16:47:20 - 00:16:50:29
able to select the image field
and then I want to actually
00:16:50:29 - 00:16:53:19
save this as our product default
00:16:54:21 - 00:16:58:08
because there's no point doing all of this
work, setting up all of these user
00:16:58:08 - 00:17:02:11
restrictions if when they loaded up,
they're just faced with a blank canvas.
00:17:03:12 - 00:17:04:20
So if I just make sure I'm on
00:17:04:20 - 00:17:08:15
my administrator mode, go to menu
00:17:09:05 - 00:17:14:03
and then I can say
save as product default.
00:17:14:03 - 00:17:15:04
So that's now been saved.
00:17:15:04 - 00:17:19:12
So whenever somebody uses this product,
it should be loaded up
00:17:20:15 - 00:17:23:02
with our image frame
with all its defined options
00:17:23:13 - 00:17:27:01
up in the top right hand corner.
00:17:27:01 - 00:17:28:19
You may notice that the image
00:17:28:19 - 00:17:31:21
that we had placed within our image
00:17:31:21 - 00:17:35:20
fields has been removed
when we saved it as a product default.
00:17:36:02 - 00:17:39:11
This is because the user themselves
would be expected to choose the image
00:17:39:11 - 00:17:43:26
for use within the frame,
either as an upload or from one of
00:17:43:26 - 00:17:47:02
our existing galleries.
