Using ubiquity-slideshow for loco websites

David P let me know that some loco teams are interested in using Ubuntu’s installer slideshow on their websites. It could serve as a quick tour of Ubuntu in their language. Lots of people do lots of work to localise this stuff, so using that work in other places sounds fun. I would like to quickly show how to do that with the slideshow. Mostly this is using jQuery and the jQuery.Cycle plugin, so if you just want to make a cool presentation from scratch, that is the place to look.

So, let’s make this simple by using the released package that is shipped in Ubuntu. If you want to make changes or update the localization, let me know and I can write about that (though I hope the Readme in lp:ubiquity-slideshow-ubuntu does the trick).

You can install the installer slideshow for your version of Ubuntu. It is ubiquity-slideshow-ubuntu in the repositories. (Or -kubuntu if you are using Kubuntu, etc). The binary and source packages are also available at the usual place on Launchpad. The actual content we are interested in installs to /usr/share/ubiquity-slideshow. It is all regular HTML, so pretty easy to play with. First, copy the slides folder to somewhere in your home folder; we will work with that now.
Obligatory copyright notice: the slideshow is licensed Creative Commons Attribution-ShareAlike 3. A file with more details installs to /usr/share/doc/ubiquity-slideshow-ubuntu/copyright.

Now, open the slides folder. This may look overwhelming at first, but we will fix that. There are a whole bunch of folders named like loc.zh_TW and each one contains a version of the slideshow’s text for a specific locale (where everything after loc. is the locale code). In addition, each slide in the slideshow is its own file like photos.html and the slideshow itself is glued together by index.html, which has a list of all the slides in order. The slideshow can be told to run with a specific locale, where it loads the slides from that locale’s folder instead of the usual place.

You probably only need one locale, so let’s just deal with that now: open the folder for your locale. (If you don’t know your locale code, this table might help). Now move the contents to the slides folder, replacing the existing English slides. Now delete all the locale folders. (It’s quick to do that in Nautilus: press ctrl+s, enter loc.* for the pattern and hit OK, then delete the selection as usual). We don’t need directory.js, either, so delete that.

Now let’s test this to make sure everything is working. If you try opening index.html in your web browser, it will open that but the slideshow won’t show up. This is because your browser is being sensible and it is blocking the Javascript I mentioned from loading anything on your hard drive. You have a few options instead. Upload the slideshow to a website, or run a local http server. Of course, Python makes this easy. Head to the slides folder in a terminal and runpython -m SimpleHTTPServer…now, if you go to http://localhost:8000 in your web browser, the slideshow should appear.

Okay, great! Now what?
Let’s fix this up to make it look good on your website. First, open index.html in a text editor.

Remove the line that loads directory.js, which looks like &ltscript type=”text/javascript” src=”directory.js”&gt&lt/script&gt. We deleted that file earlier because it just describes the directory structure so the script knows what locales are available. Since we removed all the other locales, it serves no purpose (and actually slows down page loading since the browser will always request that file).

If your locale is a right-to-left language, add class=”rtl” to the <body> tag. This turns on the right-to-left rules in general.css.

About halfway down, you will see a list of items like<div><a href="welcome.html"></a></div>You may have noticed that the first and last slide are pretty specific to actually installing Ubuntu, so they aren’t really suited for what we are doing here. If you want, just remove the first and last ones from the list and they won’t be shown. You can also re-order these or add new slides in a similar way. If you’re wondering, the Javascript at the top of the file loads each of those listed slides using XHR.

Of course, linking someone to index.html as we have it now is a little boring. I encourage you to copy and paste the #slideshow element and stick it in another web page. It could make a nice decoration. As long as your page loads the slideshow’s css stylesheet, jquery, jquery.cycle and slideshow.js as in the <head> section, it will work out fine. (Though you may need to make some slight changes to general.css so it doesn’t interfere with the rest of your page. The likely offenders are at the top and there is a rule at line 202, affecting all IMG tags, that you may want to remove).

I should point out that this is (and always will be) intended to be used in one place: while installing Ubuntu. So, its design could change drastically. I would love to keep this going, but it’s mostly a lucky coincidence that it fits in websites today.
(It would be neat to see a loco-web-resources project on Launchpad, but I don’t think I’m the guy to spearhead that)

I hope this was helpful. If you have any questions, feel free to leave a comment and I will try to answer.