Oct 2017
1 / 11
Oct 2017
Aug 2018
RyanKRyan Kramer
1
Oct '17

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.)

Screen Shot 2017-10-03 at 12.37.02 PM.png1105×386 165 KB
Could I base64 the images? But how to insert that into the javascript? I’m feeling obtuse. What would others recommend?

Thanks!

  • created

    Oct '17

  • last reply

    Aug '18
  • 10

    replies

  • 2.5k

    views

  • 4

    users

  • 1

    link

Daniel Team Tumult
Oct '17

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.

10 months later
jamboreebop
Daniel
Aug '18

Hi Daniel, once you put the image like this into the inner HTML of the rectangle, can you make the image responsive?

Daniel Team Tumult
Aug '18

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.

jamboreebop
Daniel
Aug '18

Thanks! This worked!

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?

Daniel Team Tumult
1
Aug '18

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.

jamboreebop
Daniel
Aug '18

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.

jamboreebop
Aug '18

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:

> <style>
> 
> div.image {
>    content:url(INSERTBASE64IMAGECODEHERE);
>    width: 100%;
>    }
> </style>

And then insert this tag into your element inner html:

> <div class="image" width="100%"></div>