Hot Scorn

Soliloquy is one of the more popular Wordpress slider plugins, and for good reason. The backend interface it provides has a healthy selection of options, and the paid add-ons neatly extend what the plugin offers.

My one major gripe, though, is its tendency to produce huge images, speaking in terms of file size, of course. Soliloquy bypasses Wordpress’ native image handling in favor of having one normal and one ’mobile’ version, meaning most users are given the largest version possible. Worst was since it wasn’t managed by Wordpress, compression plugins like WP SmushIt or EWWW couldn’t see it to be optimized. This would not do.

There are four hooks we will need to employ to make Soliloquy use Wordpress’ native image handling, which in version 4.4 and above includes srcset support for responsive images in the browser. I also use WP Retina 2X to extend this native behavior to support high pixel density displays, and no additional code was needed for Soliloquy to do this. You can see the code below or on gist.


// Make Soliloquy sliders use wp's native responsive images with wp retina
function my_theme_soliloquy_output($slider, $data) {
    return wp_make_content_images_responsive($slider);
}
add_filter('soliloquy_output', 'my_theme_soliloquy_output', 10, 2);

// wp_make_content_images_responsive needs the img tags to have a class with their id
function my_theme_soliloquy_image_slide_class($classes, $item, $i, $data, $mobile) {
    $classes[] = 'wp-image-' . $item['id'];
    return $classes;
}
add_filter('soliloquy_output_item_image_classes', 'my_theme_soliloquy_image_slide_class', 10, 5);

// Alter the image source that soliloquy uses so that responsive images will work
function my_theme_soliloquy_image_src($src, $id, $item, $data) {
    $base_url = trailingslashit( _wp_upload_dir_baseurl() );
    $image_meta = get_post_meta( $item['id'], '_wp_attachment_metadata', true );
    return $base_url . $image_meta['file'];
}
add_filter('soliloquy_image_src', 'my_theme_soliloquy_image_src', 10, 4);

// Hook to disable soliloquy's preloading which stops responsive images being used.
function my_theme_soliloquy_disable_preloading($disabled, $data) {
    return true;
}
add_filter('soliloquy_disable_preloading', 'my_theme_soliloquy_disable_preloading', 10, 2);

Full Disclosure: I’m still pretty new with Wordpress, and I know there are still some small undesireable behaviors I haven’t overriden on the backend (namely the large image versions are still being generated, just not used). Please let me know if you have ideas for improvements over what I’ve given above.

So I came across inklewriter several months ago while looking for tools to write interactive fiction, but I didn’t begin working with it in earnest until just a few months ago.

First off, there are several great tools out there for working on this kind of stuff, but inklewriter by game maker inkle has, in my mind, the best UI for getting an idea into a workable format without becoming encumbered by the interface itself. It has very well thought out responses to keyboard input, making it feel a lot more like a nice text editor than some of the other options out there; and its system of flags and conditionals is easy to learn and understand for the non-technical, while being reasonably robust.

There are a few extra things I’ve been wanting out of the interface lately, mostly with regards to reordering chapters and options, and seeing resources my story uses. One thing to understand before investing time in inklewriter (or my little side project for that matter) is that it is provided out of good will as a tool inkle made for their own needs, but they aren’t software developers full time and don’t often make changes or additions to the tool. I’m not too worried about inkle themselves evaporating anytime soon; 80 Days is making waves in both literary and game-making circles, and their Sorcery! series is also fantastic.

So in the end I decided to make my own little tool, both to give myself things I wanted, and to learn the inklewriter data structure for future game-making plans. After making what I wanted most, reorderable “pages” or sections, I realized that the data would be well suited to making some fun visualizations. Using the d3.js library, you can now see your inklewriter story as a “force graph", showing possible flows through the narrative. You can give it a try with one of inkle’s sample stories or your own here: http://inklehelper.hotscorn.com/.

Force Graph of an incomplete story from inklewriter

For now the only really useful feature is in sorting and editing pages, but I’ve had more fun out of the graph for sure. I plan to work on this tool a bit more down the road as I continue working on my own IF project, but in the meantime maybe other people wanna see their stories graphed. Hope so!

You might be wondering

Are you affiliated with inkle?

Nope, just a fan of their games and tool. The inkle name and example stories are all copyright them, inkle, and not me.

Are you gonna steal my story?

No way, everything is done locally, your story’s data isn’t sent to any servers.

Can I play with the code?

Totes, it’s on github, and it’s not minified at the link above if you just wanna poke around.

Will you add something?

Maybe if you ask me nice! And if I see any interest in this tool I’ll probably be more inclined to work on it.

Your code sucks.

Yeah, well, poop on your face, sir/madame. Fix it and do a pull request if it makes you so upset.

With love,

Scott

Hello world. My name is Scott Horn.

My header background image is courtesy of NASA’s fantastic Astronomy Picture of the Day.

The flame icon was made by Freepik from www.flaticon.com and is licensed under CC BY 3.0.

HotScorn.com
Hey There!
What is This?