Picture of Examples of Advanced Grouping in Invent | IV_029

Examples of Advanced Grouping in Invent | IV_029

Following on from IV_027, which introduced the concept of Advanced Groups in Invent, this tutorial looks at a few examples of how these can be configured and what effect they have on the final group when transferred to a MegaEdit product. We will do this by working our way through the alignment options provided by Infigo. These are just examples of how this can be configured, with the margins and sizing of each field fully configurable by the template builder. In each of our examples we have: 2 text fields (left and right) An image field An empty image frame set to define the boundary of the group

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:05:15 - 00:00:06:28
Following going from tutorials

00:00:06:28 - 00:00:11:20
IV_028 and IV_027,

00:00:11:28 - 00:00:15:02
which introduced
the concept of advanced groups in Invent.

00:00:15:16 - 00:00:19:10
This tutorial looks at a few examples
of how these can be configured,

00:00:19:18 - 00:00:22:10
and what effect
they have on the final group.

00:00:22:10 - 00:00:25:10
When transferred to a MegaEdit product.

00:00:26:00 - 00:00:27:17
We'll do this by working our way

00:00:27:17 - 00:00:31:00
through the alignment options
that are provided by Infigo.

00:00:31:03 - 00:00:34:03
So if I just click on one of the groups
I've pre-made.

00:00:40:07 - 00:00:43:14
You'll see that we have a range
of alignment and distribution

00:00:43:14 - 00:00:44:24
of spacing settings.

00:00:44:24 - 00:00:47:24
And we'll just use these as a guide.

00:00:50:06 - 00:00:51:11
Now these are just

00:00:51:11 - 00:00:55:15
examples of how they can be configured
with the margins and the sizing of each

00:00:55:25 - 00:00:59:09
field fully configurable
by the template builder.

00:01:00:16 - 00:01:05:04
So in each of our examples
we have two text fields just side by side.

00:01:06:01 - 00:01:08:04
Next to those we have an image field.

00:01:08:04 - 00:01:12:12
And then they are all placed
within an empty image frame,

00:01:12:12 - 00:01:15:12
which is defined
as our boundary of the group.

00:01:15:16 - 00:01:19:10
Now we've explained how to set all this up
in one of the earlier tutorials.

00:01:25:03 - 00:01:27:12
So we will begin within InDesign itself,

00:01:27:12 - 00:01:30:12
and we'll just select the group
that we want to look at.

00:01:31:05 - 00:01:32:29
We'll work our way through the alignment,

00:01:32:29 - 00:01:35:29
spacing, and gap options
provided by default.

00:01:36:02 - 00:01:37:28
Now these cover many scenarios.

00:01:37:28 - 00:01:42:03
However, please do remember,
just as a reminder that the margins

00:01:42:03 - 00:01:45:12
and sizing of each field
are completely customizable

00:01:45:12 - 00:01:48:12
should you want to deviate
from these examples.

00:01:50:15 - 00:01:51:04
Okay, so

00:01:51:04 - 00:01:54:04
our first example will be left aligned.

00:01:54:05 - 00:01:57:21
So with our group selected and align left

00:01:57:21 - 00:02:02:05
selected, this will automatically modify
the margin and size

00:02:02:05 - 00:02:05:05
options of the fields
contained within the group.

00:02:06:02 - 00:02:09:02
So I'm going to click on the advanced
settings

00:02:09:15 - 00:02:10:24
with the three fields in the group.

00:02:10:24 - 00:02:14:10
Just so we can see what has been specified

00:02:14:10 - 00:02:17:10
automatically.

00:02:20:12 - 00:02:22:14
So for this first example,
let's take a look

00:02:22:14 - 00:02:25:29
at each of the fields in turn so
we can understand exactly what it's doing.

00:02:26:00 - 00:02:29:08
And then for later examples
we'll go through it at a much faster pace.

00:02:30:00 - 00:02:32:18
We'll start
by looking at the left text field.

00:02:32:18 - 00:02:33:29
So this frame here.

00:02:36:08 - 00:02:37:12
Now for the left

00:02:37:12 - 00:02:40:12
margin of that left text field

00:02:41:18 - 00:02:44:18
we have a set value of zero.

00:02:45:03 - 00:02:47:03
And this will ensure that this field sits

