If an Image Gallery has been linked in the URL of a product, then all gallery images can be uploaded to each defined Image Area by default. It is possible to change this within the App so that only certain Galleries are available for specific Image Areas, rather than just being available to all of them. This is made possible by a custom config setting, which allows you to link Image Galleries to specific Image Areas via a shared naming convention.
**Important update: You can now link galleries to image areas as part of the product setup via the Image Area menu > linked galleries dropdown menu. This is compatible with ACP3. Using this method means that the image area is tied to the gallery, so the gallery will load in the App without the need for it to be referenced in the URL via the &g= parameter.
Custom Config settings must be set by Gateway admin - it is not possible for Users to create one. To obtain a Custom Config, you can request one by emailing firstname.lastname@example.org. Be sure to state that you need the 'Linked Galleries to Specific Image Areas' feature to be enabled. Upon creation, a Config code will be supplied; this is to be added to the URL/s.
Important Note: Custom Configs and the settings within them are App dependant. This means that some functionality within a Custom Config for the ACP2 App Layout may not be available in a Custom Config for Mobile or Garment 2 App Layouts.
In this article, we will be looking at a simple Predesigned phone case Product with a configurable stick-man (see Figure 1), and following the processes involved to add linked Image Galleries.
Step 1 - Set the Image Areas
In this example, we will set 3 Image Areas; one for the 'Head', one for the 'Tops' (upper body) and one for the 'Bottoms' (lower body) - see Figure 2. These are the 3 changeable elements that we want the end user to interact with and change to create their own stick-man design.
More information on configuring Image Areas can be found in the User Guide - Section 06: Image Areas
Pay close attention to the naming convention used here.
Step 2 - Creating the Galleries
Once the Image Areas are configured, you need to create the galleries that you want to link them with. In this example, we want to create 3 new galleries - these need to share the EXACT same naming convention as the Image Areas (see Figure 3). It is this matching name that links the two elements together within the App.
Important Note: The names of the Image Galleries and the Image Areas are case sensitive. Be sure to use identical characters and spacing to ensure that they link accordingly and be aware of stray spaces.
More information on creating Image Galleries can be found in the User Guide - Section 13: Personalise-iT Image Galleries
With the Image Galleries created, you can upload your images to them. In this example we are adding heads to the 1. Heads gallery (see Figure 4), then relevant clothing items to the other 2 (2. Tops and 3. Bottoms).
Step 3 - Generate the URL and PLAY!
Once both the Image Areas and Image Galleries are configured, its time to load the Product in the App and play with the functionality to make sure its working as expected.
Important Note: Image linked Galleries cannot be tested in the Print Test facility, unless you are using ACP3 method and linking via the image area on the product.
Generate your URL using Link Builder. Be sure to select all of the necessary Image Galleries from 'Step 5. Select A Gallery'. The Gallery codes MUST be loaded as part of the URL or they will not appear within the App. Follow the link to open the App. You will then need to manually add the Custom Config code into the URL string - this must be placed before the # but after c parameter (&c=xxxxxxxxxxxxxxx)
Once the App loads, you will see that the Image Areas appear in a selectable drop-down menu, and the linked Gallery images appear directly underneath - see Figure 5.
Here is an example link so you can see how it's structured and how the linked gallery feature works. Follow it and have fun making a few comical stick-men designs - you can even add your own image: