So I'm trying to create an HTML ad that is completely self-contained. I found this post:
But I'm still struggling on working out the details. I am able to get the ad to the point where all javascript is contained in the ad itself and it still functions, but I'm not sure what to do about images.
I thought I could host images and then change the link in the Javascript, but that seems to still break the images when I use absolute links. (See attached image for the text I'm trying to add a path to.)
For small images this is definitely a smart idea. Or, if you can use vectors or SVG images.
This would require getting the <svg.. image data within the inner HTML of a rectangle. This may result in a faster load time since fewer http connections will be required.
If want bitmap images (larger JPEGs for example) referenced remotely, you can insert regular img src code within the inner HTML of an element and reference the image on a remote server. Just make sure that the server supports https since most ad servers require that.
Dump the code in a rectangle! Ugh! It’s so brilliantly simple. Shame on me for not coming to that conclusion. Thank you sir. For others, I just exported from Illustrator and it has the option to view code. Copy/paste into Hype. Easy!
If you’re exporting from Sketch, the way you export determines how the SVG is sized.
Exporting the layer directly results in an object with the same sizing as the original object
If you place the element(s) on its own artboard, and export the artboard as an SVG, it will respond to the size of its container
When you place a regular image (like a JPG) within the inner HTML of an object, you would just need to set its width to be 100% (instead of pixel based) to get it to expand and contract based on the size of its container. Then for the actual Hype element, you would use flexible layout properties to get it to respond to the scene width.
However, I’m facing another issue while creating a responsive layout using this work around. My file is now 7mb… and pretty heavy (I need my entire html file to be 2mb or under). I think this is caused by inserting the base64 image every time into each layout… is it possible to put the base64 image in the element just one time in hype and then in every layout, it can recall it?
I wasn't really referring to load speed above, just using SVG & image code within the inner HTML of a Hype object. To answer your question: it depends. If you embed your SVG code within the inner HTML of an object it will download during the initial download of the generated JS file required for loading your hype document. If your SVG file is huge, this will slow down this initial load. If it is small, you won't notice the difference and you should embed it if you want as much speed as possible. Adding an SVG file to your resource library requires an additional HTTP connection to download so if you have many many SVGs downloading from the resource library this will be slower then embedding those (small) SVGs inline. We're talking maybe 100 millisecond difference on most connections.
Why are you using base64 for embedding images? Are you not allowed to load any images in your setup? This will drastically increase the amount of data needed for loading your images.
It’s a very very big ad network’s requirement… I don’t want to use base64 images at all. But they want us to deliver ads and playables in one mega html file basically. We are not even allowed to have http requests or links to external assets.
I found a workaround! I’m not so fluent in coding (I’m more of a designer) but basically, I inserted custom CSS into the head html and then inside each rectangle element, I linked back to the CSS with a div tag.
For those of you who are like me, insert this into the head html:
