Project

General

Profile

Actions
Copy link

Support #11193

closed

Embedding StoryMaps JS

Added by Laurie Hurson over 5 years ago. Updated over 5 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Raymond Hoh
Category name:
WordPress (misc)
Target version:
1.14.11
Start date:
2019-03-05
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Hi All,

We have a faculty member using StoryMaps JS and wants students to embed maps into posts for display on the commons site: https://storymap.knightlab.com/

We have a timelineJS plugin to embed timelines (created with a tool from the same developers) but it looks like there is nothing similar for storymapsjs. Storymaps can be embedded with an iframe but it is striped out when the post is published or saved.

Can we create a workaround to embed storymaps on the commons? Maybe adding it to this help page about embedding? https://help.commons.gc.cuny.edu/embedding-content-from-other-sites/

Actions
Copy link
 #1

Updated by Boone Gorges over 5 years ago

  • Status changed from New to Reporter Feedback

Laurie, could you please share the URL of a specific storymap that the user might want to embed, along with the iframe code that the storymaps website provides?

Actions
Copy link
 #2

Updated by Laurie Hurson over 5 years ago

Hi Boone,

Students are currently submitting storymaps links in comments on a blog post (as a workaround in place of embedding). This is the professors site: https://cbse3203atbc.commons.gc.cuny.edu/submit-your-story-map/

Here is a story maps link: https://uploads.knightlab.com/storymapjs/66cdba549e8279c7f6017c15f4d147ba/a-story/index.html

I asked the professor to provide the iframe link and will add to this ticket once I get it.

Actions
Copy link
 #3

Updated by Laurie Hurson over 5 years ago

Iframe link from professor:

<iframe src="https://uploads.knightlab.com/storymapjs/66cdba549e8279c7f6017c15f4d147ba/a-story/draft.html" frameborder="0" width="100%" height="800"></iframe>

Actions
Copy link
 #4

Updated by Boone Gorges over 5 years ago

Thanks, Laurie!

Actions
Copy link
 #5

Updated by Boone Gorges over 5 years ago

  • Assignee set to Boone Gorges
  • Target version set to 1.14.10

Sorry this got lost in the shuffle. We'll shoot for the next release.

Actions
Copy link
 #6

Updated by Raymond Hoh over 5 years ago

  • Status changed from Reporter Feedback to Assigned
  • Assignee changed from Boone Gorges to Raymond Hoh
  • Target version changed from 1.14.10 to 1.14.11

It looks like StoryMaps JS uses oEmbed, but WordPress has very tight security surrounding <iframe> elements, which is why you are seeing nothing during previews and saves, Laurie.

I want to spend a little time to loosen these restrictions that WordPress imposes instead of introducing yet another shortcode. This will also be useful for future sites that use oEmbed with iframes, but are restrained by WordPress.

Assigning to myself.

Actions
Copy link
 #7

Updated by Raymond Hoh over 5 years ago

  • Category name set to WordPress (misc)
  • Status changed from Assigned to Resolved

Fixed in https://github.com/cuny-academic-commons/cac/commit/228508c64432309b24c71d225fee13bfdeceacb5

Laurie, after today's maintenance release, you should be able to embed StoryMaps JS links by just copying and pasting the URL on its own line in the Classic Editor.

In the Block Editor, you'll have to paste the URL in the "Embed" block:
https://wpcompendium.org/wordpress-gutenberg/blocks/embed-block/

The URL must begin with "https://uploads.knightlab.com/storymapjs/".

Actions
Copy link
 #8

Updated by scott voth over 5 years ago

Thanks Ray - I have added to documentation.

Actions
Copy link

Also available in: Atom PDF