00:02:47:03 - 00:02:50:03
right up against the boundary.

00:02:50:22 - 00:02:52:22
As this is,
the field at the top of the list is

00:02:52:22 - 00:02:56:26
considering that to be the leftmost
in our horizontal configuration.

00:02:56:26 - 00:02:57:16
So that.

00:02:57:16 - 00:03:01:08
Left side of the text frame there will sit
right up against the boundary.

00:03:03:29 - 00:03:07:10
Now the right margin of this left

00:03:07:10 - 00:03:10:15
text field is set to self.

00:03:10:15 - 00:03:15:02
Now this will pick up and set the current
margin between this and the next field

00:03:15:10 - 00:03:18:10
as it's currently set inside InDesign.

00:03:18:16 - 00:03:21:03
So what this means
we've got self-selected.

00:03:21:03 - 00:03:23:03
It's saying 4.5mm.

00:03:23:03 - 00:03:27:28
It's calculated that there's a 4.5mm gap
between these two fields.

00:03:28:02 - 00:03:29:11
And that will be maintained.

00:03:31:16 - 00:03:34:07
And then
finally we have the size option again

00:03:34:07 - 00:03:38:26
that has been automatically set to self,
meaning that the field

00:03:39:01 - 00:03:42:13
will retain its current width
as it's seen in design.

00:03:48:14 - 00:03:51:26
Now let's take a look at our right text
frame.

00:03:51:26 - 00:03:54:26
We're still looking at the left alignment.

00:03:55:15 - 00:03:58:02
Now what we see here.

00:03:58:02 - 00:03:59:24
This field is in the middle of our list,

00:03:59:24 - 00:04:03:14
surrounded by other fields in the group
on either side.

00:04:03:25 - 00:04:07:21
This means that the field has no direct
link to the external boundary.

00:04:08:24 - 00:04:11:24
All margins and size
options are set to self here,

00:04:12:00 - 00:04:16:28
ensuring that the field's current size
and its gap sizes,

00:04:16:28 - 00:04:21:08
its margin sizes are maintained
as they currently are in InDesign.

00:04:22:00 - 00:04:24:19
So what we mean
is that this width of the frame

00:04:24:19 - 00:04:27:20
will be maintained, and then the gap here

00:04:28:05 - 00:04:32:00
and the gap here will also be maintained
as they are in InDesign.

00:04:35:02 - 00:04:35:08
And then

00:04:35:08 - 00:04:38:09
finally our image field that we have here.

00:04:38:18 - 00:04:41:18
So it's expand the option for this one.

00:04:43:06 - 00:04:46:04
Now our image field
is the last field in our list.

00:04:46:04 - 00:04:49:18
And this means with our horizontal
configurations we have it

00:04:49:28 - 00:04:53:23
that it's the right margin
that will interact with the right

00:04:54:09 - 00:04:57:07
external boundary of the group.

00:04:57:07 - 00:05:02:01
As a result, both the left margin
and the size are set to self

00:05:02:01 - 00:05:05:01
to ensure that the current spacing
and width are maintained.

00:05:06:00 - 00:05:09:00
The right margin, however, is set to auto.

00:05:09:04 - 00:05:11:19
This ensures
that the right margin is adaptable

00:05:11:19 - 00:05:14:19
based on the available space.

00:05:15:10 - 00:05:19:09
As we are left aligning the field
within the group, it makes sense

00:05:19:09 - 00:05:22:09
that the margin to the right of the fields
should be adjustable.

00:05:22:13 - 00:05:24:04
Based on that available space.

00:05:26:19 - 00:05:28:15
So now
let's take a look at that same group

00:05:28:15 - 00:05:31:15
when transferred to a MegaEdit product.

00:05:33:16 - 00:05:35:22
Now I'm going to enable
a debugging mode here,

00:05:35:22 - 00:05:38:22
so we can actually see
the boundaries of those fields.

00:05:40:25 - 00:05:42:05
This makes it a little bit clearer

00:05:42:05 - 00:05:45:05
for the purposes of this example.

00:05:46:19 - 00:05:47:27
So looking at the left alignment

00:05:47:27 - 00:05:51:21
we see that the specification for this
group has been successfully applied.

00:05:52:05 - 00:05:55:19
The left text field
is pushed up against the boundary

