Wordpress – 106 drop in

Saddling Up

I’ve signed on as a hand to ride the Western 106 trail. Seems like it hard to quit DS106. Although I’ve been on this trail afore I’ve never been as far west. I ain’t much of a cowhand. I am more of a blanket stiff, a bit of a moss-back when it comes to the actual story tellin. I guess I’ll have t’ use the skill I have, cooking, giffin and the like and try an learn me enough stuff to ride along.

To fit into the outfit I’ll have to make some changes around here. I’ve been ds106ing for a while so I’ve got most of the supplies I need for the Blog Riding Camp or I’ve decided I don’t need ’em.

I did decide to change my theme, now I ain’t much of a dude ¹ although I’ve a bit of a handle on the tools to spruce up a site. I just decided to go with the new TwentySixteen theme, the default for new WordPress blogs.

Unfortunately for me the theme does some fancypants stuff with different sizes. As I’d uploaded a gif it was resampled to various sizes and lost its animation.

The easiest way to fix this was to replace the different sizes created with animated gifs with the same name via FTP. That I’ve done.

1. Dude – A fancy-dressing, would-be cowboy. (Derived from the Scottish word, “dud,” meaning “clothes.”) according to the Free Cowboy Dictionary

GifMovie a Plugin

I am much more excited about this than it warrants.

Hopefully just above this text you will see a canvas still image with a play button. Clicking on that should load a gif and an audio loop.

I’ve played with this sort of thing before but this is a bit more serious. A WordPress plugin!

There are a few plugins fro freezing a gif until clicked, the purpose of these is usually to save bandwidth, my plugin certainly does not. What is does in alows you to add a shortcode to a blog post:

[gifmovie gif="gifurl" mp3="mp3url"]

Where gifurl and mp3urls are proper urls.

So the one on this page looks like:

[gifmovie gif="http://johnjohnston.info/106/wp-content/uploads/2013/09/beautifulface-360.gif" mp3="http://johnjohnston.info/106/wp-content/uploads/2015/08/210569__oceanictrancer__119-bpm-house-loop.mp3"]

When the page loads this turns into a img tag with the gif with a data-mp3 attribute equal to the MP3. Some javascript then, hides the gif and creates a canvas element showing a frame. It adds code to handle clicks. These click hide the canvas, show the gif and play the sound.

I’ve been using the plugin for a few prisoner106 posts so am going to count this as a prisoner106 post. It seem to have worked with out any problem. I’d consider it in Beta.

If you are interested in trying out the plugin leave me a comment or send me a DM.

Audio Credits: Freesound.org – “119 bpm house loop” by oceanictrancer licensed under the Creative Commons 0 License.

A short excursion into code

A few posts/couple of weeks ago I installed the oEmbed HTML5 audio plugin here. This allows me to upload mp3s and other audio files, the plugin takes care of presenting the audio using the html5 audio tag with a flash fallback for browsers that do not support the type of audio: This plugin converts URLs to audio files (MP3, OGG, WAV) into HTML5 audio with Flash-based player backup
This seemed to do the trick. This morning I noticed that none of my audio was showing in FireFox. I right clicked on the space where I expected to see the player and saw the the Flash file was not loaded.

Looking at the source it seems that it is using a swf file belonging to google:
http://www.google.com/reader/ui/3523697345-audio-player.swf

and that is Error 400 Not found.

Using Cyberduck I had a look at the plugin’s code. Part of this check to see if the file is an MP3 and the browser FireFox. firefox does not support playing of MP3 via the audio tag so the plugin uses the google Flash file, which is of course missing.
$embed = sprintf( '<embed type="application/x-shockwave-flash" flashvars="audioUrl=%1$s" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>', esc_attr($matches[0]) );
On my ‘real’ blog I usually embed audio using dewplayer so I decided to edit the plugin to use that.

I uploaded the dewplayer.swf file to the top level of my site and changed the code, I need to change the name of the var from audioUrl to mp3 and the url of the google swf to /dewplayer.swf.

If you are viewing any of my audio posts in fireFox you should hopefully be less puzzled.

Update: the plugin has been updated: WordPress › oEmbed HTML5 audio « WordPress Plugins

1.1

Google removed their MP3 Flash player from their website, so we include it in the plugin itself now (it’s still the same player)

Camp Note Saturday 2 June

tihs is just a quick note of a couple of things I’ve been doing over the last day or two at camp. Apart from getting killed in the wide game. I’ve added a nice wee plugin to this blog. The google fonts plugin allows you to add a google font. The control panel lets you add some custom CSS to use the font if you do not want to apply it to say all titles or all headings. I’ve just added a class, campletter for the ‘Over the Rainbow’ font. I also added a drop shadow and a rotate to the CSS.

.campletter {font-family:'Over the Rainbow',san-serif;font-size:18px;background:#ee9; transform: rotate(10deg); -ms-transform: rotate(11deg); /* IE 9 */ -webkit-transform: rotate(10deg); /* Safari and Chrome */ -o-transform: rotate(10deg); /* Opera */ -moz-transform: rotate(10deg); /* Firefox */ -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; Padding:6px; Margin:6px; }
It is pretty easy to get the CSS code for this sort of thing, just google it. The google fonts pluggin settings page has a section for custom CSS SO I didn’t even have to edit the theme.

The other thing I’ve been playing with is the iPhone friendly daily create page I made. Now shows the creations for the last 5 daily creates:TDC Today. I am finding this quite useful, this afternoon I was. Standing right beside this destroyed hut when I checked TDC. The code is now a real mess of php and JavaScript, it seems to work here. Let me know if you try it and it doesn’t do what it says on the tin.