Using the Image Gallery

This topic dwells on the Customer's Canvas image Gallery. The Gallery provides access to all images available to the user. In this topic, we discuss how you can open the Gallery, its interface, and how to configure it.

The Gallery Overview

When the user adds a new image to a product or replaces a previously added image, the Gallery is displayed. Right-click an image in the design or an image layer to see the Item menu:

The image popup menu. The layer's arrow popup menu.

Click Select image to see the Gallery.

There are other ways to open the Gallery. Simply double-click an image, and in advanced editing mode, the Gallery is displayed when the user adds a new image to a design. The editing modes are discussed in the Simple and Advanced Web-to-Print Editor Modes topic.

The Gallery interface is as it appears on this screenshot:

The Gallery.

The Gallery provides access to all images available to the user. On the screenshot above, there are four tabs, each of which corresponds to an image source:

  • The My files tab contains user-uploaded images; such images are available only for the user who uploaded them.
  • The Public files tab contains images available for all users.
  • The Facebook and Instagram tabs contain users' images from their Facebook or Instagram accounts respectively.

In the screenshot, the Public files tab is selected. The images there are divided by categories, and each category has the same name as the corresponding subfolder in the public images folder. The number of files in a category is displayed in parentheses after the category name. Also, there are two "special" categories, namely, root and all.

Customizing the Public Files Collection

The public images folder contains all images, which are available for all users. By default, it is the ~\PublicGalleryFolder\ folder. The path is relative to the site root. This folder usually contains subfolders. Subfolders' names are used to name categories in the Public files tab in the Gallery. Exceptions are "special" categories:

  • The root category contains files located in the public images folder only.
  • The all category contains all files from the public images folder and its subfolders.

The public images folder and aliases for the root and all categories can be set in web.config as follows:

XML
<appSettings>
…
    <add key="PublicGalleryFolder" value="~/PublicGalleryFolder" />
    <add key="RootCategoryName" value="root" />
    <add key="AllCategoryName" value="all" />
…
</appSettings>

When you design a product and have a set of stock images prepared for such products, you may want to configure the Gallery on a per-product basis. In this case, set the publicFolderName property of the GalleryDialog object to a subfolder name that contains these stock images. You can do it in ~\Configuration\clientConfig.json or through the IConfiguration interface as follows:

JavaScript
config: {
    widgets: {
        GalleryDialog: {
            publicFolderName: "Flyers"
        }
    }
}

This configuration hides all folders in Public files but the Flyers folder.

See Also

Manual

IFrame API Reference