00:05:57:15 - 00:06:00:22
with the other fields
moving with it to maintain

00:06:00:22 - 00:06:03:22
the specified gaps between the fields.

00:06:04:20 - 00:06:07:13
The sizing of the fields
has also been maintained

00:06:07:13 - 00:06:10:27
based on the fields
that we've seen in InDesign.

00:06:12:06 - 00:06:14:26
We can also see that the spacing
to the right of the image

00:06:14:26 - 00:06:18:08
field has been allowed
to adapt to use that auto setting.

00:06:24:24 - 00:06:25:01
All right.

00:06:25:01 - 00:06:27:00
So now
we've gone through our first example.

00:06:27:00 - 00:06:30:14
Let's take a more streamlined
look at some of the other examples

00:06:30:14 - 00:06:33:14
of positional and sizing specifications.

00:06:34:12 - 00:06:35:16
We'll work down this list.

00:06:35:16 - 00:06:37:10
Next is right aligned.

00:06:37:10 - 00:06:40:10
That's where we've just click on the align
right setting.

00:06:40:11 - 00:06:41:21
When configuring our group.

00:06:41:21 - 00:06:46:22
So as we can see in these configuration
options, the right aligned option

00:06:46:26 - 00:06:50:26
applies a self constraint to all
but the extreme left

00:06:51:08 - 00:06:54:08
and the extreme right margins,

00:06:54:21 - 00:06:57:21
which both set
against the external boundary.

00:06:58:17 - 00:07:00:17
The left is set to auto

00:07:00:17 - 00:07:03:17
and the right is set
to a defined value of zero.

00:07:03:22 - 00:07:04:11
This ensures

00:07:04:11 - 00:07:08:05
the group's fields always stay pressed
against the right side boundary.

00:07:08:20 - 00:07:12:01
The self constraint
on most of the margins and sizing ensures

00:07:12:01 - 00:07:15:17
the original values
from InDesign are maintained.

00:07:19:11 - 00:07:20:14
So let's switch to our

00:07:20:14 - 00:07:23:14
MegaEdit product to see the result.

00:07:24:08 - 00:07:27:08
We see that the fields have been shifted
to the right side of the boundary.

00:07:27:16 - 00:07:31:01
The spacing between the fields
has been maintained and the space to

00:07:31:01 - 00:07:34:29
the left of the boundary has successfully
adapted based on the available

00:07:34:29 - 00:07:37:29
space.

00:07:41:23 - 00:07:43:27
Next, let's have a look at center aligned.

00:07:43:27 - 00:07:46:16
So this is where we've clicked
the align center option.

00:07:46:16 - 00:07:47:24
Here.

00:07:47:24 - 00:07:49:27
Now this option applies a self

00:07:49:27 - 00:07:54:11
constraint to all
but the extreme left and right margins,

00:07:54:11 - 00:07:57:11
which as we know
both sit against the boundary.

00:07:58:18 - 00:08:02:10
Both the extreme left and right
margins are set to auto

00:08:02:17 - 00:08:05:17
with a weighting value of one.

00:08:06:23 - 00:08:09:07
This ensures that the available space

00:08:09:07 - 00:08:13:18
is evenly distributed between
the extreme left and right margins.

00:08:14:15 - 00:08:18:09
The self constraint
on most of the other margins and

00:08:18:09 - 00:08:22:10
sizing ensures that the original values
from InDesign are maintained.

00:08:25:27 - 00:08:27:24
So let's once again go into MegaEdit.

00:08:27:24 - 00:08:30:24
Take a look at that.

00:08:31:00 - 00:08:32:16
So we've got this central alignment

00:08:32:16 - 00:08:35:16
section here.

00:08:38:07 - 00:08:41:12
This centralization is controlled
by the auto spacing

00:08:41:12 - 00:08:44:24
that we've specified on the extreme left
and right margins.

00:08:45:29 - 00:08:49:27
By applying an equal weighting
to both of those external margins.

00:08:50:04 - 00:08:53:08
We ensure the space between each of them
remains the same.

00:08:53:14 - 00:08:56:14
So all of these fields are centralized.

00:09:01:07 - 00:09:01:17
Okay.

00:09:01:17 - 00:09:04:17
Next up is space between.

