Automatically create a 1px border in all exported scenes

Hi there! Saw it but couldn’t find the time to study the document. Much much appreciated, big thanks :slight_smile:

1 Like

That’s the problem with adding custom styles to the HTML header. If the export doesn’t use the HTML file, if you embed the Hype project directly on a different HTML page, then the styles aren’t loaded / used.

This is one of the reasons I tend to use “iFrame” as the way to add a project to a page.

But if don’t want to use iFrame, or you can’t use iFrame, then just use inline styles to add a border to the element containing the Hype project... or use custom JavaScript (that’s the second option in the solution) to add a border... or just add four line shaped elements (as persistent symbols) to your project that look like a border. (If you simply add a box, it might block clicks, so the four separate elements prevents that problem.)

There are lots of ways to solve this problem.

The problem is that, if I use the DCM export to make banners, how can I use a second export script? Or can I?

I cannot look at it at the mo. But PM me the DCM version of you use and I will see if I can transplant my code to it.

Thank you. Definitely adding four elements per scene is not my solution since that means a crazy amount of work for something so simple as adding a black border. I just set a border to the tap-area rectangle, I hope the agency will accept this. Otherwise I'll create a rectangle under it since the whole ad has to be clickable, not just the button. Hopefully I'll sort it out for the time being :stuck_out_tongue:

So here is the DCM version I wrote for inserting a border.

python is not a language I am massively up on, so hence me saying this is rough and ready.
Maybe @Daniel can have a quick look and give me some pointers on anything in it that could be changed.

Any way. The arguments are normal border arguments.



Updated to version2 (05 Jan /2018) - fix for css id issues and a couple of other bugs.


Updated to version 2.0.1 (17 Jan /2018) added css box-sizing to account for any padding being added for Layouts

DCM.hype-export border_201.zip (4.7 KB)


3 Likes

Did this work for you.?

2 Likes

Hi there! It worked wonders! Thank you :smiley:

I did install the script from the export options in the Hype Preferences, and now I can see the border. This solved my problem definitely. Big thank you!

2 Likes

Looking good to me :slight_smile:

But I'm also no Python expert -- Jonathan is the mind behind the export scripts.

1 Like

Thanks,
If there is a demand for this and @jonathan is good with the py whats the situ about these scripts being place on the export scripts page as a resource?

This would be a timesaver for anyone creating ads for networks that require always a border! If it can be shared amongst the other resources, I’m sure many would appreciate it. And thanks again!

1 Like

Hello again!

I was trying to use the script with some ads and I cannot export all of them with Advanced export options. If I export the first scene directly, from File > Export as HTML5 it works. But if I choose File > Advanced export to select more than one individual scene, the resulting files will miss the border. Can I export all of the scenes with a border automatically?

By the time being as I have to set up a tap area rectangle for each ad, I'm using a border in that element :slight_smile:

I do remember testing on slices and it working the way I tested.

Can you maybe pist a small example project and a screen grab of the advance settings you are trying…

It is the same project I was working on today earlier :slight_smile:
This is how the export options look (in Spanish but you can get the idea, I hope):

This is my project:
LATAM SemanaSanta sin CTA_v2.hype.zip (260,0 KB)

Ok so a quick fix until I find where the clash is…

It seems if your scene name begin with a number there is a a bug somewhere in the exported js. that does not like it??!
This is also the case if we do a normal export and name the zip starting with a number…

So the quick fix is to rename the scenes.

i.e

L300x250

Further update.

If I do a normal export on a project (Export Folder not using export script) with
<style>#300_hype_container{ border: 1px solid black;}</style> in the head manually

And the exported project is name 300 , We get the same issue.

If we do

#U300_hype_container{ border: 1px solid black;}` in the head manually

And the exported project is name U300 . All works ?.

So it seems the issue lays with how Hype exports generally to the ‘hype_generated_script.js’ script and not the export scripts.

Hi, @Daniel are @jonathan are you able to throw any light on why this would be the case.


Hmm Thinking about it, I am wondering if it is related to the same reason you should not have var names starting with numbers

CSS IDs can't start with a number unfortunately, but there's a funky workaround: ID's Cannot Start With a Number | CSS-Tricks - CSS-Tricks

Ah I see. It all makes sense now. Thanks.

I will lookI think the simplest for people just not to name scenes ( or any id ) stating with a number if they have css that will need to use it but I will look at maybe incorporating that trick in the link for the purpose of the border export script.
Thanks again :smile: :+1:

I would suspect the reason this was lost is that you were referencing the #index_hype_container ID, but the main container ID is named based on the export, so it could be something like #myad_hype_container and then would not match. You would need to name your export as "index" for it to work -- Hype's preview uses "index" as the export name.

Hmm, maybe this should be considered a bug in Hype then. It might also be a good idea for cases like this to give the main container a CSS class.

I'd have to think through generally if this is a feature widely desired in the export scripts. Regardless, you're welcome to send a pull request in GitHub if you'd like me to look at the changes and possibly integrate them.

Thanks Jonathan,

The script takes care of the naming so the container name Id is always the correct one used.

I have fixed the css issue in the code using the trick Daniel suggested and will post it later.. I will also look at doing the git pull ( not done one before)

Thanks again