Webnode: Jak vložit 360° fotografii nebo obrázek

19.09.2024

Pokyny pro vložení 360° obrázku nebo fotografie do projektu Webnode prostřednictvím vnořeného responzivního okna.

1. Přejděte na stránku Momento360.com. Vytvořte si účet a nahrajte svůj soubor.

👉 Na této stránce si můžete vytvořit bezplatný účet a nahrát tam své obrázky a fotografie. 

2. V editoru Webnode otevřete stránku, na kterou chcete obrázek vložit.

Na konkrétním místě klikněte vlevo, aby se zobrazil malý černý znak plus, a vyberte možnost HTML. Vložte tam první část kódu.

<div class="container">
<iframe class="responsive-iframe" src="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
</iframe>
</div>

Místo XXX vložíme odkaz na soubor získaný v Momento360.

3. V aplikaci Momento360 klikněte na ikonu pro sdílení souboru a vyberte možnost SHARE OR EMBED A LINK.

👉 Pokud máte fotografie nahrané na jiném serveru, najděte možnost sdílení takových souborů.

6. Zkopírujte první část odkazu - za otazníkem. Tento odkaz vložte na stránku Webnode do kódu HTML místo XXXXXXXXXX.

7. Nyní klikněte na možnost Stránky v horní černé liště. Vyberte stránku, na které máte kód obrázku, otevřete nastavení SEO a zadejte kód CSS do pole hlavička HTML.

<style>
.container {
position: relative;
height: 600px; /* výška okna v pixelech. tuto hodnotu upratev podle potřeby */
overflow: hidden;
}
.responsive-iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>

Pokud máte projekt zdarma, můžete opět použít prvek obsahu HTML - kód CSS vložte nad kód HTML.

Pokud máte aktivní balíček Standard a vyšší, můžete kód vložit do globálního nastavení webu - bude se vztahovat na všechny budoucí 360stupňové obrázky na webu.

8. Zveřejněte změny.

Výsledek: