Clough Art Crawl -- Digital Exhibit

Overview

The digital Clough Art Crawl is an interactive digital art gallery serving as an alternative to the typically in-person, bi-annual event.

On the front-end, the project uses 7 open source JavaScript libraries and 1 front-end framework:

1. OpenSeadragon - v.2.4.2 to display high-resolution zoomable images and leverages the Deep Zoon tiles to do so.
2. Splide.js - latest version to create a touch-friendly and mobile-responsive image slider.
3. Splide.js video extension for adding videos to image slider.
4. Shuffle.js - latest version to create a sortable, filterable, and searchable interactive grid of images.
5. jQuery - v.3.5.1
6. Popper.js (included with Bootstrap)
7. Images Loaded for image event listener added to grid.js
8. Bootstrap - v.4.5.2 for styling.

On the back-end, the project is built on top of a simple Node.js server via Express. User data is stored in data.json and rendered dynamically using EJS. Currently, all assets are stored on the server, except for a few libraries that are accessed via CDNs (which need to be added eventually):

1. jQuery
2. Popper.js
3. Bootstrap
4. Splide.js Video Extension
5. Images Loaded

---

Setup

Below is a suggested workflow for obtaining, validating, and processing the user submitted data following the workflow I drafted as I experimented with the various data and media needed to create the prototype. In the interest of reducing the workload for IT&D, I would be happy to manage the setup for deployment process.

Workflow Outline

Setting up the project for production in three steps:

1. Acquire, sanitize, and validate student info and media files
2. Organize student info as a .json file
3. Create copies of student images for different uses within app

Student Info and Media Files

Summary: Receive student info and media in such a way that 1) the info can be efficiently validated and sanitized, and 2) the data can easily be converted to a .json file.

Form Submission

Info and media needed to power the app could be submitted via a Qualtrics survey, for which we've created a draft. Considerations for data submitted by users includes validating and sanitizing the data, e.g. prevent cross-site scripting. Qualtrics provides some basic validation, e.g. setting max length/max characters on text submissions.

I am open to using an alternative to Qualtrics. I recognize that other alternatives may be more efficient and better equpiied at validation and sanititization.

Media File Descriptions

Media Type	Extensions	Use	User Submitted?
Image - Full Size	.jpeg, .jpg, .png	Slider	x
Image - Thumbnail	.jpg	Grid
Image - DZI	.dzi	OpenSeadragon viewer
Audio	.mp3, .ogg(?)	/audio/:id	x
Video	n/a	Slider	x

---

Organize Student Info as .json

1. After validating and sanitizing data, create data.json file with objects representing artists and their data:

       {
           "Username": "String (50 char max)",
           "First Name": "String (50 char max)",
           "Last Name": "String (50 char max)",
           "Major": "String (50 char max)",
           "College": "String (dropdown option)",
           "Title of Artwork": "String (x char max)",
           "Artist Statement": "String (150 char max(?))",
           "Media": "String ('Media', 'Audio', or 'Video')",
           "Media Upload Location": "String ('youtube' or 'vimeo')",
           "Media URL": "String (for 'Audio' or 'Video' -- 100 char max)",
           "Image File": "File (extensions: .jpg, .jpeg, .png)"
       }

2. Alphabetize data.json using ./utils/sort.js

Process Images

Students submit full-sized copies of the images they would like to represent their art. After submission, three copies for each image will need to be created: a small 65px x 65 px thumbnail for the grid, deep zoom tiles for the OpenSeadragon viewer, and copy with a compressed width of 1080px for the slider.

I have written a script (./utils/images.js) using sharp - a Node.js image processing package - that creates these three additional image files.

Workflow:

1. In utils/, create artcrawl_full_size/ folder and add images submitted by students.
2. Either create three other folders (./dzi/, and ./thumbnails/, and ./artcrawl_1080/) or direct script to write newly created images files to ../public/images/dzi/, ../public/images/thumbnails/, and ../public/images/artcrawl/.
3. From utils run the script

   cd utils
   node images.js

---

Production

---

Considerations

1. Separate server for assets