Alternate Layouts is a powerful feature that allows one template to generate multiple different artwork variations. This feature allows one document to output different document sizes, different frame sizes, include or exclude certain pages, layers or frames, and alter frame positions. All you need is to ensure the information is there.

TABLE OF CONTENTS

• When to use Alternate Layouts
• Preparing Your Template
• Set Up Variable and Constraints
• Setting Up Alternate Layouts
• Building the End User Interactions
• Test Your Layouts
• Creating a Tempo Template that Contains Alternate Layouts

When to use Alternate Layouts

The first step is to decide which templates are a good candidate for Alternate Layouts. A general rule is to choose artwork that share the same content, but vary in size. When viewing your artwork side-by-side – or picturing what the end result should be – look for things like headline text, body text, images and background elements that are consistent, but vary in size. 

• Varying social media post sizes with the same image, call to action and button would be a great option
• Even if the artwork contains similar elements but there are several unique elements, this may not be a great fit for Alternate Layouts

Preparing Your Template

Once you’ve determined which artwork files you’d like to include in your template, you’ll want to start with – or build – the design that contains the most similarities among your files. This will help cut down on adding more frames once you bring your design into CHILI.

As you build your InDesign file following our best-practices checklist, you may choose to include representations of additional layouts you would like to configure. If you choose to use reference images for your different sizes/layouts, add each flattened image to an individual layer and name that layer accordingly. Ensure each image is positioned in the top left corner of your pasteboard and are represented at 100% of their original document size.

• Including reference image layers is optional and only meant to serve as a tool for building your Alternate Layouts
• When planning your image content to be selected by your end user, consider how that image will fit into the artwork or frame. If you plan to lock that image frame content, it’s best to ensure your images don’t contain excessive transparent space and are cropped as close to your artwork as possible. Ideally all images that are similar to one another should be sized and cropped as close to one another as possible. This will help ensure that the dynamic placement of these images by the software is consistent across all of the assets. 

Set Up Variable and Constraints

We’ll want to build as much of the template logic as possible before adding any alternate layouts.

Add and assign all of your variables, set the fit modes for the image frames, define any dynamic text behaviors; anything needed for the artwork version we’ve started our template with.

Setting Up Alternate Layouts

Once you have your base template configured, you’re ready to start adding alternate layouts. To do this, you’ll use the left toolbar to navigate to DOCUMENTS and choose the ALTERNATE LAYOUT LIST panel. You can add new layouts by clicking the + button in the lower left corner of the panel. You can then rename your Alternate Layouts, but keep in mind your end user will not see this list. You will set up the visible names using a list variable once your layouts are finalized.

• The [Default] layout cannot be renamed, but should still be used as your primary layout. You will rename this for your end users using a list variable once your layouts are finished.

You are now ready to design your Alternate Layouts. Each new Alternate Layout can vary in size and design. You can reposition frames, resize frames, double check the font sizes, include or exclude pages/layers/frames as needed, and resize our document. For all of these settings, we simply configure them as we would if we were working on a normal template; the alternate layout selected in the Alternate Layout List is what determines which layout the settings are applied to.

• It’s typically best to move all of the frames before resizing the document, as once the document is resized, it can be difficult to select frames outside of the page area.
• It’s important to note that frame content and formatting is not supported by alternate layouts. Only size and position is able to be made unique on a layout basis. This means that setting things like frame color, image placeholders, font size, etc. will change for all layouts. For dynamic colors, image content, or text formatting actions logic or copyfitting will be needed.

If you choose to bring in reference images, this is where they will come in to play. To use a reference image, it is best practice to follow these steps:

1. Select the layout you want to configure in the Alternate Layout List
2. Navigate down to the LAYER LISTpanel and turn on the layer containing your reference image for that layout
   • You may find it’s easier to re-design if this image is under the rest of our content. If needed, you can select that image frame and send it to the back
3. Select the layer(s) that contains your original artwork content (in the example it’s “Layer 1”), and turn the opacity down to around 50%
   • Doing this will allow you to see through your artwork to the reference image behind it. This allows you to reposition and resize your frames to match the reference design.
     • It can also be helpful to swap in the image and/or placeholder content from the reference image if it differs from your base design

Building the End User Interactions

Once you have all of your layouts in your template, you’re ready to configure how your end user and your data will navigate through the layouts. To achieve this, navigate to VARIABLE DATA on the right toolbar and follow these steps:

1. Create a new variable by clicking the + button in the lower left corner of the VARIABLE LISTpanel
   • Under the VARIABLE SETTINGS panel, name your variable in a way you will easy know that is your Alternate Layout variable
   • In the TYPE dropdown, choose LIST
   • Under TYPE SPECIFIC, add items to the list that correlate to your Alternate Layouts (This is where you will be naming your Alternate Layouts for your end user. You will want these to be logical and easy to differentiate.)
2. To build the action logic, choose ACTIONS
   • Click the EDIT* button next to ON CHANGE:
   • This logic will be similar to “If ‘List Variable Name’ displayValue is ‘List Item Name’ → execute alternateLayout ‘Alternate Layout Name’select”.
     • We repeat this logic and change the values in red to the different list item name and alternate layout it should select.
     • This will look similar to the image below, but will differ depending on the names of the list variable, item names in the list variable, and the alternate layout names. (Note the “List Item Name” must be word-perfect. This is the name you chose for your end users.)
     • This logic also contains a default zoom submission when the layouts change (line 10), as the alternate layouts may vary significantly in size.

This is the most basic action logic for selecting different alternate layouts using a variable value. More logic may be applicable for things like changing element colors or applying new text formatting if that is needed for the designs.

Test Your Layouts

As with any template created in CHILI, it’s always best to make sure it’s behaving the way you want it to.

Make sure the alternate layout action logic is triggering correctly, that the frames are positioned as you’d like, and that text formatting is appropriate for each layout. Try adding the expected minimum and maximum text input values expected from the end user (if applicable) and swapping in images of different aspect ratios.

Interact with the file in the same way the end users will. Be sure you didn’t forget to turn off a frame for a layout, reposition a frame, or enable copyfitting or reformatting logic for text.

Do your best to find these faults before your users do!

Creating a Tempo Template that Contains Alternate Layouts

Syncing a CHILI template that contains alternate layouts to your Tempo template will be the same as any other CHILI to Tempo sync. Meaning no extra steps should be needed once you’re in Tempo.

The only thing to consider is which layout and placeholder content you would like your users to see when they create their publication. Similar to any other Tempo Smart Templates, you will simply need to save the CHILI document with the desired layout active in order for that layout to load when the publication is generated.