Join the Webstudio community

Updated 2 months ago

Accessing Resources in embedded html

At a glance

The community member has a timed slideshow with an audio file (voiceover) and is trying to integrate it into their webpage. They have HTML, script functions, and CSS, and plan to use the embedded HTML element to add the code. The main questions are:

1. How to set the image paths to images in resources?

2. How to add the audio file and set the path to it?

3. Is there a way to dynamically set image names or paths based on UTM values?

The comments suggest using a CMS to store the images and using the source from the CMS. The community member is trying to achieve a use case of a slideshow with synchronized audio, where the images and number of images can vary based on UTM values.

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

  1. How do I set those image paths to images in resources?
  1. How can I add the audio file and set the path to that?
  1. Is there a way dynamically set image names or paths (in the embedded html) based on UTM values?
H
M
3 comments
this is the code I'm trying to make work:
1 + 2 : choose a CMS and store the img there. You could use src from the CMS after.

  1. What the use case are you trying to achieve?
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.
Add a reply
Sign up and join the conversation on Discord