Using Kimili Flash Embed for WordPress

01 Aug 05

Update – June 4, 2006
This article refers to a out of date version of the plugin. For the latest, check out the Kimili Flash Embed home.

In order to consolidate all the technical information about the Kimili Flash Embed for WordPress plugin in its various versions, this page will serve as the “owner’s manual”. When you have questions about the plugin, you will likely find the answer here.

Installation

Installing the plugin is as easy as dropping the kml_flashembed.php file into your wp-content/plugins directory and activating the plugin.

Using the plugin in an article is simple. You would just drop in a tag as follows:

<kml_flashembed movie="filename.swf"
                height="150"
                width="300" ></kml_flashembed>

Attributes

It is important to double quote your attributes in this tag. Single quoting may trip things up a bit.

The available attributes for the <kml_flashembed /> tag are:

movie (required)
The path and file name of the flash movie you want to display.

height (required)
The height of the flash movie. You can specify in pixels using just a number or percentage.

width (required)
The widthof the flash movie. You can specify in pixels using just a number or percentage.

align
(l, t, r, b) – Left, Right, Top, and Bottom align the movie along the corresponding edge of the browser window and crop the remaining three sides as needed. Defaults to centered.

alttext
The text or HTML you want to display if the required flash player is not found. If you want to use HTML inside this attribute, there are some important differences to remember, as we’re inside of another tag. Specifically:

Use curly brackets: {p} for tags instead of normal braces: <p>
Use single quotes for HTML tag attributes, as your kml_flashembed attributes should be double quoted.
Example Syntax: alttext="{img src='noflash.jpg' alt='You need flash' /}"

bgcolor
(#RRGGBB, hexadecimal RGB value) – Specifies the background color of the Flash movie.

fvars
Pass variables (name/value pairs) into your movie with this attribute. You can pass in as few or as many variables as you want, and they can be hard coded or PHP variables. Syntax is as follows and the spaces are optional:

fvars=" name = value ; name = value "

fversion
You can specify what version of the flash player is required to play your movie. Defaults to 6.

id
You can give your movie a unique id on the page for scripting purposes.

loop
(true, false) – Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.

menu

(true) displays the full menu, allowing the user a variety of options to enhance or control playback.
(false) displays a menu that contains only the Settings option and the About Flash option.

noscript
Text or html content you would like to display to users browsing on a non-javascript browser or with javascript disabled.

play
(true, false) – Specifies whether the movie begins playing immediately on loading in the browser. The default is true.

quality
(low, high, autolow, autohigh, best ) – Specifies the playback quality of the Flash movie.

salign
(l, t, r, b, tl, tr, bl, br) – Specifies which edge or corner the movie is aligned to in the browser window while and cropping the remaining sides as needed.

scale
(showall, noborder, exactfit) – Dictates how the movie fills in the specified target area.

target
This is the ID of an element on your page that you want your flash movie to display within.

wmode
(window, opaque, transparent) – Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

You can find out more about Flash player attributes here

Standards and WordPress?

There was one thing that I found WordPress (both 1.2.2 and 1.5) does which I can’t figure out the reasoning behind. It’s not a critical thing, but it opens up the possibility to fail XHTML validation with this plug in. Consider the following:

<pre><code><script language="JavaScript"> <![CDATA[

// Scripts go here ]]> </script></code></pre>

The Kimili Flash Embed plugin renders code similar to this when you use it in an article post. The <![CDATA[ ]]> tag is there to tell XML parsers to ignore anything that is contained within it. Without it, certain Javascript code might trip up the XML parsing.

The problem is once the Javascript is rendered by the plugin, WordPress then takes the code and changes it like this:

<pre><code><script language="JavaScript"> <![CDATA[

// Scripts go here ]]> </script></code></pre>

Did you find the difference? The ]]> tag, which closes the CDATA block has been changed to ]]>. This effectively kills the CDATA block by neutering its closing tag, intruducing a passel of validation errors. This problem cannot be rectified via WP’s plugin architecture, as it makes this change to any post content after the plugins have run.

Does anybody have any idea why WordPress does this?

The Quick Fix

In my frustration, I’ve stopped the plugin from rendering the <![CDATA[ ]]> tag altogether. Without it, your page may validate, but then again, it may not. It will definitely fail if you do either of the following:

Use HTML in the alttext attribute
Use any ampersands or various other characters instead of their character entities in any of the attributes.

The Hack

If you want to change this behaivor and add back the <![CDATA[ ]]> tag so that everything should validate nicely again, you’ll need to hack a few files. Pretty simple stuff, just commenting some things out and uncommenting others. The following assumes that you haven’t hacked your WP install.

In the kml_flashembed.php file, find line 254 and uncomment it, like this:

Now do the same for line 277, changing it to this:

If you’re using WP 1.2.x, open up /wp-includes/template-functions-post.php and comment out lines 61, 94 and 173, so they all read:

<pre>// $content = str_replace(']]>', ']]>', $content);</pre>

If you’re using WP 1.5, open up /wp-includes/template-functions-post.php and comment out line 63, so it reads:

<pre>// $output = str_replace(']]>', ']]>', $output);</pre>

Also, open up /wp-includes/feed-functions.php and comment out line 44, so it also reads:

<pre>// $output = str_replace(']]>', ']]>', $output);</pre>

Bug Reports

If you have gone through the information here and are still having troubles with the plugin, feel free to contact me and I will do my best to look into it.

Keep the feedback coming in. It is your criticism that makes this better with each release. Any feedback that results in updates to the plugin will be included here.

Comments

Comments closed.