Custom File Location (css, js, images)

Feature Requests
1

Hi Tumult Team,

I really love Hype and so does the team in our company. However one feature which is imperative in our work is to be able to create separate directories after we publish that will contain Media > images / CSS /JS. The “platform or system” which we produce HTML5 animations for (Medical eDetailing on iPads) has a strict policy of having this type of directory structure.

Even if it is a hack, we really need your help on this one.
Best Regards

Malik

2

Talking about a hack … well hypes output is html and js-files, at least those are textfiles. You will be able to write a applescript that reads out the paths of css, any kind of picture and js-files, change those paths within, copy the files to a created folderstructure accordingly …

not tested, guess it’ll work …

3

Do you have an example?

@Tumult any response from you guys?

Thanks in Advance.

4

We’d like to be able to support cases like this; do you have a link or information on the spec?

5

Thank for responding Jonathan,

We are using several platforms for eDetailing, one is Veeva iRep and the second in Cegedim Mi Touch.

Each has its own directory structure, which I will attach screen shots for below.

So in a nut shell, once we complete the animation in hype and publish the html, we will need to change the file locations as per structure required (attached)

Looking forward to you support on this,

Kind Regards

Malik

Screen Shot 2015-02-24 at 17.31.37.png1345×751 185 KB

6

It looks like the first image didn’t come through, do you mind resending or sending to betafeedback@tumult.com?

For something that’s generally useful, we’d likely want to build this into Hype. However, since these are specific formats, we probably wouldn’t build them in. Fortunately, we do have a private export plugin format which can do these types of manipulations. We’ve worked with some companies in the past to help develop plugins to their needs (in fact, the OAM Widget export in Hype Pro was initially developed as this type of plugin).

If you or someone on your team is familiar with Objective-C, I could share the plugin API and you could build one yourself. Otherwise we could probably manage to build a version for you but there’d be some upfront development and ongoing support/maintenance costs associated with that. Let me know how you’d like to go forward.

7

Ive sent the document with the file structure, any feedback on that?

8

Hi Malik,
did you have a look at the exported files¿
It’s quite interesting to have a look at the hypegenerated jsfile.
change var f="…" to var f = ““
change f=b.substr(0,b.lastIndexOf(”/”)) to f=b.substr(0,b.lastIndexOf("/")-2); //-2 as i expect the jsfile within a js-named folder …
this will set the root to the parent folder of the hypegenerated-js which is the the html-file-location. so changing all filenames within the script by appending their relative path starting from the root (you’ve created the folder structure before and the files are moved within …) to their filename will work. For example change myImage.jpg to images/myImage.jpg and so on, don’t forget to also change the path to hypes-js-files.

Open the exported html-file and change all paths within accordingly.

I did this on a quite simple export and it worked as expected. If it is working for you too … it would be interesting to have a deeper look cause all these operations can be scripted / automated. though a built-in customexport would be better, of course :slight_smile:

9

I was in the process of doing that, images worked fine… but perhaps i did something wrong with the JS files.
I’ll try again… glad it worked for you! :smile: Hope it does for us as well.

Yes… definitely a scripted/automated option (custom export) would be a plus for HypePro @jonathan @Daniel :wink:

10

you may provide one of your exports.
I’ll have a look and if the applied changes will be ok on result I’ll give it a try to write the code … may work :wink:

11

I did send you a reply three days ago, you might want to check to see if it went to junk? Anyways, I'm pasting here:

=================

Hi Malik,

Thanks for sending that image.

One of the fundamental issues for making this change is that Hype keeps a notion of its "resourcesFolderName" representing the *.hyperesources folder. This is written out as the name of the folder and in most situations we try to convert it to a full url path. Within the runtime, the resourcesFolderName is used in these situations:

  1. loading the HYPE-454.thin.min.js or HYPE-454.full.min.js runtime file
  2. loading resources such as images, video, and audio
  3. loading any iframe html (if you make an HTML widget that has source, this gets written out as separate HTML files for use in iframes)
  4. loading the blank.gif file for IE6-8 transparent PNG support
  5. loading a PIE.htc file for IE6-8 to support some HTML5 features otherwise absent from these browsers
  6. determining if running on dropbox and needing to perform a specific caching workaround
  7. determining if running in an ibooks or file:/// url environment and needing to perform a specific audio workaround
  8. used for javascript API resourcesFolderURL() call.

