New WordPress Plugin: Pym Shortcode

We're pleased to announce the release of yet another new WordPress plugin: Pym Shortcode.

If you often find yourself embedding iframes in your WordPress posts, you've probably encountered the hassle involved in making an iframe responsive to the width of its containing element.

To address this problem, NPR Visuals Team released Pym.js, a JavaScript library that goes on the embedding page and the embedded page. The parent page tells the child page what the width of the iframe is, and the child page tells the parent how tall the iframe should be. The iframe, resized, now fits its content and the page. The embed code required is pretty simple:

<div id="example"></div>
<script type="text/javascript" src="pym.js"></script>
<script>
 var pymParent = new pym.Parent('example', 'child.html', {});
</script>

But WordPress' default configuration strips <script> tags from posts, meaning that you can't normally use Pym in WordPress sites.

Enter the pym shortcode. This simple plugin is designed to allow users to place Pym embeds without having to use <script> tags.

Here's an example of how the shortcode would be used:

pym src="http://blog.apps.npr.org/pym.js/examples/table/child.html"

In the goal of making it as useful as possible, we've given the shortcode a couple of other attributes, pymsrc and pymoptions, which are explained in the plugin's docs on GitHub.

If you feel so inclined, you can contribute to the plugin by forking the code on GitHub.

May this help all your interactives to be responsive!

resizing
Tiago Franco's classic "resizing the browser" gif.