Video: Embedding in Wordpress (Posts, Pages & Themes)

wordpress

#1

The recommended method of embedding a Tumult Hype document in Wordpress is to use the official plugin:

If you’re curious how to embed manually, please watch the video below and read on:


This video covers how to embed a Tumult Hype document within Wordpress:

Keep in mind that the instructions below are for adding a Tumult Hype document to a self-hosted Wordpress installation. Wordpress sites hosted on Wordpress.com are not compatible with Tumult Hype.

Best Practices

Before you begin, make sure that you do not set scaling to the ‘height’ dimension of your document. Checking this box may result in your document not appearing on the page. When you give the DIV which contains your Tumult Hype document a 100% value and place this div in a Wordpress post without a height set, the height of your document will be calculated at 0, resulting in what appears to be a broken embed. Feel free to use responsive width and flexible layout settings for width dimensions, but don’t use ‘scaling’ on the height dimension.

Adding a Tumult Hype Document to a Post or Page:

As a DIV:

The DIV method works if you have a barebones Wordpress installation. If the exported Tumult Hype document was uploaded to, for example: http://site.com/wp-content/uploads/test/Untitled_Resources/ you would add the following div in ‘Text’ mode:

<div id="untitled_hype_container" style="position:relative;overflow:hidden;width:600px;height:400px;"><script type="text/javascript"charset="utf-8" src="//site.com/wp-content/uploads/test/Untitled_Resources/untitled_hype_generated_script.js?63188"></script>  </div>

Note: remove the query string (?63188) at the end of your Hype document’s JS reference if you get this error: “The XSS Auditor refused to execute a script in ‘https://example.com’ because its source code was found within the request. The auditor was enabled because the server did not send an ‘X-XSS-Protection’ header.” Read more here.

Make sure the embed code is one line. Some WP setups have issues with tabs or line breaks. Also, sometimes Wordpress will mess up your embed code when switching between Visual and Text mode. It’s better to stay in Text Mode.

As an iframe

Caching plugins that create static files from Posts or Pages can conflict with Tumult Hype. If you’re using W3 Super Cache, go to JS minify settings and disable that.

If you can’t disable that option, you may have better luck embedding a Tumult Hype document as an iframe. First, export your Tumult Hype document to your desktop, and make sure you have checked ‘Also save HTML file’. Next, upload your HTML file and your generated resources folder to your Uploads folder within the ‘wp-content’ directory. You should be able to load your Tumult Hype document from a URL like this: http://site.com/wp-content/uploads/2014/HypeDocument.html. Next, create an iframe that uses the width and height of your document:

Paste that code within the ‘Text’ view of your Wordpress post. Here is an example embed from our blog:

Responsive Embeds

If you have a responsive document that takes advantage of Responsive Layouts or Flexible Layout, please watch this video for more info on how to set this up:

Adding a Tumult Hype document to a theme:

When adding a Tumult Hype document to a theme, follow these steps:

  • Upload your exported Tumult Hype document to a folder on your server. For this example, let’s pretend we’re uploading to_ /wp-content/uploads/._
  • Copy the three lines of text that are generated when exporting your Tumult Hype Document (explained here). These three lines can be pasted right into your theme editor at http://yoursite.com/wp-admin/theme-editor.php.
    Make sure that when you paste the DIV into the theme editor, you’re outside of any PHP tags, and that your script src is pointing to the correct location. For Example: If you’ve uploaded your Tumult Hype export directory into your ‘uploads’ folder and you named your document MyDocument, then you would need to edit the src of the script to read: “wp-content/uploads/MyDocument/mydocument_Resources/mydocument_hype_generated_script.js” This is known as a relative URL (it does not reference the domain), and it’s useful if you ever move your Wordpress site from one domain to another.
    You may also be interested in this blog post at Haiz Design which outlines how to include a Hype file only on the Home page of your Wordpress installation

Squashed Elements?

Some Wordpress themes use a different ‘box-sizing’ model in the theme CSS. If you see squished buttons or elements with text, follow these instructions to resolve the problem.


Wordpress integration
Issues with Embedding Hype Animation without set height
Register and enqueue Hype scripts in WordPress
Hype and Wordpress
Blog Hosting - Not Embedding 3rd Party?
New Release 3.6 - Youtube <iframe> issue
Make Any Hype Animation Scalable (responsive) with Element Queries
Retrofit a Responsive design?
Tumult Hype Animations Wordpress Plugin
Knowledge base: Guides from the Tumult Team