So changing this notion could lead to some things breaking, though that may be acceptable in your use case. We do expect a wide variety of files in this one path - .html, .js, .gif, .htc, and then any other resources.

However, if you do not need to worry about points 3-8, then there are semi-easy modifications you can make which will allow you to achieve the folder structure you want.

Do note: this is completely unsupported. We could change the way we output these files at anytime which would break the workflow I'm going to describe. We also can't really spend much support time helping you out if you use this solution.

So warning aside, here's what you would do:

  1. Add a script tag to the <head> of the HTML to first load the runtime:

<script src = "js/HYPE-454.full.min.js"></script>

  1. Change the loader script src to look in the js path:

<script type="text/javascript" charset="utf-8" src="js/index_hype_generated_script.js?52177"></script>

  1. In the index_hype_generated_script.js file, you will need to change the resource paths, and tell the Hype runtime it is a reference URL (this nicely overrides it looking for the .hyperesources folder).

Find the code that looks like:

{p:1,n:"myImageName.png",g:"5",o:true,t:"@1x"}

First, change the image to be the path:

{p:1,n:"media/images/myImageName.png",g:"5",o:true,t:"@1x"}

Then add an ",r:1" to the dictionary which says it is a reference URL:

{p:1,n:"media/images/myImageName.png",g:"5",o:true,t:"@1x",r:1}

Now you'll find that the hype document will work with your folder structure! But again, steps 3-8

These are still the type of thing a plugin could accomplish automatically, so if you'd like to go down that route, let me know. The plugins are a supported mechanism and you wouldn't have to worry about breakage down the road.

I hope that helps,

Jonathan

2 Likes
12

Very important to me, too!

1 Like
13

can i use an url???
such as:
“3”: {p: 1, n: “http://oss.midoci.com/2015summer/pop-up.jpg”, g: “20”, t: “@1x”},

14

You can use a URL as long as you include the r:1 flag.

15

Jonathan,

Above you indicated that tumult had in the past helped to create custom export plugins for users individual users. I have encountered a similar situation where I need to deviate from the standard hype export directory structure, and would like to get some more information on the types of services your team can offer.

16

(I just shot you an email with details)

17

I solved this changing b.src=c+"/"+… for b.src=“media/images”+…

18

This has been a huge painpoint for me!

I just gave Hype a try and I think it’s an incredible app!

I needed it to make slide transitions, “on demand”, when user clicks something on the page.
I had the slides loaded in Hype as scenes with transitions and figured out how to initiate scene change from outside of Hype (through JavaScript).

But my app already had images uploaded to the CMS’s CDN and I didn’t want to use Hype’s CDN. I’m doing this on Shopify platform and I trust their CDN and if their CDN is down, I’m ok with the whole website not loading. It’s just one solution where everything is there. I don’t need to host something here, something there. Plus, I can specify a URL through Shopify that will update automatically when I swap the image (details are not important for this topic).

The point is, after I added r:1 it worked. It would be much better and more appreciated if r:1 was something better documented.

Looks like there’s more people looking for this kind of functionality. Please consider it.

Thanks!

1 Like
19

Thanks for the feedback!

The “r:1” field was originally intended for Export Scripts, and in their context this is documented as the is_reference property. Definitely it makes sense to add UI for this within the Resource Library for a future version.

2 Likes
20

You can also change the image path using JavaScript and Hype Events on the fly. Have look how I am using it for the Cloud Image CDN but it can be tweaked to any other CDN.

Basically, this is the callback to put in your site (Head HTML)

function resourceLoad (hypeDocument, element, event) {
    // do your modifications of event.url and return the result
}

if("HYPE_eventListeners" in window === false) window.HYPE_eventListeners = Array();

window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback": resourceLoad});

… and from there you can hook up your callback to edit the URL before Hype start loading it.

Here is the event described on Hype CookBook

2 Likes