How Ti Make a Twine File Upload to a Website

From the very start, I wanted the "About me" page on my WordPress website romanluks.eu to be interactive.

At first, I experimented with Dart, a programming language developed by Google that transcompiles into JavaScript. I killed the project when I realized I was making a game instead of an "About me" page.

A bit later, I discovered Twine, an open source tool for creating interactive stories. Information technology reminded me of the gamebooks I loved as a child. It's so easy to create interconnected pieces of text in Twine, and information technology's platonic for the interview-like format I was aiming for. Considering Twine publishes straight to HTML, you tin can practise a lot of interesting things with it—including creating interactive fiction and gamble games or publishing stories on a blog or website.

Early struggles

I created my "About me" page in Twine and tried to paste it into my WordPress folio.

"No, tin can do," said WordPress and Twine.

Y'all see, a Twine story exported from Twine is just a webpage (i.east., a file in HTML format). However, information technology not only includes HTML simply JavaScript code, too. And somehow it doesn't work when you simply try to re-create-paste the contents. I tried copy-pasting just the body of the Twine story page without success.

I thought, "I estimate I demand to add that JavaScript code separately," and I tried custom fields.

Nope.

I took a break from my investigation. I just uploaded my "Nearly me" Twine story via FTP and linked to information technology from my website'due south card. People could visit information technology and interact with the story, nonetheless, at that place was no menu, and it didn't feel like a part of my website. I had made a trap for myself. Information technology made me realize I really really wanted my "About me" included directly on my website.

DIY embed

I took a stab at the problem and came up with this solution.

Information technology worked. It wasn't perfect, just it worked.

But information technology wasn't perfect. Is in that location a better manner? There is spring to be a better mode…

Information technology toll me a couple of pulled hairs, but I managed to get a responsive iframe and autoscroll.

It was way better. I was proud of myself and shared it on Reddit.

The road to Embed Twine

All of a sudden, an idea! What if, instead of following my tutorial, people could employ a WordPress plugin?

They would only have to give the plugin a Twine story, and information technology would accept care of the rest. Hassle-complimentary. No demand to copy-paste whatever JavaScript code.

Wouldn't that exist glorious?!?

I had no thought how WordPress plugins work. I just knew they are written in PHP. A while back, I had part-time piece of work as a PHP programmer, and I remembered the basics.

Containers and WordPress

I mentioned my thought to a friend, and he suggested I could use containers as my WordPress evolution environs.

In the past, I'd e'er used XAMPP, but I wanted to endeavour containers for a while.

No problem, I thought! I'll larn containers while I learn how to make a WordPress plugin and revive my PHP skills. That should be sufficiently stimulating.

And it was.

I tin't think how many times I stopped, removed, and rebuilt my containers. I had to use the command line. And the file permissions are painful.

Oh male child! It was like playing a game that y'all relish playing even though it makes you fairly angry. It was challenging but rewarding.

I institute out that it's very easy to create a simple WordPress plugin:

• Write the source lawmaking
• Salve information technology in the WP plugin directory
• Test information technology
• Repeat

Containers brand it like shooting fish in a barrel to use a specific environment and are easy to clean up when you screw upwardly and demand to start over.

Using Git saved me from accidentally wiping out my entire codebase. I used Sourcetree as my Git user interface. Initially, I wrote my lawmaking in Notepad++, but when I divided my code into multiple files, I switched to Atom. It's such a cool editor for geeks. Using it feels like the lawmaking writes itself.

Suspension

So what practise nosotros know so far?

• I wanted an interactive "Almost me" folio
• I created an "Near me" story in Twine
• Twine exports webpages (every bit HTML files with JavaScript included)
• WP plugins are easy to brand
• Containers are awesome

Embed Twine is built-in

I wanted an easy way to embed Twine stories into WordPress. And so, I used the power of software development, fooled around with containers, wrote a scrap of PHP code, and published the result as a WordPress plugin called Embed Twine.

Install the plugin

1. Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress Plugins screen.
2. Actuate the plugin through the Plugins screen in WordPress.

Use the plugin

After you've installed the Embed Twine plugin and created a Twine two story, embed it in your WordPress site:

