Embedding Interactives
Posts can display a wide variety of interactive content, like maps, data tables, and other content from other sources. Most regular posts should use the One Column (Standard) template. This template provides the best reading experience when the post is comprised of mostly text. For posts containing interactives and visual elements wider than the One Column Template, you can optionally select the Full-width template in the Layout Options panel.
The Full-width template should be used judiciously, and only when the One Column template is too narrow for display of embedded, interactive, and other visual content. Consider the content from the reader's point of view, and select the Full-width template only if it enhances the user experience. Note that if you include text in the post in addition to your graphic, the line length will be the full width of the page. This is too long for optimal readability so you might consider using the standard one column template instead.HTML elements that don't involve Javascript or iframes, so if you're comfortable editing HTML you can use the Text mode in the post/page editor. Just be aware that if part of your code is stripped, WordPress does it intentionally. The purpose of this is to keep your site secure, which is extremely important!
Embedding Responsive Content via iframe
By default, content hosted on another server and embedded in a WordPress post won't resize responsively for mobile devices. Embedded videos can be made responsive by using the Module Wrapper, but other types of interactive content can be more difficult to make responsive. In particular, the Module Wrapper won't work with any embeds that contain<script> tags because they're not allowed by WordPress.
In this case, you can use the Pym Shortcode plugin, built by INN to allow embedded content in WordPress posts and pages using a simple shortcode. If the embed is built to work with Pym.js, Pym Shortcode will responsively resize an embed's width for mobile devices, and its height based on the width of its container.
Use of Pym.js with WordPress posts and pages requires:
- Hosting the embedded content on another web server. You can use any server, including Amazon Web Services, GitHub Pages, or any other web server you have access to. Unfortunately, our hosting company is optimized for hosting only your WordPress website so we're not able to host standalone data apps and interactives. The content of the iframe should not contain any design elements other than the actual content you want to display in WordPress. Things like navigation, excess padding around the edges of the graphic will negatively affect the appearance of the embed on your site.
- The Pym script must be included on the web page where the embedded content is hosted.
- The Pym Shortcode plugin must be installed and activated on your WordPress site.
For more on using Pym Shortcode, see the Pym Shortcode docs.