Image file paths in HTML widget

For some reason, my image file paths inside my HTML widget is not working when I preview it in a browser. My HTML looks like this:

<div id="containerDiv1" class="containerDiv">
                <div id="contentContainer1" class="contentContainer" style="background-image: url(${resourcesFolderName}/image1.png); background-size: 100%">
                    <div id="unitNumber1" class="unitNumber">1</div>
                </div>
 </div>

It appears to be working fine in the Hype document – the image shows up on the canvas as expected. However, when I preview in a browser, I get nothing.

Anybody have an idea why this would be?

scrollGallery.hype.zip (2.5 MB)

turn off optimization for the images

2 Likes

Thank you!

This frustrates me when this happens. optimisation forces a jpg file to be used. I wish the Hype was more intelligent in dealing with this and take care of the extension for hard coded urls if optimised.

In mean time one thing
I just had a thought.

You may be able to employ multiple background images. Which act as layers on top of each other.
Not saying this is ideal and would work in all cases. But seems to in yours.

Remove the styles from you containers code. and add new css decelerations to the styles you already have.

like this

Removed styles.

<div id="containerDiv1" class="containerDiv">
            <div id="contentContainer1" class="contentContainer">
                <div id="unitNumber1" class="unitNumber">1</div>
            </div>
        </div>
        <div id="containerDiv2" class="containerDiv">
            <div id="contentContainer2" class="contentContainer">
                <div id="unitNumber2" class="unitNumber">2</div>
            </div>
        </div> 
        <div id="containerDiv3" class="containerDiv">
            <div id="contentContainer3" class="contentContainer" >
                <div id="unitNumber3" class="unitNumber">3</div>
            </div>
        </div> 
        <div id="containerDiv4" class="containerDiv">
            <div id="contentContainer4" class="contentContainer" >
                <div id="unitNumber4" class="unitNumber">4</div>
            </div>
        </div>
    
        </div>

new css

#contentContainer1 {
background-image: url(${resourcesFolderName}/image1.png),url(${resourcesFolderName}/image1.jpg);
background-size: 100%;
}

#contentContainer2 {
background-image: url(${resourcesFolderName}/image2.png),url(${resourcesFolderName}/image2.jpg); 
background-size: 100%;

}
#contentContainer2 {
background-image: url(${resourcesFolderName}/image3.png),url(${resourcesFolderName}/image3.jpg); 
background-size: 100%;

}
#contentContainer4 {
background-image: url(${resourcesFolderName}/image4.png),url(${resourcesFolderName}/image4.jpg); 
background-size: 100%;

}

scrollGallery_css_image_layers.hype.zip (2.5 MB)

1 Like

Thanks! This is very helpful. I really appreciate your taking the time to respond.