Accessing Resources in embedded html

Question

I have html, script functions, and css that presents a timed slide show with an audio file (voiceover).
I assume to add it to my page, I'd use embedded html element and copy it all into Settings | Code.
The JS includes an array of image names (and timings).

How do I set those image paths to images in resources?

How can I add the audio file and set the path to that?

Is there a way dynamically set image names or paths (in the embedded html) based on UTM values?

Hero · Answer

this is the code I'm trying to make work:

Milan Boisgard | Uncode School · Answer

1 + 2 : choose a CMS and store the img there. You could use src from the CMS after.What the use case are you trying to achieve?

Hero · Answer

Are you saying I can pull images from the CMS and uses those images in a script in the Embedded HTML component?

Use case: essentially a slide show with sync'd audio.
Image 1 shows.
User presses Play.
Audio plays and image 2 shows.
When the playhead hits a specified # of seconds, Image 2 shows.
and so on until all the end of audio and all images have been displayed.
The images need to be specific to the UTM.
So image1 is different for ID 5 than for ID 37.
Also, I want to support a variable number of images.
So, if UTM PlayerId = 1, maybe the slide show has 5 images.
But PlayerId = 2, it has 8 images.

Join the Webstudio community

Accessing Resources in embedded html