Creating an Image Gallery Activity

This section contains CLIO documentation.

This section requires photographs, illustrations or screenshots.

Overview

The Image Gallery activity type is a collection of images combined into a gallery that users can look through, with brief descriptions for each image.

Read More: Image Gallery (activity type)

Creating the Activity

We have provided a template for the configuration file, which is used by the CLIO interface to set up the activity. We also include a content drafting template created in Microsoft Word that can aid collaboration when creating activities as part of a development team.

Define the Activity

All CLIO activities, regardless of their Activity Type, contain many of the same configuration settings.  These are used to configure the screen and load the correct content.  By defining this information, we can begin to draft more specific activity content.  This information is included in both the drafting template and the coding template provided with each activity type. These are the most common settings:

Setting	Description
Title	The name for the activity.
Description	The description for the activity shown to visitors.
Preview	The image displayed for the activity in Exhibit Mode.
Introduction Video	The video displayed under the Activity Menu to provide a video introduction to the activity.
Audience	Each Program can have custom audiences groups, which are included as a way to help sort activities for predefined demographics.  When setting up the kiosk as part of their pop-up exhibit, facilitators have the power to configure which activities they think would best fit their audience and what they’re trying to achieve. Read More: Defining CLIO Audiences
Theme	Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface. Read More: Creating CLIO Activity Themes
Attributions	Notifications for copyrighted content used within the activity.
Acknowledgements	Notifications of appreciation for content creators.

Read More: Defining a CLIO Activity

Drafting the Content

Download the template.

Open the provided Content Template for drafting the Image Gallery activity.  First, we must decide on the basic descriptive information for the activity, such as the title, description, preview image and theme.  This information is required because it is used by the CLIO interface to properly display the activity.

Next, we can start to write the content needed for the Image Gallery activity type.  This activity type displays a grid of images that can be viewed as a gallery.  Users can open individual images to view any available captions, scroll to other images or start an image slideshow.

For this activity, we can copy the template for Image 1 and create as many duplicates as we need to have enough images.  For each image, we are required to have the location of the image.  Adding a brief description is optional, but can provide important context for users.  If we want a total of three images, we can duplicate Image 1 a total of two more times.  To keep organized, we can rename them to Image 2 and Image 3.  Now that we have the content draft set up, we can begin to enter all of the required information.  

Coding the Activity

Download the template.

Edit the template.

The next step will be to take the content that was created in the Content template and begin to migrate it into the Configuration template.  We will need to open the provided Configuration Template for drafting the Image Gallery activity.  This can be done in a plain text editor, but for the purpose of this manual we will be using jsoneditoronline.org/.  

Under the Configuration object, you can change the width and height, in pixels, for each image when they are being viewed as a grid.  The default size, 240, shows three images per row when viewed on our prototype kiosk.

Now, we will be duplicating the necessary fields to ensure that we can enter all of the data that we’ve spent time drafting.  In our previous example, we decided to use three images for our gallery, so we should start by making sure we have three images within the configuration file.

The first image within the activity is labeled as ‘1’, underneath the Images object.  If we click on the small box to the left of ‘1’, we can choose to duplicate it as many times as we need to create enough images.   

In our example, we would need to duplicate it twice to have a total of three images.  After this is done, we will need to rename the fields we just duplicated.  Currently, it will be named “1 (copy)”.  It is important that these keys be numeric and unique.  We will rename it “2”.

We can now begin filling out the empty fields for each image.  Under the first image, named “1”, we have the same information we entered into our content draft; Image and Description.

We can fill in this information for each of the three images that we would like to add.  Once you are finished, you can download the finished JSON file by clicking ‘Save’ and then ‘Save to Disk’.  This file can be copied to the Program’s @Activity folder, and the media can be copied to the Program’s @Media directory.

Options

Gallery Configuration

These are configuration settings for the gallery.

Property	Description	Expected Parameters	Examples
Size	The height and width of each image in the gallery.	Integer, measured in pixels.

Image Configuration

These are configuration settings for each image in the gallery.

Property	Description	Expected Parameters	Examples
Image	The image to add to the gallery.	Image File
Description	The caption that is displayed below this image.	Plain Text

Documentation
Installation	Look and Feel
Interaction Modes	Developing Activity Types
Creating an Interactive	Framework
Integrating CLIO	Contribute