{"id":620,"date":"2016-12-02T16:41:44","date_gmt":"2016-12-02T21:41:44","guid":{"rendered":"http:\/\/blogs.shu.edu\/digitalhumanities\/?p=620"},"modified":"2019-04-16T11:30:01","modified_gmt":"2019-04-16T15:30:01","slug":"timelines","status":"publish","type":"post","link":"https:\/\/blogs.shu.edu\/digitalhumanities\/2016\/12\/02\/timelines\/","title":{"rendered":"Timelines"},"content":{"rendered":"<p>Using Knight Lab&#8217;s &#8220;Timelines&#8221; product, you can easily create sliding horizontal timelines with popups, that include media and graphics.<\/p>\n<p>Here&#8217;s an example I put together in a few minutes this afternoon, a timeline of classical composers and their eras.<\/p>\n<p><div class=\"ose-another-test-blog ose-uid-4800e3fbe68f21a9694d62f708aa71de ose-embedpress-responsive\" style=\"width:600px; height:550px; max-height:550px; max-width:100%; display:inline-block;\" data-embed-type=\"SelfHosted\"><blockquote class=\"wp-embedded-content\" data-secret=\"NW0XRKlH14\"><a href=\"https:\/\/blogs.shu.edu\/tomstest\/sample-timeline\/\">Sample Timeline<\/a><\/blockquote><iframe loading=\"lazy\" allowFullScreen=\"true\" title=\"&#8220;Sample Timeline&#8221; &#8212; Another Test Blog\" sandbox=\"allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\" security=\"restricted\" src=\"https:\/\/blogs.shu.edu\/tomstest\/sample-timeline\/embed\/#?secret=NW0XRKlH14\" width=\"600\" height=\"550\" data-secret=\"NW0XRKlH14\" frameborder=\"0\" marginwidth=\"600\" marginheight=\"550\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\/* <![CDATA[ *\/\/*! This file is auto-generated *\/!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll(\"iframe[data-secret=\"\"+t.secret+\"\"]\"),o=l.querySelectorAll(\"blockquote[data-secret=\"\"+t.secret+\"\"]\"),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\/\/# sourceURL=https:\/\/blogs.shu.edu\/tomstest\/wp-includes\/js\/wp-embed.min.js\/* ]]> *\/<\/script><\/div><\/p>\n<p>There are just a few simple steps involved (other than gathering your data and media, of course). To get started, make sure you&#8217;re logged in to your Google account on the computer you&#8217;re working with. Then go into your blog dashboard and activate the <a href=\"https:\/\/wordpress.org\/plugins\/knight-lab-timelinejs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Knight Lab TimelineJS plugin<\/a>. If you are running a self-hosted blog, use the usual plugin installation and activation process.<\/p>\n<p>You&#8217;ll need to make a copy of the <a href=\"https:\/\/drive.google.com\/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&amp;mode=public\" target=\"_blank\" rel=\"noopener noreferrer\">Google Sheet template<\/a>, and populate it with your own data.<\/p>\n<p><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1QlW7M-hd4uI-MhFkx4crW5sSTZhI28qMwNdu03m5zqk\/edit#gid=0\" target=\"_blank\" rel=\"noopener noreferrer\">Here&#8217;s my version<\/a>, so you can see the differences.<\/p>\n<p>Save your sheet, <a href=\"http:\/\/timeline.knightlab.com\/index.html#make-step-3\" target=\"_blank\" rel=\"noopener noreferrer\">following the directions they give<\/a>. You can do this iteratively; Google sheets are automatically saved as you modify them, and are immediately available to your blog page or post without any changes to them.<\/p>\n<p>To embed it in a page or post, just paste in the shortcode, which will look like this:<\/p>\n<p><code>[timeline src=\"https:\/\/docs.google.com\/spreadsheets\/d\/etcetcetc\/edit#gid=0\" width=\"100%\" height=\"650\" font=\"Default\" lang=\"en\" version=\"timeline3\" ]<\/code><\/p>\n<h3>A couple of notes<\/h3>\n<p>The &#8220;media&#8221; file column will contain links to YouTube videos, SoundCloud files or similar. The &#8220;thumbnail&#8221; column will contain a link to an image (as always, mind your copyrights).<\/p>\n<p>The &#8220;type&#8221; column should start out with a row that is set as &#8220;title.&#8221; That will be the content on your intro screen. The other options are blank, which you use for a regular timeline item, or &#8220;era,&#8221; where you can use a color or background image to group together events within eras (Jurassic, Triassic and so on).<\/p>\n<p><a href=\"https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-621\" src=\"https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-300x224.png\" alt=\"screenshot_1\" width=\"300\" height=\"224\" srcset=\"https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-300x224.png 300w, https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-768x573.png 768w, https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-1024x764.png 1024w, https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-560x418.png 560w, https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-260x194.png 260w, https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1-160x119.png 160w, https:\/\/blogs.shu.edu\/digitalhumanities\/files\/2016\/12\/Screenshot_1.png 1090w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>I found that altogether the experience was similar to DH Press only much simpler to get started.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using Knight Lab&#8217;s &#8220;Timelines&#8221; product, you can easily create sliding horizontal timelines with popups, that include media and graphics.<\/p>\n","protected":false},"author":1,"featured_media":621,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[109,91,39],"class_list":["post-620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","tag-plugins","tag-timelines","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":4,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":1227,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/posts\/620\/revisions\/1227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/media\/621"}],"wp:attachment":[{"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.shu.edu\/digitalhumanities\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}