visuals + news appsResponsive Graphics In Core Publisher With Pym.js
Note: This post is out of date. NPR Visuals recommends using the new pym-loader.js to load iframed content on Core Publisher pages.
Editor’s Note: Core Publisher is a content management system that staff at many NPR member stations use to maintain their websites. This post is written for that audience, but may be useful for users of other CMSes.
Over time, many member stations have created maps, graphics and other projects for their websites that were sized to fit Core Publisher’s fixed-width layout. But with the responsive mobile-only sites, and Core Publisher going to a fully responsive design, these elements either don’t work or won’t resize correctly to the screen.
Now you can use Pym.js to iframe responsively-built projects within Core Publisher stories.
Achievement unlocked: I think I just got pym.js working on my CorePub mobile site https://t.co/AiP59h1UME
— Jim Hill (@ejimbo_com) December 2, 2014(Note: NPR Digital Services, the team behind Core Publisher, doesn’t maintain or support Pym.js and can’t help you use it. But they didn’t raise any concerns about this workaround.)
I Was Ready Yesterday, What Do I DO?
I like that enthusiasm. First of all, let’s get a few assumptions out of the way: We’re assuming you are familiar with working in Core Publisher, know the post building process, comfortable with working in the source code view in the WYSIWYG with HTML, and that you have a separate web space to host all of your files (KUNC, like the NPR Visuals team, uses Amazon’s S3 service).
1) Download Pym.js.. Follow the instructions to integrate it into your project. (In Pym.js terms: Your project is the “child” page, while the Core Publisher story page it will live on is the “parent” page.)
2) Publish your project to the service of your choice. Note the URL path: You’ll need it later.
3) Build a post as normal in Core Publisher and then switch to the source code view and locate in the code where you want to place your iframe.
4) Core Publisher often strips out or ignores tags and scripts that it doesn’t recognize when it publishes. We’re going to get around that by using tags that CP does recognize. We’ll use Pym.js’s “auto-initialize” method, rather than inline JavaScript, to embed our project on the page. But, contrary to the example code in the docs, don’t use <div> tags to indicate where the iframe will go — use <p> tags instead. You’ll also need the URL path to your project from step 2: That will be your data target. The tag will look like this: <p data-pym-src="http://example.com/project/"></p>.
Your target code for the iframe should look something like this:
<p>Bacon ipsum dolor amet cupim cow andouille tenderloin biltong pork belly corned beef meatball swine pastrami alcatra.</p>
<p data-pym-src="http://example.com/project/"> </p>
<p>Cupim beef ribs ribeye swine tail strip steak drumstick venison bacon salami pig chicken.</p>
Beware: Core Publisher often will ignore paragraph tags <p> that are empty when it publishes. To avoid this, insert a non-breaking space between the opening and closing <p> tags for your pym target. Sometimes the CP WYSIWYG hobgoblins will insert this for you as well.
5) Next, point to the Pym.js script file. <script> tags are sometimes hit-or-miss in Core Publisher, so you should save your work right now.
(Note: If you’re embedding multiple Pym.js iframes on a page, you only need to include this script tag once, after the last embed.)
6) Did you save?
7) Good, let’s place that script tag now. It should follow the last iframe target in your post and should only appear once. You’ll need your URL path to pym from step 2. The full tag will look like this: <script type="text/javascript" src="http://example.com/project/js/pym.js"></script>.
8) Your complete code should now look like this:
<p>Bacon ipsum dolor amet cupim cow andouille tenderloin biltong pork belly corned beef meatball swine pastrami alcatra.</p>
<p data-pym-src="http://example.com/project/"> </p><script type="text/javascript" src="http://example.com/project/js/pym.js"></script>
<p>Cupim beef ribs ribeye swine tail strip steak drumstick venison bacon salami pig chicken.</p>
Most of the time the script tag should be fine since it is a simple one — only the tag and URL, and no other arguments. Sometimes Core Publisher will still strip it out. This should be the last thing you place in your post before you save to preview or publish.
If you go in later and edit the post, double-check that the script wasn’t stripped out.
A good sign that the script wasn’t dropped? The following text might appear in the normal WYSIWYG text view: {cke_protected_1}. Don’t delete it: That’s script code.
Take a look at your post and revel in how cool that Pym.js-inserted element is. Or take a look at this example or this one.
What Gives? Your Example Isn’t On The Responsive Theme.
We’ll be transitioning to the responsive design in a few months. In the meantime, KUNC has a lot of legacy iframes that we’ll be going back to and embedding with Pym.js. And Pym.js works like a champ on the already-responsive mobile site, so these projects will work better for the quickly-growing mobile audience. Always think mobile.
So, Does It Work On The Responsive Theme?
It sure does! Anna Rader at Wyoming Public Media was kind enough to let me try a Pym.js test post on their newly-transitioned responsive site. Everything worked like a charm and there was much excitement.
Will The Pym Code In A Post Carry Over The API For Station-To-Station Sharing?
I haven’t tested this yet. If you’d like to be a test subject, let me know and we can give it a try. Looking at the raw NPRML in the API for a post with the pym code it in, it all seems to be there.
Have any questions? Find me on Twitter @ejimbo_com and ask away.
