Automatically create a 1px border in all exported scenes


(Mark Hunte) #21

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


#22

CSS IDs can’t start with a number unfortunately, but there’s a funky workaround: https://css-tricks.com/ids-cannot-start-with-a-number/


(Mark Hunte) #23

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:


(Jonathan Deutsch) #24

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.


(Mark Hunte) #25

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


(Carola Clavo) #26

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.


(Mark Hunte) #27

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.


(Carola Clavo) #28

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.


(Mark Hunte) #29

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


(Carola Clavo) #30

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


(Carola Clavo) #31

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.


(Mark Hunte) #32

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


(Carola Clavo) #33

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


(Mark Hunte) #34

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


(Carola Clavo) #35

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?


(Mark Hunte) #36

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


(Mark Hunte) #37

When I look at it using the validator.

If I set the viewport size to 336x280

The scenes container goes to to 2px width & 2px height larger


(Carola Clavo) #38

Maybe I’m missing something, in the Hype app I can’t see the border. Only when it’s actually exported and then I preview the HTML file in a browser. All of them are missing the right and lower borders (tried a few browsers already).


(Mark Hunte) #39

Responsive layouts, distinguish portrait and landscape
(Carola Clavo) #40

Thank you for taking the time to make a video :smiley: There is no way I can do that! It takes me to the link in the ad. I’ll try to restart the computer and check it again later.

I managed to do it! So the border is there but can’t see it. It was exported nicely in past occasions, so I really don’t know what is different now except that is a flexible design.