Tumult Hype Animations Wordpress Plugin

In the plugin section of your self-hosted Wordpress site, you can download our new plugin by searching for Tumult Hype:

If you're curious about the manual (and difficult) method of embedding, visit this post.

Using the Plugin

Prefer a video? Watch this tutorial

First, export your Hype document as a OAM widget without spaces (or the _ character in the file name:

Click the Hype Animations Admin section, Click 'Upload' at the top, then drag your documentname.oam file right onto the modal that appears. This will provide you with a shortcode you can use in posts and pages. Or in your theme by inserting this format:

<?php echo do_shortcode( '[hype_animations_anim="12"]' ); ?>

Responsive Document Tips

If you're using Only Flexible Layouts in Hype and you have your height set to 100%, you will likely hit an issue where the Hype document won't appear at all. This is because the height of the document is 0 pixels, if no height is set. To fix this, you have a few options:

  • You can set a CSS class on a specific Hype element by filling in a CSS class on the input form:

Next, go to your Wordpress theme's CSS, and insert:

.minheight400 { height:400px; }

Planning Responsive Documents | If you add this Hype document to your Hype Animations plugin, it will help you plan your document's responsive settings when embedding in a post or page: SizeDetector.zip (278.9 KB). What this does is show you exactly the width and height of the space your Hype document will occupy. Resize your browser window's width to see it in action.

  • Another option: You could also dynamically set the height of the object based on a ratio of the viewport height. More info on that here.

Security Recommendation

Since this plugin allows uploading files to your Wordpress site, you may want to restrict to only certain users, or enable this option in Wordfence, a popular security tool for locking down Wordpress, to ensure files cannot be executed from the /uploads/ folder.

Including Head HTML & External CSS

By default, nothing that you include in the <head> of your document will be included in your embedded Hype document since that content is not included on the page. If you have JavaScript, CSS, or Font files loaded from the head of your exported Hype HTML, you'll need to embed your Hype document using the 'iframe' method. In the list of your documents, switch from <div> to <iframe>.

If you're using jQuery within your Hype project, you may need to adjust how you reference jQuery selectors themselves. Check out @MarkHunte's guide here.

Dataset Parameters

Do you want to open a specific scene or pass data to your animation? Please see @MaxZieb's excellent extension:

Example: [hypeanimations_anim_dataset id="X" key1="value1" key2="value2"]

Troubleshooting

  • Do not export from Tumult Hype with spaces or weird characters. Use export names like mydocument or 2017NewAnimation
  • Some Wordpress optimization plugins like JCH Optimize and the 'Autooptimize' plugin will cause issues with embeds. Workaround here.
  • Responsive documents work: Your DIV dimensions will reflect your scaling percentage numbers. But make sure you read the next bullet point:
  • Using a percentage-based height in a responsive document may cause issues. If possible, only set scaling on the width dimension for your document. This post explains some of the issues when working with responsive documents in Wordpress themes.
  • To switch from a <div> embed method to an <iframe> method, select the dropdown menu and click 'update' after choosing a new option:
    Screen Cast 2020-04-16 at 11.24.58 AM
  • If you're hitting an issue where embedded documents aren't showing up, look at your developer console and see if you hit any Filename.js is not allowed by Access-Control-Allow-Origin errors. To fix this specific issue, you'll need to adjust your Cross Origin Resource Sharing settings. (see this page)
  • jQuery Not working? Read this guide by @MarkHunte.

Translations or Pull Requests:

If you would like to help translate this plugin into additional languages or contribute programming support, please see this page: Language Support: Translations for the Tumult Hype Animations Wordpress Plugin

Bug Reports:

Please include your Wordpress version, any uploads you attempted, steps to reproduce the problem, and screenshots if helpful. To submit a bug report on Github, visit this page. Thanks!

6 Likes

26 posts were split to a new topic: Troubleshooting Tumult Hype Wordpress Plugin

@Daniel,

Great thanks, , and here is my test:

Multiste with wordpress 4.8., PHP version 5.6.30-0+deb8u1

and I met the errors blow at backend once hype-wordpress-plugin-master was activated:

prefix . ‘hypeanimations’; ?>get_charset_collate(); $sql = “CREATE TABLE $table_name ( id int(9) NOT NULL AUTO_INCREMENT, nom varchar(150) DEFAULT ‘’ NOT NULL, slug varchar(150) DEFAULT ‘’ NOT NULL, code text NOT NULL, updated INT(11) NOT NULL, container ENUM(‘none’,‘div’,‘iframe’) NOT NULL, containerclass VARCHAR(150) NOT NULL, UNIQUE KEY id (id) ) $charset_collate;”; require_once( ABSPATH . ‘wp-admin/includes/upgrade.php’ ); dbDelta( $sql ); if ($installed_ver==’’) { add_option( ‘hypeanimations_db_version’, $hypeanimations_db_version ); } else { update_option( “hypeanimations_db_version”, $hypeanimations_db_version ); } $update = $wpdb -> query(“UPDATE “.$table_name.” SET container=‘none’”); } $upload_dir = wp_upload_dir(); if (!file_exists($upload_dir[‘basedir’].’/hypeanimations/’)) { mkdir($upload_dir[‘basedir’].’/hypeanimations/’); } if (!file_exists($upload_dir[‘basedir’].’/hypeanimations/tmp/’)) { mkdir($upload_dir[‘basedir’].’/hypeanimations/tmp/’); } } function hypeanimations_install() { global $wpdb; global $hypeanimations_db_version; global $table_name; $charset_collate = $wpdb->get_charset_collate(); $sql = “CREATE TABLE $table_name ( id int(9) NOT NULL AUTO_INCREMENT, nom varchar(150) DEFAULT ‘’ NOT NULL, slug varchar(150) DEFAULT ‘’ NOT NULL, code text NOT NULL, updated INT(11) NOT NULL, container ENUM(‘none’,‘div’,‘iframe’) NOT NULL, containerclass VARCHAR(150) NOT NULL, UNIQUE KEY id (id) ) $charset_collate;”; require_once( ABSPATH . ‘wp-admin/includes/upgrade.php’ ); dbDelta( $sql ); add_option( ‘hypeanimations_db_version’, $hypeanimations_db_version ); } register_activation_hook(FILE,‘hypeanimations_install’); ?>
Parse error: syntax error, unexpected ‘}’ in /var/www/mysite.com/htdocs/wp-content/plugins/hype-wordpress-plugin-master/includes/functions.php on line 16

