How to add images in flags in timeline.js

Question

I am using timeline.js. i am new to timeline.js. I want to add the image in flag which is shown on timeline with different image icons for different points. I didn't get any solution for this in documentation or anything. Image of where i want to add image is shown in the image attached. flag_image Please find the demo in following link. Codepen

var dataObject = {
  "timeline": {
    "headline": "Welcome to TimelineJS",
    "startDate": "2011,12,10",
    "type": "default",
    "text": "<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.</p><p>You're looking at an example of one right now.</p><p>Click on the arrow to the right to learn more.</p>",
    "asset": {
      "media": "https://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg",
      "credit": "",
      "caption": ""
    },
    "date": [{
      "startDate": "2011,12,10",
      "headline": "Exception initiated by XYZ",

      "asset": {
        "media": "/static/welcome/step3.png",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2012,12,10",
      "headline": "Exception initiated by XYZ",

      "asset": {
        "media": "/static/welcome/step3.png",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2011,12,11",
      "headline": "Tech review approved by ABC",
      "text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
      "asset": {
        "media": "",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2011,12,12",
      "headline": "Approved by all",
      "text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
      "asset": {
        "media": "",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2011,12,13",
      "headline": "Closure requested",

      "text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
      "asset": {
        "media": "https://image.ibb.co/eMGfya/episodic_failed.png",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }],
    "era": [{
        "startDate": "2011,12,10",
        "endDate": "2011,12,11",
        "headline": "Revision1",
        "tag": "This is Optional"
      }, {
        "startDate": "2011,12,13",
        "endDate": "2011,12,14",
        "headline": "Revision2",
        "tag": "This is Optional"
      }

    ]
  }
}

createStoryJS({
  type: 'timeline',
  width: '800',
  height: '600',
  source: dataObject,
  embed_id: 'my-timeline',
  hash_bookmark: true
});

.classRed
{
  background-color:red;
}
/*  .vco-slider .slider-container-mask {
    display: none;
}  */

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
<link href="https://cdn.knightlab.com/libs/timeline/latest/css/timeline.css" rel="stylesheet"/>
<div id="my-timeline"></div>

not sure if this helps but in d3js you have similar charts for example `timeline-image-chart` you can install using `bower` — Tony Roczz, Apr 26 '18 at 05:04

score 0 · Answer 1 · answered Apr 26 '18 at 00:41

You would need to add the image into the div element that represents the flag.

An easy way to do this is to use the browser Dev tools on an open timeline, use the element click tool to select a flag, determine the class used by flags (as well as a set of classes that makes a unique path is CSS class names to a flag) and use jquery/javascript to position an image element inside the the identified div element (that is, the flag).

In terms of using an image for each flag based on the type of event (of the flag), you will likely need to use text from your event to identify it in a div (like in the .each method of jquery after you apply the selector).

I am suggesting this as I changed the color of the flag based on types of event I had defined, and used the event type in the title field, parsed that text for the event name (the type was added as first word, so I parsed the string from position 0) and then changed the background-color CSS attribute (with !important).

BTW, I took this approach so as to not change the source code (post-processing the DOM).

Hope this helps some

How to add images in flags in timeline.js

1 Answers1