Adding iframe to Simple Pages

Omeka Classic Plugins
1

I am trying to embed a Timeline JS from the knight lab on a Simple Page, and although I am using the HTML editor, it doesn’t appear on the page. I disabled the HTML filtering thinking it might be stripping the iframe, but that didn’t help. The only way I could display the Timeline was to add it to the show.php for the page in my Seasons folder, but that means it is on all my Simple Pages. Is there anyway to embed the Timeline full size on one page using the HTML editor?

Here’s a link to the test case in case that will help.

Thanks again to the collective brain for help on this,
Nancy

2

Hi NancyAnn:

One idea is to include “iframe” in the list of “Allowed HTML Elements” in the security settings of the Admin interface.

Another idea is to use your own JSON data. I created a timeline using JSON data, following these directions.

You can see my timeline (on a Simple Page) here.

I know this varies from the iframe instructions and takes more effort, but it can pay off in a good result.

Best of luck, Emily

3

Hi Emily,

Thanks for the tips on this. Love your timeline and your site. Just a few questions. Where did you add the script for the first two steps and what part of the code below did you use on the Simple Page?

<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

<!-- 2 -->
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<!-- 3 -->
<script type="text/javascript">
  // The TL.Timeline constructor takes at least two arguments:
  // the id of the Timeline container (no '#'), and
  // the URL to your JSON data file or Google spreadsheet.
  // the id must refer to an element "above" this code,
  // and the element must have CSS styling to give it width and height
  // optionally, a third argument with configuration options can be passed.
  // See below for more about options.
  timeline = new TL.Timeline('timeline-embed',
    'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml');
</script>

Thanks for any input on this,
Nancy

4

Nancy:

I put item number 2 in the head of the Simple Page:

script src=“https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js”

I didn’t use a link to a Google doc since I created a JSON data file. I linked to the local copy of the data file.

I think adding iframe to the list of the allowed HTML elements might do the trick for you.

Hope that answers your question.

Emily

5

Hi Emily,

Thanks for your help on this - I figured out that I had commented out the primary div when I added the original iframe to the show.php for the Simple Page.

Best,
Nancy