Dump PowerPoint, Create Presentations In WordPress

Presentations are really a series of posts, with a little bit of animation occasionally thrown in to make them more interesting.

Add the Flowtime presentation framework to WordPress and now you have a presentation engine that creates online presentations quickly and easily.

Time to say goodbye to PowerPoint?

The Flowtime logo
Presentations powered by the Flowtime presentation framework

It was the recent release of the Flowt plugin that first introduced me to Flowtime.js, the presentation framework from Marco Lago.

If you haven’t seen Flowtime before, and based on the Flowt plugin only having 59 downloads so far that seems more than likely, then go have a look at Marco’s demo so that you’ve got a good idea of what it does and how it does it.

Whilst I really like the idea of Flowtime, I’m not overly keen on how Flowt has gone about integrating it, especially the requirement to create a presentation in the single custom content type.

It seems to me that the simpler approach is to work with the WordPress content model, where a slide is a post (or custom equivalent) and let the content creation take place in familiar surroundings.

In essence, the solution needs to allow:

  • Content (“slides”) to be created and collated under a parent (“presentation”)
  • The slides need to be ordered into section and page (to get the “map” you can see in the bottom right corner in the demo)
  • Support the fragments and stacking functionality
  • Create a template that outputs an entire presentation along with the necessary Flowtime files

As per usual, you can follow along or jump straight to downloading and instructions on how to use the plugin.

Presentations and Slides: Creating the Content Model

The content model is very simple: we have presentations which contain slides.

To facilitate this, the solution creates two new custom post types, called, not surprisingly, presentation and slide.

A parent-child relationship exists between the two and this is handled simply by assigning the ID of a presentation to the post_parent field of the slide. It does mean, of course, that a slide can only exist in one presentation.

To allow this relationship to be managed, a custom metabox is added to the slide edit screen which provides a drop-down list of available presentations.

As the ID is being assigned to the post_parent field which is a standard post field, updates are handled automatically by the post saving process

Creating the Presentation Map with Slide Ordering

Screenshot of the slide listing page
Slides are easy to manage as they are orderd by presentation and slide order

A second metabox has also been added to the slide edit screen to allow a “slide order” to be set.

The Flowtime presentation map is organised a lot like a standard sitemap with sections running horizontally and pages running vertically.

In order to replicate this as simply as possible, the slide order uses a numbering system of section.page, so 1.2 is section 1 page 2, 5.4 is section 5, page 4.

As the slideorder is stored in the post_meta table, an additional function is needed that hooks into the save_post action to handle the slideorder. You’ll also notice that a nonce is used to ensure that this is a bona fide request.

Customizing the Slide Listing

To make managing slides easier, the solution also does quite a bit with the slide listing screen. By default, the slides are listed in chronological order which is not much use and only the title, status and date are displayed.

The solution adds the presentation name and the slide order to the listing and also orders the slides by slide order within presentation.

The ordering was a little tricky and needed a hook into the pre_get_posts action to set the meta_key ordering on the query and then an additional posts_orderby filter in order to add the post_parent.

The observant among you will notice that I’m cheating a little bit with the post_parent and ordering by the ID rather than alphabetically. Perhaps not the optimal solution but at least the slides are grouped within a presentation.

Supporting the Fragments and Stacking Functions

Whilst much of the presentation delivery, such as the navigation, just happens, there are various classes that need to be assigned to elements to initiate functionality such as fragments and stacking.

A fragment is a piece of content that is not initially shown when the slide is displayed but will be revealed when the user navigates forward (down arrow, swipe, mouse wheel). Fragments are displayed in linear order and can be left as is, or hidden or faded when the next fragment is displayed.

Stacking groups elements together and, in some situations allows for elements such as images to stacked on top of each other.

In order to support these functions, the solution introduces a new shortcode: ft. It also has 3 derivatives (ft2, ft3, ft4) to allow for nested shortcodes, for example:

{code}[ft]Some text [ft2] in the middle [/ft2] of some other text.[/ft]{/code}

The shortcode either wraps the content in a span or div element depending on the attributes.

Notice the use of do_shortcode( $content ) to perform the recursive call. This ensures that the ft2, ft3 and ft4 and any other shortcodes get processed.

In case you’re wondering, WordPress doesn’t currently allow for the nesting of the same shortcode; the following will not work:

{code}[ft]a [ft]nested[/ft] shortcode[/ft]{/code}

Outputting a Presentation

When a presentation is requested, the outputted HTML needs to contain all the slides for it to work correctly. The template to do this is located within the plugin itself and uses the default CSS from Marco’s distribution.

Before we look at the template itself, let’s take a quick look at how we get WordPress to use the template in the plugin rather than following the template hierarchy.

Big hat tip here to Mark Jaquith. Mark is not prolific on his blog but when he does write about WordPress, it is always something to take notice of and this post certainly changed how I override templates.

So, no template_redirect, it’s a template_include to pull that file in from the plugin templates folder.