and please let me know if you need more.

Alex

I'll send you a PM. Not sure what this might be. If anyone else hits this, please add to this issue.

This really depends on your host. Check out your hosts help pages and search for 'php.ini'. Sometimes you can access it through your server backend, which is sometimes called 'cpanel'. And sometimes you can edit it by going a few folders up.

If you can reinstall this plugin for another round of testing please go for it – a number of improvements and changes…

Download URL: https://github.com/tumult/hype-wordpress-plugin/archive/master.zip

Hi Daniel,

I am getting this warning message when Page text area, after using the plugin:

[hypeanimations_anim id="
Warning: mysqli_query(): Empty query in /home6/speakonw/public_html/wp-includes/wp-db.php on line 1942

Warning: rename(/home6/speakonw/public_html/wp-content/uploads/hypeanimations/tmp/Assets/index.hyperesources/,/home6/speakonw/public_html/wp-content/uploads/hypeanimations/0/): Directory not empty in /home6/speakonw/public_html/wp-content/plugins/hype-wordpress-plugin-master/includes/adminpanel.php on line 50
0"]

The does not show the animation.
I would appreciate any help to solve this.

Thank you
Cheers
Ignacio

Thanks for the report, looking into it.

Daniel,

Tested just now, it works well in my wordpress 4.8.2 multisite. and here is test animation for your view: http://forum.lovcour.com/lovcourmotion

By the way, would you please show what you did for improvement and changes in Plugin introduction? thanks.

Alex

Can you uninstall and reinstall from the latest version?

https://github.com/tumult/hype-wordpress-plugin/archive/master.zip

Thank you Daniel,

I did it, and I got the following message

Insert the following shortcode where you want to display the animation: [hypeanimations_anim id="
Warning: rename(/home6/speakonw/public_html/wp-content/uploads/hypeanimations/tmp/Assets/test_rookie_video.hyperesources,/home6/speakonw/public_html/wp-content/uploads/hypeanimations/tmp/Assets/index.hyperesources): No such file or directory in /home6/speakonw/public_html/wp-content/plugins/hype-wordpress-plugin-master/includes/adminpanel.php on line 23
1”]

Cheers
Ignacio

Can you uninstall the plugin, then on your FTP server, can you delete this folder:

/wp-content/uploads/hypeanimations/

… then reinstall again from the latest?

Thanks for your help!

Thank you Daniel,

I have proceed as describe, several times, with the latest version.
I have also deleted the folder in the server.

Same error message.

It seems that for some reason, the plugin does not create the folder …/Assets/…
I can see it creates the …/hypeanimation/tmp, but not the Assets.
…/tmp is empty after the error message.

I have tried with different test animations. Same error message.

Thanks again for your support
Cheers
Ignacio

Hello,

I just doubt that your wordpress project were made some special high permission or maybe some security plugins, so you might like have a check. If yes, you might change that folder to be low permission so that it allow to write into it, or temporally deactivated some security plugins.

I am running wordpress Multisites, it works fine, 31 is ID of our test site for Hype animation project, and here is the screenshot of Wp-content of Our FTP for your reference, it works fine:

and permission that folder:

I just guess 755 is needed.

Alex

The plugin is now live. I’m still interested in helping folks out with bug reports and resolving issues. Please DM me or create a new post so we can work on any issues that come up.

@Nacho did you get my DM from a couple days ago?

1 Like

7 posts were split to a new topic: Troubleshooting Responsive document in Wordpress Plugin

Am I doing something stupid?
Ihave tried following the steps in the plugin and it produces blank space. I tried manually embedding and get 4 odd looking boxes/rects.
I assume as neither method works that it’s something to do with my project settings in hype but for the life of me I can’t figure out what

Uncheck scaling on the height dimension?

Yeah I had already done that I am now thinking its an issue with permissions in wordpress as when I switch to iframe I get this
Forbidden

You don’t have permission to access /wp-content/uploads/hypeanimations/1/index.html on this server.
I have created a test page with a simple animation to test with
also here is the simple animation


boxTest.hype.zip (10.2 KB)

You may need to manually set the permissions of the hype animations folder to be 755 in your FTP folder. That URL doesn’t seem to be working: http://www.idlanguages.com/wp-content/uploads/hypeanimations/1/index.html

This might be caused by an htaccess setting in the root of your site or in wp-content which restricts the loading of .html files, but getting access to your site would be helpful so I can dig in a little bit. (You can send me a pm if you’d like me to check it out)

4 posts were split to a new topic: Setting a minimum height for an embed using the Hype Animations Plugin