Automatically create a 1px border in all exported scenes

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

Wow I understand adding a border automatically can get really tricky! Maybe it can be fulfilled some other way? But I don’t have the knowledge or experience using Hype to accomplish this.

In online ads, adding a solid 1px border is a mandatory request almost all the time.

Lol.
This issue is not really related to adding a border more it has just been highlighted by it. The issue could arise in other workflows.

I fixed this “bug” in the way the id is handled via the export script if the id starts with a number and will post that later today.

The quick fix if you need it before then is just to rename your scene names to start with a letter.

1 Like

And it worked, of course! I learnt you couldn’t name an id with a number, but just forgot after quite some time not using that knowledge.

1 Like

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

DCM.hype-export border_v2 py.zip (4.7 KB)

Please re download from the original post in this thread

1 Like

This script works perfectly fine with the project I was doing. All of the scenes have their borders as needed. Thank you.

1 Like

Hello! I’m testing this development to create many sizes with a few designs and it works really beautifully. But now, the export is missing the right and lower borders in the preview and export.

Is it something in the export script to tweak?

This is the preview in the HTML5 validator, for example. I can see the same problem in Hype preview.

Can you post a small example and I will try and see whats going on

Sure! This is the project I was using.
Test_adaptable_v2.hype.zip (2,1 MB)

I do not have that validator but when I use response layout design mode in Safari. I see that the border is there. But I think the scene is being adjusted by the layout code you are using that seems to be making it larger. The border is there and if you drag the scene over you will see the is some size slack in the scene

Hi there!

It is the Google validator. You can also try it here: https://h5validator.appspot.com/dcm/asset

I also use the Safari response mode and the problem persists as well for me. Strange?

When in the design mode. Try and drag the scene to the left and up. You will see the border…