Project

General

Profile

Support #11193

Embedding StoryMaps JS

Added by Laurie Hurson 6 months ago. Updated 4 months ago.

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

0%

Estimated time:

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/

History

#1 Updated by Boone Gorges 6 months 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?

#2 Updated by Laurie Hurson 6 months 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.

#3 Updated by Laurie Hurson 6 months ago

Iframe link from professor:

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

#4 Updated by Boone Gorges 6 months ago

Thanks, Laurie!

#5 Updated by Boone Gorges 5 months 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.

#6 Updated by Raymond Hoh 5 months 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.

#7 Updated by Raymond Hoh 4 months 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/".

#8 Updated by scott voth 4 months ago

Thanks Ray - I have added to documentation.

Also available in: Atom PDF