00:09:05:14 - 00:09:07:02
So this is this option here.

00:09:07:02 - 00:09:11:22
So this applies a set value of zero
to the extreme margins

00:09:11:22 - 00:09:14:22
at either end.

00:09:15:21 - 00:09:18:21
Each of the interior
margins is set to auto

00:09:20:16 - 00:09:22:24
with a distribution of one.

00:09:22:24 - 00:09:27:04
Ensuring the spacing is equal
for all of the specified auto margins.

00:09:28:07 - 00:09:31:25
This will ensure that the outermost fields
are flush against the boundary,

00:09:32:02 - 00:09:36:00
with the remaining fields being positioned
based on the available space

00:09:36:09 - 00:09:38:07
amongst those internal fields.

00:09:40:25 - 00:09:43:25
Let's once again take a look at this.

00:09:44:22 - 00:09:48:00
The space between we can see the desired
behavior has been achieved,

00:09:48:00 - 00:09:51:03
so the extreme left and right
margins are fixed

00:09:51:07 - 00:09:54:18
against that boundary due
to the set value of zero.

00:09:55:02 - 00:09:57:25
Whilst
the internal fields have been positioned

00:09:57:25 - 00:10:01:08
based on the available space
to the margins set to auto,

00:10:02:05 - 00:10:05:21
as the weighting of the auto
margins is set to one ensures

00:10:05:21 - 00:10:08:21
equal spacing in each of these.

00:10:14:12 - 00:10:17:12
Next, let's have a look at space around
which is this option.

00:10:17:12 - 00:10:17:21
Here.

00:10:17:21 - 00:10:21:17
So this applies auto
spacing to each of the margins.

00:10:21:17 - 00:10:24:17
So we can see a lot of auto spacing.

00:10:27:20 - 00:10:29:07
So this applies auto spacing

00:10:29:07 - 00:10:32:16
to each of the margins
both internal and external.

00:10:33:07 - 00:10:36:07
All of the interior margins
have a weighting of one,

00:10:36:28 - 00:10:39:06
as the gap between

00:10:39:06 - 00:10:42:08
two fields will consist of two times
this weighting.

00:10:42:16 - 00:10:46:17
So that's explained in more detail
in a different tutorial.

00:10:48:09 - 00:10:51:09
The ID IV_028.

00:10:52:05 - 00:10:54:08
The two extreme exterior

00:10:54:08 - 00:10:57:08
margins will have a weighting of two,

00:10:58:04 - 00:11:00:22
as there is only one margin at play
in that gap

00:11:00:22 - 00:11:04:22
instead of the two margins are at play
between the actual fields themselves.

00:11:05:06 - 00:11:10:02
This means the end result, the spacing
in each gap, interior and exterior

00:11:10:09 - 00:11:13:09
will be equal.

00:11:14:03 - 00:11:17:03
Once again,
let's take a look space around.

00:11:17:06 - 00:11:21:05
With this set up, there's an equal spacing
between every field in the group

00:11:21:13 - 00:11:23:00
and the margins.

00:11:23:00 - 00:11:24:24
And the outer boundaries. Okay.

00:11:24:24 - 00:11:27:24
Another option we have here is gap.

00:11:29:04 - 00:11:32:10
So when you click on the gap option,
it asks you to specify a gap

00:11:32:10 - 00:11:35:14
that you want to create based on a unit

00:11:35:14 - 00:11:38:14
that you've got selected.

00:11:38:15 - 00:11:40:27
This is a one size fits all input.

00:11:40:27 - 00:11:43:04
By clicking gap and entering a value.

00:11:43:04 - 00:11:48:15
You will apply this as a statically sized
gap between all of the fields,

00:11:49:18 - 00:11:52:18
so we can see what this does.

00:11:57:21 - 00:11:58:07
We see here

00:11:58:07 - 00:12:01:09
that a value has been applied
to all margins,

00:12:02:15 - 00:12:07:06
always set to zero, except those margins
which meet another field in the group.

00:12:07:16 - 00:12:10:16
Instead,
those have been set to our specified gap.

00:12:11:00 - 00:12:16:10
So if we look at the gap between left text
field and right text field, for example,

00:12:16:18 - 00:12:19:22
we can see the right
margin of left text field is set to zero

