erdajo
(Eric)
June 10, 2018, 8:56am
1
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)
h_classen
(Hans-Gerd Claßen)
June 10, 2018, 9:35am
2
turn off optimization for the images
2 Likes
MarkHunte
(Mark Hunte)
June 10, 2018, 10:15am
4
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
erdajo
(Eric)
June 10, 2018, 11:03am
5
Thanks! This is very helpful. I really appreciate your taking the time to respond.