Creating a Slideshow Activity

This section requires photographs, illustrations or screenshots.

Overview

The Slideshow activity type allows users to navigate through a slideshow, with optional “basement” slides that exist below the primary slide.

Read More: Slideshow (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 Slideshow 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 Slideshow activity type. This activity type displays horizontal slides that can be navigated by the user, as well as basement slides that exist beneath a slide, allowing the user to navigate vertically.

This activity can be configured to use one of five transitions that can be used during slide and background image changes. When you are using a low-powered computer, like a Raspberry Pi computer or our prototype kiosk, we recommend that you do not use any slide transitions as they can slow down the interface for users. The slideshow can also be configured to loop back to the first slide if a user navigates past the last slide. Enabling looping will work in both the horizontal and vertical direction.

If we are making a Slideshow activity with three slides, we can select the template for Slide 1, including Basement Slide 1, and copy the text. We are going to have a total of three slides, so we can paste the template text twice. To keep track of the slides, let’s rename them to Slide 2 and Slide 3.

We want our activity to have a title slide with our logo, so for Slide 1 we will be using a background image. The background image is dark, so we need the font color to be light; so we’ll use white, or #FFFFFF. Our title text will say “Welcome!” with a size of “3” (which equates to the CSS “em” unit) and its X position will be “50px” (move down 50px from the top of the screen). We don’t want there to be any centered text on the slide, so we will leave “content” empty. We also don’t need this slide to have any basement slides beneath it, so we can delete that section.

Now that we’ve finished our first slide, we can work on our second slide. We don’t want this slide to have a title, just rich text content, which we will enter into the “content” field. It will use the same background image and font color as our first slide.

We want our second slide to have one basement slide beneath it. This slide will use a different lightly-color background, so we’re going to want to use black text instead, or #000000. It won’t have a title, but it will contain rich text content.

We can use these same techniques to fill in the last slide, as well as any additional basement slides we’d like. After we have all of this information drafted, we can start to put it into the activity type configuration template so we can add the activity to CLIO.

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 Collections Objects activity. This can be done in a plain text editor, but for the purpose of this manual we will be using jsoneditoronline.org/.

This is how the configuration file will appear once opened within JSONEditorOnline. Our first step will be entering the configuration information we have previously drafted. We want our activity to disable both the slide transition and the background transition, we will set Transition to “none” and Background Transition to “none”. We want to enable looping, so we will click on the checkbox to change the option to “true”.

Next, 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 slides for our activity, so we should start by making sure we have three slides within the configuration file.

The first slide within the activity is labeled as ‘1’, underneath the Slides 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 slides.

We have three slides we would like to add to the activity, so we will need to duplicate this field twice. After this is done, we will need to rename the fields we just duplicated. Currently, they will be named “1 (copy)” and “1 (copy 2)”. It is important that these keys be numeric and unique. We will rename them “2” and “3”, respectively.

We can now begin filling out the empty fields based on our draft. Under the first slide, named “1”, we will see “Configuration” and “Content”. We can begin to configure the appearance of the slide by opening the “Configuration” object.

Our content draft says we wanted to use a background image and, because it was darkly colored, we needed our font color to be white, or #FFFFFF. Our title will have a size of “3”, and its X position will be “50px”.

Now that we’re configured the appearance of the slide, we can enter the content for it. This will include the text we want to use for the title, the slide’s rich text content and any basement slides we want to add beneath this slide.

We can enter our title text, which we have drafted as “Welcome!”. We have also decided that we don’t want any rich text content for this slide.

Our content draft shows that we don’t have any basement slides beneath our first slide, so that means we’ll need to delete the basement slide template. When you view the Sub Slides object, you can see that it currently has one slide. Similar to duplicating, we can delete this slide by clicking on the box next to the slide and clicking Remove.

After deleting the basement slide from the Sub Slides object, we’ll see that it now says it is an (empty object) and lists the number of objects within it as {0}. We DO NOT want to delete the Sub Slides object, only the slide contained within it.

We can now move onto the second slide. In the same way as the first slide, we can enter all of the configuration information that we wrote in our draft. We are going to be using the same darkly-colored background that requires white text. We don’t need a title, but we would like to add rich text content, which we will enter into the “Slide” field. This second slide will also have one basement slide, which was already included in the template.

Now we can configure the basement slide that we want to have beneath this slide. When we open our first basement slide, which is named “1” underneath the “Sub Slides” object, we will see that it contains a configuration object, as well as our title and slide content.

Our content draft saw that we want to use a different lightly-color background that would require our text to be black, or #000000. This slide won’t have a title, but it will have some rich text content, which we will enter into the Content object. We can enter this information in a similar way to the top level slides.

Now, all we have left to do is create our third slide, using the techniques we learned during the first two slides. 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

Slideshow Configuration

These are configuration settings for the slideshow.

Property	Description	Expected Parameters
Transition	Transition used between each slide’s content.	"none", "fade", "slide", "convex", "concave", or "zoom"
Background Transition	Transition used between each slide’s background.	"none", "fade", "slide", "convex", "concave", or "zoom"
Loop	Whether the last slide loops around to the first slide. This works in both the horizontal and vertical direction, for slides and basement slides.	"true" or "false"

Slide Configuration

These are configuration settings for each slide.

Property	Description	Expected Parameters
Configuration – Background Color	Slide background color	Hex color code. Example: #66ff66
Configuration – Background Image	Slide background image	Image File
Configuration – Background Video	Slide background video	Video File
Configuration – Font Color	Font color for all text on the slide.	Hex color code. Example: #66ff66
Configuration – Title – X	Left margin for the slide title.	CSS units Examples: 15px, 1em, 25%
Configuration – Title – Y	Top margin for the slide title.	CSS units Examples: 15px, 1em, 25%
Configuration – Title – Size	Font size for the title	Integer. Uses CSS em for font size. This font metric allows for easier scaling with accessibility options.
Content – Title	Slide title text	Plain Text
Content – Slide	Slide content text	Rich Text
Content – Sub Slides	Contains the basement slides to add beneath a slide.	This field requires each basement slide to be configured using a similar syntax as the parent slide. Refer to the template configuration file.

Sub Slide Configuration

These are configuration settings for each sub, or "basement", slide that exists below an individual slide.

Property	Description	Expected Parameters
Configuration – Background Color	Slide background color	Hex color code. Example: #66ff66
Configuration – Background Image	Slide background image	Image File
Configuration – Background Video	Slide background video	Video File
Configuration – Font Color	Font color for all text on the slide.	Hex color code. Example: #66ff66
Content – Slide	Slide content text	Rich Text