That should be simple but I can not figure it out.
I have images in an external folder, each is to be placed in a separate container. Trying to have something like that from a JS function:
And trying to have them show up on the mentioned container, I have been trying to find out but I am unable to find a way to call them and place them in a rectangle or html widget?
I do not want the url to be on the Hype file because it will upload on the complete list.
Any suggestion will be great, a sample code will be more than welcome.
all the best.
The actual code you are using isn’t valid javascript syntax. But let’s say you did have an array of images:
var images = [
'images/TimeOut/89/89.01.jpg',
'images/TimeOut/89/89.02.jpg',
'images/TimeOut/89/89.03.jpg',
];
The steps to feed one of these values into Hype would generally look like:
Create a Rectangle Element
Remove any styling that you don’t want
Give it a Unique Element ID in the identity inspector
Have your code use the Hype API to set the background-image; something like:
var currentImageSrc = images[0]; // however you want to set this
// get the element based on the ID from before
var imageContainerElement = hypeDocument.getElementById("myImageContainer");
// use the Hype API to set the background-image
hypeDocument.setElementProperty(imageContainerElement, 'background-image', currentImageSrc);
One tip is to use the UI to set the background fill style to an image, and then back to none. This will setup some properties to make sure the background scales instead of repeats.
You could also have code that writes an <img src="..."> tag to the element’s inner HTML as another technique.
It will load all images on the server before the basic page images and take about 3 minutes to load the page. even if the file is not on the page.hypersource folder, they will somehow load on the server, I guess because the url stands in the page, but as I have another page using an imageViewer where the outer files load real well I am trying to use a similar method, to understand what I mean, you can check the following url: http://www.aeroloop.com, the page web design or paintings (which have the imageViewer) are loading fast and the images in the imageViewer load as we open the viewer. But Publishing page is my current nightmare.
Is it possible to have a way calling the image like the imageViewer do without having the viewer with a unique element id, calling the image with the Unique Element ID on load?
var imageViewer = hypeDocument.getElementById(imageViewer’)
//get the current background image url
var currentImageURLSplit = imageViewer.style.backgroundImage.split("/");
//-- remove remove extraneous parts leaving image file name
var currentImage = currentImageURLSplit[ currentImageURLSplit.length - 1].split(".jpg")[0];
It depends on your needs, but there's nothing to say that you need to create all the elements within Hype; you instead just dynamically add multiple img elements to a single Hype element. A few other strategies:
If you multple-select Hype elements and give a unique element ID, it will ask if you want to add a numbered suffix to the end. Then you can more naturally look these up via a loop with an index.
You could also just assign a single class, and then use some property to sort them like their top position (I would get it via element.getBoundingClientRect().top)
You can also employ lazy load techniques yourself potentially. There are javascript methods to do so, but there's also a new standard:
Unfortunately it isn't supported by iOS/Safari, but perhaps will be soon.
You might also be able to write a little script that takes a look at a folder and generates JSON code you can paste in that contains all the image names/dimensions that way you don't have to hand code them.