Create twine and export it to html file.
Publish to File.
Upload html file on the server (eg. FTP with Filezilla).
Create a new page in your wordpress where you want to embed the twine.
Insert following code (be sure to switch to Text tab)
<div><iframe id="my_iframe" width="100%" height="400px" src="https://www.romanluks.eu/about/index.html" scrolling="no"</iframe></div>
Replace url https://www.romanluks.eu/about/index.html with path to your twine.
Now you have twine embedded on your website, however it has the wrong size. Oh noes! What now?!
Lets add some more code 🙂
<script type="text/javascript"> //<![CDATA[ var currentPassage = null; function CheckHeight() { if (currentPassage != document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0]) { document.getElementById("my_iframe").style.height = "400px"; document.getElementById("my_iframe").style.height = document.getElementById("my_iframe").contentWindow.document.body.scrollHeight + 'px'; currentPassage = document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0]; } setTimeout(CheckHeight, 500); } //]]> </script> <div><iframe id="my_iframe" width="100%" height="400px" src="https://www.romanluks.eu/about/index.html" scrolling="no" onload="CheckHeight()"></iframe></div>
Now the iframe changes height according to the current twine passage.
But, it does not work in Firefox. In Firefox you get a blank page. Yeah, kids. Always test your website in all browsers.
In Firefox add fallback to fixed resolution and enable scrolling.
Like this:
if(document.getElementById("my_iframe").contentWindow.document.body.scrollHeight == 0){ document.getElementById("my_iframe").style.height = "1300px"; document.getElementById("my_iframe").scrolling = "yes";}
WAIT! This tutorial is really complicated!!!
Allright – just go here. It is simple way how to get your Twine online for free.
Misc
Does your twine contain external links?
eg. to google.com/wikipedia articles/any other website
Add attribute target and set it to _blank. This forces browsers to open the link in a new tab instead of opening it right in the twine iframe window.
<a href=”https://www.example.com/” target=”_blank”>Link</a>
Are you making changes to your twine and uploading new version on server?
User browser private mode/incognito mode. Or clear browser cache. Iframes are usually cached in browsers so you would only see old version of your twine.
Leave a Reply