1. Consign your Twine ii story into an HTML file.
2. Upload it via the plugin's interface.
3. Insert the shortcode into the page or post.
4. Enjoy your embedded story.

The plugin also provides autoscroll functionality to brand information technology like shooting fish in a barrel for users to navigate through your stories.

Configure the plugin

The plugin is configurable via shortcode parameters. To employ the shortcode, simply put [embed_twine] into your post.

You lot can use boosted parameters in the format [embed_twine story="Story" aheight=112 autoscroll=true ascroll=100] as follows:

• story: Specify the story name (the filename without an extension).
  • If the story parameter is omitted, it defaults to "Story." This means at that place is no need to use this parameter if your Twine filename is Story.html.
  • If you upload a Twine story called MyFooBar.html, apply the shortcode: [embed_twine story="MyFooBar"].
• aheight: Use this parameter to suit the iframe'southward height. You might need to tweak aheight to get rid of an iframe scrollbar. The default value is 112; this value is added to the iframe peak and used to prepare the iframe's style.meridian.
• autoscroll: Autoscroll is enabled by default. You tin turn it off with shortcode parameter [embed_twine autoscroll=false].
• ascroll: Apply this to suit the default position for autoscroll. The default value is 100; this value is subtracted from the iframe'southward summit position and fed into JavaScript method window.scrollTo().

Known bugs

Currently, Twine passages that include images might report their height incorrectly, and the scrollbar might prove upward for these passages. Tweak the shortcode parameter aheight to get rid of them.

The script

          
            
1              <?php              
              two              
              three              /**
                four       * Plugin Name: Embed Twine
                5       * Clarification: Insert Twine stories into WordPress
                6       * Version: 0.0.half dozen
                7       * Author: Roman Luks
                8       * Author URI: https://romanluks.eu/
                9       * License: GPLv2 or afterwards
                10      */              
              11              
              12              require_once              (              'include/embed-twine-load-file.php'              )              ;              
              13              require_once              (              'include/embed-twine-parent-page.php'              )              ;              
              14              require_once              (              'include/embed-twine-process-story.php'              )              ;              
              xv              
              16              // Add plugin to WP bill of fare              
              17              function              embed_twine_customplugin_menu(              )              {              
              18              
              19          add_menu_page(              "Embed Twine"              ,              "Embed Twine"              ,              "manage_options"              ,              __FILE__              ,              "embed_twine_uploadfile"              )              ;              
              20              }              
              21              
              22      add_action(              "admin_menu"              ,              "embed_twine_customplugin_menu"              )              ;              
              23              
              24              function              embed_twine_uploadfile(              )              {              
              25              include              "include/embed-twine-upload-file.php"              ;              
              26              }              
              27              
              28              // Add shortcode              
              29              function              embed_twine_shortcodes_init(              )              
              30              {              
              31              function              embed_twine_shortcode(              $atts              =              [              ]              ,              $content              =              aught              )              
              32              {              
              33              // Attributes              
              34              $atts              =              shortcode_atts(              
              35              assortment              (              
              36              'story'              =>              'Story'              ,              
              37              'aheight'              =>              112              ,              //conform for style.tiptop (thirty) and margins of tw-story (2x41)              
              38              'autoscroll'              =>              true              ,              //autoscroll enabled by default              
              39              'ascroll'              =>              100              ,              //arrange for autoscroll              
              forty              )              ,              
              41              $atts              ,              
              42              'embed_twine'              
              43              )              ;              
              44              
              45              $content              =              embed_twine_buildParentPage(              $atts              [              'story'              ]              ,              $atts              [              'aheight'              ]              ,              $atts              [              'autoscroll'              ]              ,              $atts              [              'ascroll'              ]              )              ;              
              46              
              47              return              $content              ;              
              48              }              
              49          add_shortcode(              'embed_twine'              ,              'embed_twine_shortcode'              )              ;              
              50              }              
              51      add_action(              'init'              ,              'embed_twine_shortcodes_init'              )              ;            
          
        

---

This commodity is adapted from Roman Luks' blog and Embed Twine page on WordPress plugins.

This work is licensed nether a Creative Commons Attribution-Share Alike iv.0 International License.

johnsoncous1959.blogspot.com

Source: https://opensource.com/article/20/2/embed-twine-wordpress

Share this post