What is a template?
A template is a model on which you can base your own work.
Rather than going through prompts and steps to create something new, a template asks you to replace what is already in the model with content of your own.
In CollectionBuilder's case, this means replacing their demo metadata and objects with your own, and then replacing the values in several config files with those that make the template look and feel like the site you want.
You can also use the templates to look at what's going on. Once you copy a CollectionBuilder template, the code and all the files are totally yours to investigate and customize.
CollectionBuilder was designed with learning in mind–and so are these docs!
CollectionBuilder’s workflow is scaffolded in order to help users build web and data literacy skills as they progress towards building and deploying new digital exhibits.
In order to receive the correct information, make sure to follow along with the instructions of the template file you have chosen to work with as there are multiple templates (Github,CSV,Sheets).
You can also search for specific terms at the top of the page in order to find what you are looking for and it will show where the term is on each page.
Object Types
Depending on the type of template you are using for you project, the object type you can use will vary.
GH and SHEETS support a small set of object types including jpg, png, pdf, and mp3, plus externally hosted items via YouTube, Vimeo, and external links.
The object files for CB-CSV collections are generally not committed directly into the project repository–the files are usually managed separately to avoid the drawbacks of tracking binary files in Git and the size limitations on GitHub.
File Extensions
If you are working with a Windows computer, have your files pulled up and select view. You should see a menu appear and the options "File name extensions" and "hidden items" appear. Make sure both are selected in order to see all your files you will be working with. Please refer to the picture below.
If you are working on a Mac computer, these options will appear similarly as Windows except they will be turned on by default.
File Naming
Naming your files with no spaces, no strange characters, and using lowercase lettering will help you better manage your files. Using underscores is acceptable. (i.e. file_001.jpg)
Why you should use google sheets
Required Fields for CollectionBuilder-GH and SHEETS. Without values in the fields below, CollectionBuilder will not work properly!
Follow this tutorial to learn about tips and tricks to organizing your google sheets.
1. Create a GitHub account. (Video Version)
If you don’t have an account, visit GitHub and click the Sign up button. You do not need a paid account for using CollectionBuilder. After signing up, check your email to verify your account.
2. Create a new repository. (Video Version)
Log in to your GitHub account and visit the collectionbuilder-gh repository page.
Click the green Use this template button and then the Create a new repository dropdown option.
3. Prepare your metadata for upload. (Video Version)
Make a copy of this Google Sheet of demo metadata.
Download the spreadsheet as a CSV file by clicking File → Download → Comma Separated Values (.csv)
Warning: Do not open the CSV file to avoid issues with Microsoft Excel scrambling your UTF-8 encoding. Excel cannot correctly export a CSV for use with CollectionBuilder.
4. Upload your metadata file. (Video Version)
On the homepage of your repository on GitHub.com, click on the “_data” folder.
Then click the Add file button and select Upload files.
Click Choose your files, navigate to the location of your metadata CSV (probably in your Downloads folder), and select the file. Press Enter to begin the upload.
Scroll down to the Commit changes box, write a short commit message describing what you did (e.g. Add demo metadata), and then click the green Commit changes button.
If you want to learn about creating, updating, and uploading your own metadata, visit our CollectionBuilder-GH Metadata Documentation.
5. Upload your objects. (Video Version)
Download the demo-objects.zip file (includes image files, PDFs, and mp3s).
Double click on this file to unzip it.
On your repository homepage, click on the “objects” folder, find the unzipped demo-objects folder, and drag your mouse down the list to select all the objects to add. Press Enter to begin the upload.
Warning: Make sure to select all the object files in the demo-objects folder instead of just uploading the demo-objects.zip file.
Write your commit message (e.g. Add collection objects) and commit your changes.
6. Configure your site settings. (Video Version)
On your repository homepage, click on the “_config.yml” file.
Click on the edit button (the pencil icon) to edit the file.
title
placeholder text with a title of your choice.For example:
title: Psychiana Demo Collection
Optional: Write a new tagline
, description
, and author
.
Under the COLLECTION SETTINGS section, replace the metadata
placeholder text with the filename of your uploaded metadata file without the CSV extension.
For example:
metadata: psychiana-demo
7. Generate your site. (Video Version)
On your repository homepage, click the Settings tab in the top right and then click Pages in the left side menu.
Under Source leave the dropdown option as Deploy from a branch.
Use the dropdown to change from “none” to “main” (leave the folder option as “/root”). Then click the Save button.
It will take a few minutes for your site to go live. You will see a message that your site is currently being built.
After waiting a bit, refresh the page. If the build is successful, an alert will appear providing the URL to your live site. The URL will follow the pattern: https://username.github.io/repository-name
You can visit this URL to see changes to your live site. To ensure any changes you commit are complete, look for a green check mark instead of an orange dot in the Code section of your repository’s homepage.
Tip: You may need to refresh the collection website for the changes to display.
8. Add a featured image. (Video Version)
On your repository homepage, click on the “_data” folder and then click on the “theme.yml” file.
Under the HOME PAGE section, replace the objectid
placeholder text with the objectid
of an image in the collection that you want to be the top image on the homepage.
For example:
featured-image: psychiana005
Visit your live site and use the Browse page to view potential featured images.
To find the objectid
for an image, click on the image title and then check the end of the URL of the item page. The URL will include the objectid
after id=.
For example:
For the URL, https://juliastone0729.github.io/psychiana-demo/item.html?id=psychiana005, the objectid
is psychiana005.
Tip: It is best to choose a large horizontal image if possible.
9. Edit the About Page. (Video Version)
On your repository homepage, click on the “pages” folder and then on the “about.md” file.
Write some text on this page using Markdown.
Optional: Practice using example code from our Feature Includes Bonanza page.
After you are done editing the About page, write your commit message (e.g. Edit About page) and commit your changes. View your changes by visiting your site’s URL.
10. Explore potential next steps. (Video Version)
Your collection website is complete! To implement additional Customization Options, your next steps could be:
If you want to get into more Advanced Options, you could explore:
To build your own custom digital collection website, you can follow these steps again after creating your own metadata file.
Main Library | 1510 E. University Blvd.
Tucson, AZ 85721
(520) 621-6442
University Information Security and Privacy
© 2023 The Arizona Board of Regents on behalf of The University of Arizona.