No worries! Remain in Visual Editor and insert “Custom HTML” block. It keeps adding tags in Code Editor view. Open WordPress and edit the page where you want to embed your Twine story.Ĭurrently, there is an issue with Gutenberg. Please note, that I’m using the latest (as of November 2019) WordPress version with Gutenberg editor. This is the page where we’ll include the Twine iframe. Now it’s time to play with the parent page. If(newHeight Edit the parent website in WordPress Var passage = document.getElementsByTagName("tw-passage") To be completely honest, I’ve put my code above in function and call it with a slight delay of 50ms like this: This is where we send message setHeight with the value of newHeight to the parent page. ![]() Feel free to adjust both magic numbers as you see fit. In the next step, we add 88 to make sure we include the width of the margin above and below the passage. I believe this is a reasonable minimum height for passage. Then we’re going to correct the height to be at least 500. Var newHeight = passage.offsetHeight //read its heightįirst, we find the HTML element “tw-passage” and read its offsetHeight. Var passage = document.getElementsByTagName("tw-passage") //get passage Footer code is executed every time a passage is changed. We’re going to paste some JavaScript in the footer passage. All passages with these tags will have their source text included at the top (or, for footer, the bottom) of every passage in the story, as if by an invisible (display:) macro call. You can do this by giving the passage the special tag header, or footer. It is often very useful to want to reuse a certain set of macro calls in every passage, or to reuse an opening block of text. Passages tagged as footer are automatically appended after each active passage: How can we get the parent page to scale automatically with each passage? Edit your Twine story Give it a try and let me know! Responsive IFRAME I can’t promise you this is going to work with a different story format. There are differences between Harlowe, Chapbook, Snowman and SugarCube. 1900 publishers, responsive players, images, apps, surveys, cards, GIFs, AMP, simple APIs crafted to perfection with coffee and love. One last thing, I’m using Twine story format: Harlowe 1.2.4. If you want to just embed your Twine story without any coding, try it out my WordPress plugin Embed Twine.īefore we begin, visit my About page and see how it works. Nevertheless, my first Twine embed tutorial provides basic pointers so I’d recommend checking it out before reading further. Its easy enough to make an iframes width span 100 of its container, but sizing its height is. And the height of the parent page remains the same instead of changing with each Twine passage. Using iframes in a responsive page can be frustrating. It works but not in Firefox (I had to implement fallback to a fixed height). ![]() I’ve described my previous approach in How to Embed Twine on Your WordPress Website.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |