search

thecdil / timelinejs-template

https://thecdil.github.io/timelinejs-template/
MIT License
15 stars 4 forks source link

Ability to contine text below a timeline. #11

Open paul-hammant opened 3 years ago

paul-hammant commented 3 years ago

The page that contains a timeline can have multiple paragraphs of standard markdown above the actual timeline. It would be great to be able to have text/pics below.

I'm not sure what the possibilities are in Jekyll/Liquid there, or how to select the style in front-matter per page.

paul-hammant commented 3 years ago

Could be that {{content}} can't be coerced.

Maybe theres a Jquery trick to pull the rendered widget out of the DOM and to move it up so some other location. Say in the middle of the markdown we'd place a

evanwill commented 3 years ago

Yeah, not a very good way to do it right now, basically you need <div id="timeline-embed" style="height: 600px" class="w-100"></div> where you want the timeline to show up. Right now the layout is putting that div in, so I just put {{ content }} above the timeline (and you can't really split content). maybe there could be an option to skip adding the div via the layout, which then the user would be required to manually add the div to the markdown page.

if you are doing this in your own project, just go into the layouts and delete the part like:

{% if page.timeline or page.timeline-json %}<div class="my-4"><div id="timeline-embed" style="height: 600px" class="w-100"></div></div>{% endif %}

Then in your markdown pages, you just need to remember to add

<div class="my-4"><div id="timeline-embed" style="height: 600px" class="w-100"></div></div>

on its own line (with blank line above and below), where you want the timeline to show up.

paul-hammant commented 3 years ago

I'll give it a go. We already "decorate" elements with JQuery: https://github.com/its-airborne/timelines-site/blob/main/_layouts/default.html#L108

So there's plenty of options bu the JQuery tricks happen after an initial render which is second class.

evanwill commented 3 years ago

yeah, rather than messing around with the layout with js, the option I mention above is pretty straightforward and will have better end result. if you have a specific repository let me know and I could open a PR with the tweaks if that is helpful.