Now that you have changed the title to reflect that of your project, you are ready to personalize and edit the pre-filled columns to reflect your project needs.
Note: Each row in the Google Sheet corresponds to a specific slide.
Note: Row 1, with values in red and gray, remain the same, as those are the fields that belong to specific sections of your TimelineJS project. Row 2 in the spreadsheet is designated for the first slide of your timeline. You can consider this your introductory slide.
Headline:
Under “Headline” insert the title of your first slide. Each row on the sheet will represent an individual slide on your project. Ensure that you do not leave any rows blank, as this will disrupt the flow of your presentation.
Text:
To the right of it is “Text.” Insert the accompanying text for the first slide of your project
Media:
Insert the media (video, music, and/or image) for the accompanying slide. You can upload media from your computer or the web. Ensure that the media you upload are free from copyright issues.
Note: Ensure that the image you use is a JPG or PNG, as other formats will not work. Use Adobe Photoshop to resize images.
Uploading a personal photo to your project
TimelineJS requires images in .jpg, .png, or .gif format. Note: You might need to resize your image to fit the image resolution you want for the project.
Upload the Photo to the Web: TimelineJS will require you to host your image online. This guide will show you how to generate a URL for your image and upload it to your spreadsheet. You can also upload images in Github, Google Drive, and/or Box. Below are instructions on resizing images using Google Drive.
First, open Google Drive and sign in with your Google account.
Upload the photo:
Click “New.”
Select “File Upload.” Choose the photo you want to upload.
The photo will be uploaded to your Google Drive.
Find the photo in your Google Drive.
Open Sharing Settings and right-click on the photo. Select “Get Link.”
Adjust settings to “General Access.” Set to “Viewer.”
Click “Copy Link” to get the shareable link.
Media Credit:
Under “Media Credit,” acknowledge the creator, source, or owner of the media you’ve selected for your slide.
Media Caption:
Under “Media Caption” enter a brief description of the media. Including alt-text helps viewers understand the content.
Background:
The "Background" feature allows you to modify the color of your timeline. You can upload images as a background by providing the corresponding URL. To alter the color, insert the six-digit HEX code. Various color options can be found through a Google search, and the HEX code should be entered in the designated column.
Setting up your Timeline:
To set up your timeline, you will personalize the timeline to fit the needs of your project. In dark under “Year,” “Month,” “Day,” and "Time.”
The red column is designated for the start date, while the light gray column corresponds to the end date of your timeline. Each column represents a single slide within the timeline. To ensure
Note:
Sometimes events span across more than a single day, month, or year. Or, you might have events happen at a specific time. If you have an event that took place on a single day, include the same date on both entries. The same applies to entries that document the time of an event. If the event doesn’t have a time marker, leave the section blank.
Display Date:
“Display Date” allows you to designate the date you want to appear on each slide. This section is where you'd insert the date that the event took place. Note that TimelineJS will automate the dates so that they display in chronological order. TimelineJS will only require you to insert a year, but there are columns for month, day, and time if you'd like to personalize your event further.
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 Generic License.
