Core Publisher homepages currently lack the ability to easily embed mp3s and iframes into blocks. This repository shows what Vermont Public Radio is using to work around the problem. These files live on our S3 account and are called in Core Publisher's Promotional Blocks
through html in subheading fields. Big thanks to KUNC's Jim Hill and KBIA's Nathan Lawrence for their help.
The first step is to create an html file that contains the iframe. This repository contains the code for iframes that are currently embedded onto digital.vpr.net. For basic iframe embeds, follow template.html
. For a SoundCloud embed, see wintry-mix.html
. For jplayer, follow newscast.html
. The CSS at the top of newscast.html
was styled by Jim Hill to match Core Publisher's audio play buttons. Major points to Jim for that.
For pym.js, follow the instructions here. With Core Publisher, be sure to use the pym.js loader version.
Push the html file up to Amazon S3. At VPR, we created a folder within S3 called embed
and push everything there. For example, if we were to push the template.html
file from this repository up to VPR's S3 account, I should be able to head to www.vpr.net/apps/embed/template.html
and see my iframe live. Don't forget to click the "make public" button. That's very important.
Within the block factory, create a new promotional block. In the subheading field, call your new live version of the iframe, along with the reference to pym.js.
<div data-pym-src="http://www.vpr.net/apps/embed/subscribe-but-why.html"></div> <script type="text/javascript" src="//pym.nprapps.org/pym-loader.v1.min.js"></script>
Important to note: If adding a pym.js embed to a post, you'll need a different template. Core Publisher doesn't love those div
fields. Instead, follow this:
<p data-pym-src="http://www.vpr.net/apps/embed/subscribe-but-why.html">Loading...</p><script type="text/javascript" src="//pym.nprapps.org/pym-loader.v1.min.js"></script>