Greetings.
I have hosted several images in https://cloudinary.com/ and I generate the iframes with https://www.iframe-generator.com/. I copy and paste the result in the HTML extensions window and I can open them well but I can’t make the image fit into the iframe! Note: the iframe responds well to the size parameters by % but I need the image always to fit into the iframe, can someone explain me how I can do that?
Are you specyfing the size using the iframe attributes (<iframe width="X" height="Y"...) or an inline CSS style (<iframe style="width: X; height:Y" ...)? You have to use the latter, because Shapespark viewer provides default responsive width and height for iframes using CSS, and the defaults can be overriden only with an inline CSS style. Furthermore, CSS gives you much more flexibility, as it allows you to use viewport-relative width/height units: vw and vh.
If you paste your HTML iframe snippet here, I’ll try to give you a more precise advice on how to improve the image sizing.
1 Like
thanks @wojtek,
this is the hosting address of a sample image
and this is the iframe generated with https://www.iframe-generator.com/
(without ><)
iframe src=“https://res.cloudinary.com/arquitecto/image/upload/v1598376220/sample.jpg” style=“border:0px #ffffff none;” name=“myiFrame” scrolling=“no” frameborder=“1” marginheight=“0px” marginwidth=“0px” height=“400px” width=“600px” allowfullscreen></iframe
This is the result of the tour you can see here
https://all360.shapespark.com/shapespark-example-room-christmas/
This is how it looks on PC
This is how it looks in Android
portrait
landscape
The iframe answer is correct but the image inside keeps its size, how can I make the image fit into the iframe and not have to use the scroll bars
Regards,
Jorge
@jorgearq, an easier way to embed an image is to use the <img> HTML element instead of <iframe>. In Shapespark viewer HTML label has a default style for <img> elements which makes their width & height adjust automatically to the viewport size (the image width takes 75% of the viewport width, and the image height is scaled to maintain the image aspect ratio).
Please use:
<img src=“https://res.cloudinary.com/arquitecto/image/upload/v1598376220/sample.jpg”>
instead of the <iframe ....></iframe> .
3 Likes
Yes, there is a <video> HTML element, however it requires you to host the video on your own.
If you want to place a YouTube video, use <iframe> without any width and height attributes. Shapespark viewer provides default responsive size also for <iframe> elements embedded inside an HTML label, and assumes <iframe>s are primarly used for video embeds: by default the width of <iframe> is adjusted to 75% of the viewport width, and height is scaled to maintain 16:9 aspect ratio (typical for videos).
1 Like
Thanks. I got it about video html requires host it in a private server
I’m having a problem with displaying multipage pdf files on mobile. I’m hosting them on our own website and they work fine on desktop. However when I change to mobile it only displays the very first page of the file.
The scene is here, and file trigger is set on the yellow “Esite” icon: https://taikalyhty.shapespark.com/aitosoft/
It’s related to how a particular browser implements PDF viewing. Desktop browsers have built-in PDF viewers, but it is not the case for mobile browsers. For example, Chrome and Firefox for Android open PDF files in an external Android application. If you want consistent behavior on all platforms I think you’d have to use some embeddable online PDF viewer.
Hello @wojtek, I’ve tried to use img as you indicate however I don’t have any results, the image doesn’t show! I must be writing something wrong?
<img src=“https://res.cloudinary.com/arquitecto/image/upload/v1604119839/Mash%20/SHAMAS_Foyer_1860X1000_pix_-02_ipiaqe.png”>
I had the same problem but the error was in the image name characters.
Leclerc - présentation presse.png
Not supported é
I don’t see such an error in your case, would a simpler name solve the problem or did the problem cause the folder name (Mash%20) with % ?
Best regards!
1 Like
@jorge, the double quote characters in your snippet are incorrect. The editor you entered the quotes in must have replaced the simple symmetric double quote characters " used in HTML with asymmetric characters used in writing “ and ”.
Please copy the symmetric double quote character from this post and paste it into the HTML label content, replacing the asymmetric characters.
3 Likes