{"id":1373,"date":"2025-01-30T14:18:29","date_gmt":"2025-01-30T19:18:29","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=1373"},"modified":"2026-03-04T14:17:07","modified_gmt":"2026-03-04T19:17:07","slug":"creating-a-timeline-with-timelinejs","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/creating-a-timeline-with-timelinejs\/","title":{"rendered":"Creating a Timeline with TimelineJS"},"content":{"rendered":"\n<style>\nsummary {\n\tbackground-color: #C7EAFB;\n}\n<\/style>\n\n\n\n<p>TimelineJS is an interactive timeline tool you can use to create timelines that can be embedded on a WordPress site. To create a timeline, you&#8217;ll need to: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Draft your event text and collect images to illustrate your events<\/li>\n\n\n\n<li>Upload your images to your class WordPress site to get links to your illustrations<\/li>\n\n\n\n<li>Follow the instructions at the TimelineJS website to create your timeline by adding your text to a google spreadsheet and saving a special share link.<\/li>\n\n\n\n<li>Use the H5P iFrame embedder to share the link and add the timeline to your class site<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"createevent\">Step 1. Creating your Events<\/h2>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Creating your Events<\/summary>\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The first step to creating a timeline is to create the events you&#8217;d like to appear on your timeline. You&#8217;ll need the dates your events happened, text about the events on your timeline and images to illustrate your timeline. You&#8217;ll also need a title, description, and picture for your title slide to introduce your timeline.<\/p>\n\n\n\n<p>Want more details about drafting your event? Check out the TimelineJS <a href=\"https:\/\/timeline.knightlab.com\/docs\/using-spreadsheets.html\">documentation on using spreadsheets<\/a>. <\/p>\n<\/div>\n<\/details>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"upload\">Step 2. Upload your images to create a Media URL<\/h2>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Create a Media URL<\/summary>\n<p>The next step is to <a href=\"#upload\">upload your images<\/a> in order to create media urls for your timeline&#8217;s images. We recommend uploading them to your class&#8217;s WordPress website. Don&#8217;t have a class website? Get in touch with <a href=\"mailto:tgrandy@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Travis<\/a>, <a href=\"mailto:dnavarro@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Abril<\/a>, or <a href=\"mailto:rkeyel@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Becca<\/a> for help.<\/p>\n\n\n\n<p>Ready to upload? First make sure you have <a href=\"#download\">downloaded<\/a> and named your images so they&#8217;ll be easy to identify later.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <strong>Dashboard<\/strong> of your site.\n<ul class=\"wp-block-list\">\n<li>Need help logging in? Take a look at <a href=\"https:\/\/sites.smith.edu\/how-to-log-in-and-find-your-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">logging in and finding your site<\/a> or reach out to Abril, Becca, or Travis.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>In the \u201cDashboard\u201d, on the left side toolbar, select <strong>Media<\/strong><\/li>\n\n\n\n<li>Select the Add New button next to<strong> Media Library<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"288\" height=\"60\" src=\"https:\/\/sites.smith.edu\/frn220-fa23\/wp-content\/uploads\/sites\/993\/2023\/01\/Screen-Shot-2023-01-25-at-11.15.46-AM.png\" alt=\"The Media library Add New button\"><\/li>\n\n\n\n<li>A new section will appear in the Media library to allow you to drag and drop your picture or choose the Select Files button.<br><img decoding=\"async\" src=\"https:\/\/sites.smith.edu\/frn220-fa23\/wp-content\/uploads\/sites\/993\/2023\/01\/Screen-Shot-2023-01-25-at-11.16.26-AM-1024x247.png\" alt=\"The WordPress file uploader\" style=\"\"><\/li>\n\n\n\n<li>From here, you can drag and drop your image or choose the Select Files button.\n<ul class=\"wp-block-list\">\n<li>If you choose select files, navigate to the file on your computer and choose <strong>Open<\/strong> to upload it.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Your image will appear in the Media library list.<\/li>\n\n\n\n<li>Click on your image to open it.<\/li>\n\n\n\n<li>On the right side, select the Copy URL to clipboard button.<\/li>\n\n\n\n<li>Paste the link to your image in the Timeline document or somewhere you&#8217;ll be able to find it again.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"download\"><strong>Need instructions to download and rename an image?<\/strong><\/h3>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How to download an image<\/summary>\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<ol class=\"wp-block-list\">\n<li>Right click (<a href=\"https:\/\/support.apple.com\/guide\/mac-help\/right-click-mh35853\/mac\">Control + click on a Mac<\/a>) to open the context menu and choose Save As&#8230; to download your image.\n<ol class=\"wp-block-list\">\n<li>If you see a new Save File window and the image name ends in .jpg, .jpeg, .png, or .gif, choose where to save the image so you can find it later.<\/li>\n\n\n\n<li>If the image name does not have a file extension, it may not let you save the file this way, move down to the next section.<\/li>\n\n\n\n<li>If no context menu appears when you right click, the institution may have disabled this option. Skip to the next section.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Many archives and libraries provide high resolution versions of the items in their collections for visitors to download. You may need to use a download link to save the image.\n<ol class=\"wp-block-list\">\n<li>Look for a &#8220;download&#8221; link, or a download icon <img loading=\"lazy\" decoding=\"async\" width=\"29\" height=\"29\" src=\"https:\/\/sites.smith.edu\/frn220-fa23\/wp-content\/uploads\/sites\/993\/2023\/01\/noun-download-1103180-e1674834167988-150x150.png\" alt=\"A download image\"><\/li>\n\n\n\n<li>If you have the option to choose an image size, choose the largest size available.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>Once you have downloaded the image, you can also rename it so it will be easier to find once it&#8217;s uploaded.<\/p>\n<\/div>\n<\/details>\n<\/div>\n<\/details>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"maketimeline\">Step 3. Go to TimelineJS and Choose Make Timeline<\/h2>\n\n\n\n<p>The next step is to navigate to the <a href=\"https:\/\/timeline.knightlab.com\/#make\">TimelineJS website and select Make a Timeline<\/a>. Follow the directions at the TimelineJS site to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy the google sheets template<\/li>\n\n\n\n<li>Publish it to the web<\/li>\n\n\n\n<li>Paste the sheet url into the TimelineJS generator\n<ul class=\"wp-block-list\">\n<li>Use the optional settings to adjust the fonts or language <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Copy the share link<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step4\">Step 4. Use the iFrame embedder to add your timeline to your class site<\/h2>\n\n\n\n<p>Follow the <a href=\"https:\/\/sites.smith.edu\/project-resources\/iframe-embedder\/\" data-type=\"post\" data-id=\"309\">directions on Embedding Content with the iFrame Embedder<\/a> to embed your timeline on your class site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optional<\/h2>\n\n\n\n<p>Want to add more customizations or footnotes? Take a look at our <a href=\"https:\/\/docs.google.com\/document\/d\/1AMnwmhQzrZwmBK9_x55mpMUSGRPbxQR3SAb1b9YrxEw\/edit?usp=sharing\">Getting Started with TimelineJS<\/a> tip sheet.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Example Timeline<\/h2>\n\n\n<div class=\"h5p-content\" data-content-id=\"8\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>TimelineJS is an interactive timeline tool you can use to create timelines that can be embedded on a WordPress site. To create a timeline, you&#8217;ll need to: Step 1. Creating your Events Step 2. Upload your images to create a Media URL Step 3. Go to TimelineJS and Choose Make Timeline The next step is [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,34],"tags":[],"class_list":["post-1373","post","type-post","status-publish","format-standard","hentry","category-class-instructions","category-tools"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/users\/5691"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/comments?post=1373"}],"version-history":[{"count":28,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1373\/revisions"}],"predecessor-version":[{"id":1572,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1373\/revisions\/1572"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=1373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/categories?post=1373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/tags?post=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}