Tumult Hype Animations Wordpress Plugin

Exporting & Previewing
99

Thanks! At one point we need a block, though. At least it would be nice.

100

Hi @Daniel,

I noted that you upgrade the plugin, and the new feature is great.

For a same Hype document, the sizes are different between oam and folder of export.

After unzipped the oam file, I found the difference is the default.png file, it is really big size, here is example:

one 2.4 MB project will export a 6 PNG image in OAM file.

what the png image is used for? can I delete it and then zip and change the format back to OAM and upload to wordpress?

Thanks

Alex

101

This can be safely deleted -- it is used by other platforms as a thumbnail, but it is not used by Wordpress.

102

Hi @Daniel,

Sometimes, I failed to update the hype document with oam format even I disable all other plugins.

I have to delete the previous hype cam document at wordpress backend, and upload a new one, but if I check the Hype document directory by FTP, I found the old hype oam file is still on wordpress directory.

I supposed the issue is related to IP-GEO-Block,but it is not, the issue could be reproduced after IP-GEO-block is deactivated, after reactivate HYPE plugin, the issue might disppear.

so please check these two post at following url for detailed information:

https://wordpress.org/support/topic/actiondone-is-malicious-please/#post-11034552

https://wordpress.org/support/topic/question-on-setting-for-exceptions/

103

It looks like from the first post the author now believes (as of 2 days ago) there was an issue in their code?

104

4 posts were split to a new topic: Minimum Height for Wordpress Embed (Wordpress Plugin)

105

My CSS and global variables in my html is not being recognized. I discovered that @Daniel 's comment is why.

Can someone please elaborate on how can include the javascript and css I have in the into an iframe and have it read when I serve it on a Wordpress site.

Is this something I can do within the Tumult interface? Do I create a resource file? I tried creating an html file with the js and the css inside and iframe and added it to the resource files. No luck.

Or is it a file that I have to add outside the app? If so where?

This is what I have in the head html:

<script  type="text/javascript">

// global variables


  var totalSelectOne = 0;
  var totalSelectTwo = 0;
  
  var arrayAccum = [0.00,0.00,0.00,0.00,0.00];
  var maxDistanceHold = [0.00,0.00,0.00,0.00,0.00];     
  var electricHold = [0.00,0.00,0.00,0.00,0.00];       
  var hydroFuelHold = [0.00,0.00,0.00,0.00,0.00];   

  	
</script>

<style type="text/css">

 .activeButton{
 border-style: solid!important;
 border-width: 3px!important;
 border-color: #438730!important;
}
</style>

Thanks!

https://www.greensight.no/testapp/
prototypeV7.zip (650.5 KB)

106

I’ve had good luck with running Hype animations in Wordpress in the past.

But for this most recent project, I’m running into issues with the < head >html as well as running jQuery commands.

Would it be a good solution to serve the Hype folders in a separate server and run everything in an iframe within Wordpress?

Thanks!

107

You can if I am recalling this correctly. Use iFrame instead of DIV in the tumult Hype panel in WordPress … setting on each upload.

108

I recently added a new guide on this topic guide to the troubleshooting section above. It deals with how to use jQuery when embedding via the WP plugin (by @MarkHunte). You may have seen it since then.

1 Like
109

Version 1.8 just released, which is a quick update today to address three things that bugged me:

  • It was tricky to copy the shortcode --now when you click on the shortcode it is automatically selected
  • The ‘copy code’ modal now displays code more like… code
  • Tested & supported up to WP 5.2 & deprecates support for PHP 5.5 which no longer receives security fixes.

Changelog

1.8.1 also pushed live, now with Afrikaans language support.

To help translate, visit this page! https://translate.wordpress.org/projects/wp-plugins/tumult-hype-animations/dev/ :iceland:

4 Likes
110

2 posts were split to a new topic: Troubleshooting OAM widget upload to Hype Animations Wordpress Plugin

111

Version 1.8.2 Just pushed, with support for Wordpress 5.3 and a couple tiny fixes to make life easier.

If anyone wants to help figure out why this is happening that would be awesome:

2 Likes
112

I’m revisiting this script tonight, as I’m covering it in A Book About Hype. It was a hard thing for me to do, as I didn’t have much success with the plugin. It’s silly for me to FTP my files to the server, instead of using the plugin. Yet, that’s what I have to do, as the doesn’t position the Hype project as expected.

At least, it didn’t, until…

Well, I’ll start at the beginning. This is the CSS I use to place Hype projects on my site…

.hype-box-16x9 {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
margin-bottom: 20px;
}

.hype-iframe {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border: none;
overflow: hidden;
}

…and this is the HTML…

<div class="hype-box-16x9">
<iframe class="hype-iframe" src="/files/templates/physics" allowfullscreen="allowfullscreen">
</iframe>
</div>

The plugin seems to want you to specify a height, but I don’t want to specify a height. I use a percentage, in order to maintain a 16x9 ratio. This is better for that classic Flash web game look.

So then I thought all I need to do is add the CSS class.

26%20PM
Screen Shot 2020-02-15 at 9.39.26 PM.png892×176 8.26 KB

Nope, that didn’t work. Yet, this did…

<div class="hype-box-16x9">[hypeanimations_anim id="1"]</div>

Heh, I had to add the other div around the Hype Animations shortcode. Now it works…

I might still switch back to the way I was using before, but at least I figured out what was wrong. That makes the plugin easier to explain. :smile:

1 Like
113

does it need some !importance? may there be situations where some other css overwrites styles of the wrapper?

114

So, the way this technique works, two separate elements are required... the iFrame containing Hype, and a container around that. The way the Plugin works, you can only style the iFrame. That's why I had to manually add a "div" with the "hype-box-16x9" styles.

115

Suggestion

Perhaps the iFrame option should have a “sandbox” attribute.

An obvious response is, “Duh, it’s your website. You should know what you’re uploading to it.”

That’s a perfectly legitimate response. It’s just a way of looking out for new web developers. To which you might response, “Dude, I don’t want the headache of the support issues that might occur from sandboxing.”

That is also a perfectly valid response, which is why this is merely a suggestion. I see an opportunity to slightly improve security. That might be a nice thing to do.

1 Like
116

5 posts were split to a new topic: Full Page Wordpress Post Troubleshoot

121

I want to make website like this tutorial

https://tumult.com/support/examples/Scroll-Animation-Control_by-Survey-Legend/Scroll-Transition-Tutorial_by_Survey_Legend.html

but when height not scale to 100% the buttom and upper, it’s not responsive again.

122

If you are using wordpress, ultimately you will need to have some container div that has a height to it. This could be percentage-based, in which case you can keep the height scale on in the hype document, since it will then fill the container.

I’m not too familiar with the best approach to do this in wordpress, but you may want to try looking into more “wordpress responsive height” posts around the web, since I would guess this comes up often enough. The good news is there isn’t anything specific to Hype holding you back; you just need to make sure there is a container which is big enough to fit.

The Survey Legend example can be made without any CMS as the blog post shows, which makes it a bit easier to do on a vanilla html page. (I removed your post on the other topic)

1 Like