Examples of Advanced Grouping in Invent | IV_029
SW

Sam Webster

Created Jun 05, 2024

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

31
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

8 Steps
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.

0 Steps

#

Example 2: Right Aligned

2 Steps
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

2 Steps
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

2 Steps
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

2 Steps
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

1 Step
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
Well done!
Create how-to guides like this in a snap. Get Tango now.