Controlling image from external site -- as if added directly to Saola

I need to control an external image (via HTML) on a Saola page the way we can control an image added directly to Saola. I know this would be easier if I brough the image onto Saola but it has to be on the external site as it be dynamically populated. We can make any changes required to the external site and how the image is published there.

Here is my pack:

Untitled1.saolapack (2.1 KB)

Here is the image:

https://images.unsplash.com/photo-1556909211-36987daf7b4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80

  • How can I expand / contract the image on Saola (like how we changed px to 100% for SVG files) ?

  • How do I get the image to show proper ratio and not get cropped in different screen sizes?

Thanks!

Hi Shawn,

Instead of embedding just only the image, you can create a page that scales the image and embed that page into a HTML Widget element. HTML Widget even allows embedding HTML code directly: just set empty URL, click Edit HTML and enter your code, for example:

<style>
  html {
    height: 100%;
  }
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<img style="width: 100%; height: 100%; object-fit: contain;" src="https://images.unsplash.com/photo-1556909211-36987daf7b4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">

Regards

Perfect.

And what if the object to be imported is a WebGL render?

Two types:

  1. http://webgl.unilimes.com/project/wiiv/

  2. http://webgl.unilimes.com/project/view_markers/#

Thanks!

What’s wrong with these two WebGL pages?

I tried the same approach but it does not work. The goal is to control the webgl object the same way as the image.

Untitled1.saolapack (2.1 KB)

You WebGL pages already adapt to container size, you just need to set their urls for HTML widgets.

Regards