00:12:21:11 - 00:12:25:13
and the left margin
a right text field is set to ten.

00:12:25:14 - 00:12:29:05
And that means the total gap
between those will be ten points.

00:12:29:06 - 00:12:32:05
In this case.
So let's go over and take a look at that.

00:12:32:05 - 00:12:33:25
We can see that
that behavior has been achieved.

00:12:33:25 - 00:12:38:16
We've got a ten point gap in this case
between those fields.

00:12:38:16 - 00:12:42:28
Now the last example to look at here is
a little bit different sized by content.

00:12:43:22 - 00:12:45:19
Now this isn't available to the margins.

00:12:45:19 - 00:12:47:15
This is just the fields themselves.

00:12:47:15 - 00:12:49:26
And it means that we can adjust
the size of the fields

00:12:49:26 - 00:12:52:11
based on the content
that we have contained within them.

00:12:52:11 - 00:12:55:14
And it's both text
fields and image fields.

00:12:56:08 - 00:12:57:16
If I go and.

00:13:00:28 - 00:13:02:05
Expand my options

00:13:02:05 - 00:13:05:05
there, you
can see that each of these size options,

00:13:05:06 - 00:13:08:06
I've gone to the content option.

00:13:11:07 - 00:13:12:00
And what this means

00:13:12:00 - 00:13:16:02
is that if we start resizing
one of those frames, depending on what

00:13:16:02 - 00:13:20:17
we specified as the margin options,
other fields will start to move.

00:13:20:26 - 00:13:24:11
So if we start to put a lot more text
in one of those fields, for example,

00:13:24:11 - 00:13:28:26
and push it size wise to the right,
that gap will be maintained.

00:13:28:26 - 00:13:31:22
So the other fields
are going to move as well.

00:13:31:22 - 00:13:34:22
So let's take a look at this in action.

00:13:35:14 - 00:13:37:03
So we've got this Size by content

00:13:37:03 - 00:13:40:03
section here.

00:13:41:10 - 00:13:44:10
If I start applying more text to the left.

00:13:45:20 - 00:13:48:29
We can see that all the other fields
move out of the way to maintain the gap.

 

Incomplete
Step by Step Guide

Examples of Advanced Grouping in Invent | IV_029

Following on from IV_027, which introduced the concept of Advanced Groups in Invent, this tutorial looks at a few examples of how these can be configured and what effect they have on the final group when transferred to a MegaEdit product.

We will do this by working our way through the alignment options provided by Infigo. These are just examples of how this can be configured, with the margins and sizing of each field fully configurable by the template builder.

In each of our examples we have:

  • 2 text fields (left and right)

  • An image field

  • An empty image frame set to define the boundary of the group

Creation Date: Jun 05, 2024
Created By: Sam Webster

1. We begin in InDesign. Select the group you would like to modify

We begin in InDesign. Select the group you would like to modify

2. We will work our way through the alignment, spacing and gap options provided by default.

These cover many scenarios, however please remember that the margins and sizing of each field is completely customisable should you wish to deviate from these examples.

We will work our way through the alignment, spacing and gap options provided by default.

# Example 1 : Left Aligned

3. We will first look at the Align Left option

This will automatically modify the margin and size options of the fields contained within the group.

We will first look at the Align Left option

4. Click Advanced Settings on each field to see how the margin and sizing is configured.

Remember, you can change the order of these fields using the arrow icons should the system have not picked up and placed them correctly.

Click Advanced Settings on each field to see how the margin and sizing is configured.

5. A look at our Left Text Field options

The defined margin and sizing options for this field include:

  • Left margin | A set value of 0. This will ensure this field sits right up against the boundary as this is the field at the top of the list.

  • Right margin | Set as "Self". This will pick up and set the current margin between this and the next field.

  • Size | Set as "Self", meaning it will retain its current width.

A look at our Left Text Field options

6. A look at our Right Text Field options

This field is in the middle of our list, surrounded by other fields in the group on either side. This means this field has no direct link to the boundary.

All margin and size options are set to "Self", ensuring the fields current size and margins are maintained.

A look at our Right Text Field options

7. A look at our Image Field options

Our image field is the last field in our list, meaning (with our horizontal configuration) that its right margin will interact with the right boundary.

