{"id":396,"date":"2019-01-30T16:41:51","date_gmt":"2019-01-30T16:41:51","guid":{"rendered":"http:\/\/locallinkages.org\/?page_id=396"},"modified":"2019-06-12T16:32:19","modified_gmt":"2019-06-12T20:32:19","slug":"timeline-js-tutorial","status":"publish","type":"page","link":"https:\/\/locallinkages.org\/resources\/timeline-js-tutorial\/","title":{"rendered":"Timeline JS Tutorial"},"content":{"rendered":"<p><a href=\"https:\/\/timeline.knightlab.com\/\">TimelineJS<\/a> is a tool for creating interactive, and embeddable, timelines. Use a google spreadsheet to organize dates and media, then upload it to the TimelineJS website. Customize your timeline and embed it on a webpage, including pages on WordPress and Omeka.<\/p>\n<p><b>Embedding with TimelineJS<\/b><\/p>\n<p>Note: You need to have access to Google Sheets to use this tool<\/p>\n<p>1. Navigate to the <a href=\"https:\/\/timeline.knightlab.com\/\">TimelineJS website<\/a>. The folks at KnightLab have done a great job creating <a href=\"https:\/\/timeline.knightlab.com\/#make\">a step-by-step tutorial<\/a> with additional links at the bottom of the page for Tips and Frequently Asked Questions. Refer to these links if you have any issues with this tutorial.<\/p>\n<p>2. Copy the TimelineJS template on the TimelineJS website to your Google Drive and add events to your timeline.<span style=\"font-weight: 400;\"><br \/>\n<a href=\"http:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-402\" src=\"http:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1.png\" alt=\"\" width=\"1252\" height=\"676\" srcset=\"https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1.png 1252w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1-300x162.png 300w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1-768x415.png 768w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1-1024x553.png 1024w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1-640x346.png 640w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_1-1200x648.png 1200w\" sizes=\"(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 770px\" \/><\/a><br \/>\n<\/span><\/p>\n<p>3. Begin to modify the Timeline Template. (Note: You can rename the template to suit your project, it will not affect the final timeline. Do not rename or delete any columns. Simply leave the fields blank if they are not useful for you.)<\/p>\n<ul>\n<li>Start with Row 2 (which is marked with a light blue background). This row creates the title slide for your timeline.\n<ul>\n<li>No dates are needed, leave the A-I fields blank.<\/li>\n<li>Add a title and description to the \u201cHeadline\u201d and \u201cText\u201d fields.<\/li>\n<li>Add an image (or other media) to the title slide from your Omeka collection (or another online source) by pasting the image URL from an item in your Omeka site. Be sure to include image credit information in columns M and N.<\/li>\n<li>Or set a background image by pasting the image URL from an item in your Omeka collection (or another online source) by pasting the URL in the \u201cBackground\u201d field.<\/li>\n<\/ul>\n<\/li>\n<li>Add items and events to your timeline by selecting the fields in each row. Begin by deleting the examples in the spreadsheet. Click the Add button at the bottom of the spreadsheet to add additional rows. Note, be sure to remove any extra (blank) rows from the bottom of the spreadsheet before you finish.\n<ul>\n<li>Add date information. Note: you do not need full date information. At least a year should be included. Events also do not have to appear in order.<\/li>\n<li>Add a headline- the short text that will be visible on the timeline.<\/li>\n<li>Add a description &#8211; brief text that will appear when the event is selected on the timeline.<\/li>\n<li>Add an image (or other media) for each event by pasting the image URL from items in your Omeka site. Be sure to add image credit information and captions. If you would like the source text to be linked, you can add the hyperlink using the following: &lt;a href=&#8221;your source url&#8221;&gt;text&lt;\/a&gt;<\/li>\n<li>You may group events using the \u201cGroup\u201d column. Enter a category or theme.<\/li>\n<li>You may style the slides by adding background images or solid colors using the \u201cBackground\u201d column.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>4. After you have added timeline information to your GoogleSheet (and confirmed that there are no blank rows), click on File and select Publish to the Web.. from the dropdown menu.<\/p>\n<ul>\n<li>Click Publish in the window that appears and select OK when asked \u201cAre you sure?\u201d<\/li>\n<li>Close the \u201cPublish to the Web\u201d window<\/li>\n<li>Close the dialog box<\/li>\n<li>Copy the URL in your browser\u2019s address bar, minus the \u201c\/edit\u201d (See the Timeline JS website for explanation. (Do not copy the link which Google provides in the \u201cpublish\u201d dialog box)<\/li>\n<\/ul>\n<p>5. Return to the TimelineJS website. <a href=\"https:\/\/timeline.knightlab.com\/#make\">Scroll down to Step 3<\/a> and enter your URL in the \u201cGoogle Spreadsheet URL\u201d field. Note: there are several optional settings available below. After you have confirmed that your timeline appears correctly, you can return to these options and modify sizing, language, fonts, start slide, zoom, and other features.<\/p>\n<p>6.<a href=\"https:\/\/timeline.knightlab.com\/#make\"> Scroll down to Step 4.<\/a> Click the blue Preview button and confirm that your timeline appears correctly and without errors.<\/p>\n<ul>\n<li>Note: if you find spelling errors or would like to make aesthetic changes, you may repeat steps 5 and 6 to preview the updated page. Any changes made in the spreadsheet will be public and updated in the timeline whether or not you repeat these steps.<\/li>\n<\/ul>\n<p><strong>To embed the timeline in your Omeka Exhibit<\/strong>, copy the code from the Embed field (above the blue Preview button on the TimelineJS website).<\/p>\n<ol>\n<li>In another window, navigate to your Omeka site and open the Exhibit page on which you would like your Timeline to appear.<\/li>\n<li>Click to add a new Text block to the page.<\/li>\n<li style=\"font-weight: 400;\">In the Text Block, click the Source Code button.<span style=\"font-weight: 400;\"><br \/>\n<a href=\"http:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_2.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-403\" src=\"http:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_2.png\" alt=\"\" width=\"552\" height=\"308\" srcset=\"https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_2.png 552w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_2-300x167.png 300w\" sizes=\"(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 552px\" \/><\/a><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\">In the text field that opens, paste the Embed code you copied from the TimelineJS page (in step 7). Click Ok.<span style=\"font-weight: 400;\"><br \/>\n<a href=\"http:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_3.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-404\" src=\"http:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_3.png\" alt=\"\" width=\"877\" height=\"729\" srcset=\"https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_3.png 877w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_3-300x249.png 300w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_3-768x638.png 768w, https:\/\/locallinkages.org\/wp-content\/uploads\/2019\/01\/TLJS_3-640x532.png 640w\" sizes=\"(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 770px\" \/><\/a><br \/>\n<\/span><\/li>\n<li>Confirm that an image of your Timeline is visible in the Text block. (Note; the features of your Timeline will not work on the Admin side of your page.) Click Save Changes. To view and use your Timeline, click View Public Page.<\/li>\n<\/ol>\n<p>Note that if you are not using Omeka.net, you may need to update the HTML permissions for your Omeka site to embed visualizations. You can do so by clicking Settings and navigating to the Security tab. In the HTML Filtering section, add iframe to the list of Allowed HTML Elements. Then in the Allowed HTML Attributes section, add \u00a0iframe.src,iframe.width,iframe.height to the list (pay attention to spacing and punctuation). Click to Save Changes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TimelineJS is a tool for creating interactive, and embeddable, timelines. Use a google spreadsheet to organize dates and media, then upload it to the TimelineJS website. Customize your timeline and embed it on a webpage, including pages on WordPress and Omeka. Embedding with TimelineJS Note: You need to have access to Google Sheets to use [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":65,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/pages\/396"}],"collection":[{"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":11,"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/pages\/396\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/pages\/396\/revisions\/1311"}],"up":[{"embeddable":true,"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/locallinkages.org\/wp-json\/wp\/v2\/media?parent=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}