Creating an Image Gallery Activity
Overview
Within our Getting Started Package, you will find a Template folder. 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.
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 |
Creating the Activity
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.
Drafting the Content
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
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.