The output itself is very much based on Marco’s demo especially as I thought it was highly likely that the output would be independent of the site theme, so need to worry about headers, footers, sidebars, etc.

The basic layout is:

{code}

<div class=”flowtime”> <!– presentation start –>

<div class=”ft-section”> <!– section start –>

<div class=”ft-page”> <!– page start –>

…content

</div> <!– page end –>

</div> <!– section end –>

</div> <!– presentation end –>

{/code}

  1. The template inserts the presentation body as the first page in the first section.
  2. It then grabs all the slides for the presentation, ordered by the slideorder.
  3. For each slide it checks the slideorder to see if a new section is required before outputting the slide itself. I added a check on the title which will not be output if it starts with a ! as sometimes you might not want the title to be shown on the slide but you want one in the admin area to help with identification.
  4. The use of the apply_filters call ensures that any shortcodes get processed.
  5. Each section and slide has additional data attributes added to it to aid Flowtime.

All pretty straight forward, so let’s get into creating a presentation.

Creating a Presentation

Screenshot of the Flowtime overview
Import the sample content file to create a cut-down version of the Flowtime demo

Firstly, you need to download and install the plugin.

Once activated, you should see two new entries in your WordPress admin menu for Presentations and Slides.

I’ve created a cut-down version Marco’s demo presentation for you to play around with. Use the WordPress Import tool and load the flowtime-test-content.xml file from the root folder of the plugin download. This should create a single presentation with 21 slides.

Ensure you have pretty permalinks on and navigate to http://[your domain]/presentations/flowtime

Presentation Basics

The best way to learn about Flowtime is to go through the presentation and then look at the individual slides to see how various aspects of Flowtime are implemented.

The ft Shortcode

The ft shortcode, and its derivatives, can be used in the following ways:

  • [ft]This defaults to a fragment[/ft]
  • [ft shy]This creates a fragment that will hide when the next fragment is shown[/ft]
  • [ft step]This creates a fragment that will fade when the next fragment is shown[/ft]
  • [ft stack]This creates a container for stacking[/ft] (see Stacking Images for more information)
  • [ft stack-center]This creates a container for stacking with all elements centered[/ft]

Gotchas and Workarounds

The combination of a quick implementation and Flowtime’s requirement to get classes onto the right elements means that there are some gotchas and workarounds required to get this fully working.

Fragments In Lists

Showing list items one at a time is a standard feature in presentations.

It’s easy to do with Flowtime but you’ll need to jump into the Text tab on your visual editor and add the class directly to the <li> element. Using the shortcode just wraps the list item content which hides the content but leaves the bullet visible.

Example:

{code}<li class=”ft-fragment”>This will hide the content and the bullet :)</li>{/code}

Flowtime Is Sensitive To Mark-up

Most issues with unexpected behavior are caused by the Visual Editor adding in extraneous HTML (although in one case it’s because it doesn’t add expected HTML).

Make sure that spaces are kept to a minimum so that you don’t get extra <p> or <br> elements added to your code.

One gotcha I’ve discovered is that when the final content item is wrapped in an ft shortcode, the <p> is not generated, even though it should be, resulting in the content not getting styled properly. To get around this, add a non-breaking space (&nbsp;) immediately after the closing shortcode.

Example:

{code}[ft]This will still get turned into a paragraph by WordPress[/ft]&nbsp;{/code}

Stacking Images

The mark-up required for stacking images is not possible to replicate simply by using a shortcode. To get the desired effect you need to add the appropriate classes directly to the image tag.

Fortunately, you can do this either by editing the <img> tag in the Text tab or by going clicking on the image in the Visual editor, then clicking on the Advanced options tab and entering the appropriate class in the Class field.

The following example (taken from the Text view of the editor) replicates Marco’s stacked images example:

Notice the stacked class has been added to the images and that ft-fragment has also been added to all but the first image.

To stack center images, use the stack-center option on the ft shortcode and a class of stacked-center on the img element.

Using Stack Center

To stack centrally requires two containers, an outer stack-center and an inner stacked-center. To achieve this use the following mark-up:

Just The Beginning

This is the tip of the iceberg when it comes to creating presentations with WordPress and Flowtime but hopefully you can see how relatively easy it is to get a good looking presentation.

There’s plenty, though, that could be improved upon. I haven’t added Parallax support because of the difficulty in adding the data attributes and it would be nice in the admin interface to be able to re-order slides by dragging and dropping and perhaps choose slide templates.

Then there’s all the additional animation effects that could be included.

I’m left thinking that proper integration is probably best done at the Visual editor level, adding a few buttons to the editor to allow the classes to be added directly those elements that generate HTML (such as lists) and shortcodes for those that don’t.

But that’s better left for another day. In the meantime, the Flowtime documentation will provide some valuable pointers for further customizations.

So, what do you think? Could you see yourself using WordPress and Flowtime to put together your next online presentration?