search

mapbox / storytelling

Storytelling with maps template
BSD 3-Clause "New" or "Revised" License
527 stars 258 forks source link

Storytelling in a WordPress post? #45

Open design-ng opened 3 years ago

design-ng commented 3 years ago

Hi!

We'd like to use Mapbox storytelling on our WordPress site. We're open to any way to make this possible, but ideally it would be to keep the header and footer of our site and put the storytelling in the content section of the page/post. Do y'all have ideas?

Cheers, Doug https://www.berkeleyside.org https://oaklandside.org

stevebutton commented 3 years ago

in Wordpress probably your best approach is to insert an iFrame that loads the Mapbox page. Exactly how you do that will vary depending which theme you are using (some themes have embed components/widgets, some don't).

jbranigan commented 3 years ago

There is an issue with iFrames and the intersection observer browser API. The API calculates scroll position from the window, rather than a div container, so the scroll-driven events may not work as expected.

I can't really comment on WordPress specifically, but it looks like there are some plugins that allow for custom HTML and JS. I've seen some examples on news sites where the template is built into the surrounding page. In these cases, the header/larger story scrolls up to reveal the map, and then the footer and other information are at the bottom of the story.

stevebutton commented 3 years ago

Interesting - I've embedded via iFrame quite a few times with no issues relating to navigation, but then again in what I have been doing the events are not scroll based but I tend to give onclick navigation events via a menu or buttons.

jbranigan commented 3 years ago

Yes, any interactions that don't rely on the intersection observer work great in an iFrame. Here's more info on that particular issue: https://github.com/w3c/IntersectionObserver/issues/372

design-ng commented 3 years ago

Thank you for you all for the feedback.