Import Images into Hype from FTP/SFTP

How can I import images/graphics that are not staged locally?

It appears that I can only add images that are on my machine. I don’t see an option to provide a URL to a graphic located on our server. Is there a workaround for this?

My goal is to have Hype access graphics located on our server, so that we do not have duplicated image files when adding a Hype animation to our site.

First of all FTP and SFTP require you to login and they are not the place to server images from. If you have a web root pointed to a directory you can get the images through the World Wide Web.

You can replace the URL of an image with CSS. Use a placeholder container to do all the animations, positioning and so forth.

  1. Create a placeholder Square
  2. Remove the background-color from it
  3. Give the square a class name
  4. Apply some CSS in Head HTML

Here is a example I made (with the CSS):

imageFromTheWeb.hype.zip (50,5 KB)

Max,

Thank you for this suggestion. I was able to replicate this solution using the instructions you provided, however, it only worked locally. Using the “preview in browser” function in Hype allowed me to see it working, but when I staged it online, the image does not display at all.

Any idea as to what may be causing this?

My employer has not approved me to share the link or Hype file, but I suspect that if you stage your animation online, you will experience the same issue.

Thanks in advance,
P

Works perfectly fine here …
http://playground.maxziebell.de/Hype/imageFromTheWeb/

Can you at least share a dummy test link ?.
Otherwise I am not sure how we can help you.

This is the way to achieve it without an external class definition with JS. Has the downside that you don’t get a Live-Preview in Hype while editing (only when previewing).

imageFromTheWeb_JS.hype.zip (24,7 KB)

1 Like

Gentlemen,

Thank you for your speedy feedback to my post. With some help from one of our more senior developers, we found a solution, which was to add the new CSS in Hype’s head HTML to our index.html file.

It now works as in the example from Max.

-P

1 Like