Custom File Location (css, js, images)

Feature Requests
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