As a result, both the left margin and size are set to "Self", to ensure current spacing and width are maintained.

The Right margin however is set to auto. This ensures that the right margin is adaptable based on the available space. As we are left aligning the fields within the group, it makes sense that the margin to the right of the fields should be adjustable based on available space.

A look at our Image Field options

8. Let's now take a look at this same group when transferred to a MegaEdit product

Let's now take a look at this same group when transferred to a MegaEdit product

9. As we would expect, the field boundaries are not shown on the final product,. For the purposes of this tutorial, I have activated a debugging mode which allows us to view the field boundaries.

As we would expect, the field boundaries are not shown on the final product,. For the purposes of this tutorial, I have activated a debugging mode which allows us to view the field boundaries.

10. Margins and Sizing

We see the specification for this group has been successfully applied.

The left text field is pushed up against the boundary, with other fields moving with it to maintain the specified margins. The sizing of the fields has also been maintained based on the fields in InDesign. We can also see the spacing to the right of the image field has been allowed to adapt.

Margins and Sizing

# Now we've gone through our first example, let's take a more streamlined look at some other examples of positional and sizing specification.

# Example 2: Right Aligned

11. Right Aligned margin and size specifications

This group has had the align right global settings applied, modifying all fields.

This option applies a “Self” constraint to all but the extreme left and right margins (which sit against the boundary), with the left set to Auto and the right set to a defined value of 0.

This ensures the group's fields always stay pressed against the right boundary.

The "Self" constraint on most of the margins and sizing ensures the original values are maintained from the InDesign document.

Right Aligned margin and size specifications

12. Right aligned results

Once moved to MegaEdit, we see the fields have been shifted to the right of the boundary. The spacing between the fields has been maintained and the space to the left boundary has successfully adapted based on the available space.

Right aligned results

# Example 3: Centre Aligned

13. Centre aligned margin and size specification

This group has had the align centre global settings applied, modifying all fields.

This option applies a “Self” constraint to all but the extreme left and right margins (which sit against the boundary).

The extreme left and right margins are set to Auto, with a weighting value of 1. This ensures that the available space is evenly distributed between the extreme left and right margins.

The "Self" constraint on most of the margins and sizing ensures the original values are maintained from the InDesign document.

Centre aligned margin and size specification

14. Centre aligned results

Once moved to MegaEdit, we see that all fields have now been centralised. This centralisation is controlled by the auto spacing we have specified on the extreme left and right margins.

By applying an equal weighting to both margins, we ensure the space on each end remains the same, so all fields are central.

Centre aligned results

# Example 4 : Space Between

15. Distribute Spacing - Space Between

This group has had the space between global settings applied, influencing all fields.

This applies a set "Value" of 0 to the extreme margins at either end.

Each of the interior margins is set to Auto, with a distribution of 1 ensuring the spacing is equal for all "Auto" margins.

This will ensure that the outermost fields are flush against the boundary, with the remaining fields being positioned based on the available space amongst the internal fields.

Distribute Spacing - Space Between

16. Space Between results

We can see the desired behaviour has been achieved. The extreme left and right margins are fixed against the boundary (due to the set "Value" of 0), whilst the internal fields have been positioning based on the space available to the margins set to "Auto".

As the weighting of the "Auto" margins was set to 1, it ensures an equal spacing.

Space Between results

# Example 5 : Space Around

17. Distribute Spacing - Space Around

This group has had the space around global settings applied, influencing all fields.

This applies "Auto" spacing to each of the margins. All of the interior margins have a weighting of 1, (as the gap between two fields will consist of 2 x this weighting).

The two extreme exterior margins have a weighting of 2, as there is only one margin at play in that gap. This means the spacing in each gap (interior and exterior) will be equal.

Distribute Spacing - Space Around

18. Space Around results

With this setup, there is an equal spacing between every field in the group, between both each other and the boundaries.

Space Around results

# Example 6: Gap

19. Gap example

Here, we have specified a fixed gap of 10 (unit adjustable) between our fields. This is a one-size-fits-all input. By clicking "Gap" and entering a value, you will apply this as a statically sized gap between the fields.

We can see here that a "Value" has been applied to all margins. All are set to 0 except those margins which meet another field in the group. Instead, those has been set to our specified gap.

Gap example