Ubuntu installer slideshow customization, with pictures!

I have escaped the perilous grasp of Perl, and I bring news:

If you make a localized Ubuntu ISO like the Italian CD, you can customize the installer slideshow, with translated screenshots and more!

How? Follow me!

First, you need to be running Ubuntu 12.10 with the latest version of the Ubuntu defaults builder — 0.35. I assume you already know about the defaults builder, since you are making a localized ISO. If you do not, start with this explanation about localized images. Don’t worry: the defaults builder is a great tool that makes this very easy!

The defaults builder template has been updated to include a “ubiquity-slideshow” folder. Let’s open a terminal and create a new defaults package to play around:

ubuntu-defaults-template ubuntuway-defaults

That will create a fresh defaults source package in a folder named “ubuntuway-defaults”. Open that, then open “ubiquity-slideshow”.

As you might have guessed, you get to customize the slides! Open “slides.”

We put slides in this folder, in almost exactly the way they are organized with ubiquity-slideshow itself. Now would be a good time to install ubiquity-slideshow-ubuntu so you can use the base files as reference. Make sure you have at least version 61, because things have changed since Ubuntu 12.04.

With the defaults package, you get to extend /usr/share/ubiquity-slideshow/slides/l10n.

Back in our defaults package, let’s start by adding some locales. We are going to add translated text and screenshots for en@piglatin. To start, we create a new folder: “en@piglatin.”

The way this works is the slideshow will search the extra locale folder for a language and, if a particular file is available for that language, it will use it instead of the default. For example, we could replace welcome.jpg for the “it” locale, so when someone installs in Italian that picture will appear instead of the original welcome.jpg.

Let’s replace welcome.jpg for the en@piglatin locale! To replace a file, the easiest thing is to copy where it is in /usr/share/ubiquity-slideshow/slides. You can see there’s a screenshots folder there, with a bunch of screenshots. So, in our own “en@piglatin” folder, we’ll add a screenshots folder. Of course, what you would normally do is look at the original welcome.jpg and create something similar that works for your locale and your disk image, making sure to keep the same dimensions. I’m going to cheat a little.

One problem with the slideshow is that the screenshots are always in English. Now, you can include translated screenshots. As with anything else here, these go on top of the other files. An Ubuntu install in your language will show the translated screenshots, while an install in English (or any other language) will show the original English screenshots. There isn’t an actual Pig Latin Ubuntu for some reason, so I will translate a screenshot into French for an example.

Some rules of thumb for taking screenshots, if you don’t want to (or it isn’t practical to) do the same thing as the original:

• Do something practical, like search for a photo or read a web page: don’t open every menu in an application to demonstrate its features.
• You probably don’t want to have all your own stuff there for the world to see, but if you have some time try to invent a person. It’s just a little more fun than showing a blank photo manager with “Guest” at the top right of the screen.
• Use the defaults! Create a fresh user account and make sure you don’t touch the font size or the background picture.
• Make it look good, and if following the above rules makes it bad then please disregard them :)

I went ahead and created a translated screenshot to replace usc.jpg. I took a screenshot of the entire screen, then I opened it in GIMP and scaled to 60% with interpolation set to “Sinc (Lanczos3)”. (You are welcome to choose whatever interpolation works well for the job at hand, of course). After scaling, I used the crop tool, setting a fixed size of 448×304 pixels and leaving a 10×10 border around the application’s main window. (Just line up the box from the crop tool with the top left of the window, then add “-10” to each of the Position number fields).

I saved the picture as usc.jpg and added it to the screenshots folder, right beside welcome.jpg. You may add screenshots for as many languages as you want, as long as they fit on the CD, but please keep in mind there is a high maintenance cost.

Now we can try this thing! Open a terminal: we’re going to build a defaults package and see what happens.

cd ubuntuway-defaults
debuild

A package file should appear in the parent directory, called ubuntuway-defaults_0.1_all.deb. Just double click the file and choose Install. To see this in action, you also need to install ubiquity-slideshow-ubuntu and download the slideshow testing tool (Slideshow.py). Sorry, just a little more terminal stuff ahead.

Open a terminal pointed to wherever you downloaded Slideshow.py.

chmod +x Slideshow.py 
./Slideshow.py --path=/usr/share/ubiquity-slideshow --locale='en@piglatin'

Now, about that text…

We’re going to add some information that we know will be useful for people who receive this disk image, and we will translate some stuff into Pig Latin as an example. The files we need to replace are called welcome.html and gethelp.html, and they’re html files, so if you know HTML it will be a piece of cake.

Again, the easiest thing is to find the files we need from the base ubiquity-slideshow and copy them. In this case, we’ll copy and paste the files and then edit them with our changes. But before you do that, remember that the slideshow is very likely to be available in your language. Before you copy slides from /usr/share/ubiquity-slideshow/slides, look for them under your locale at /usr/share/ubiquity-slideshow/slides/l10n.

With this example, there is (of course) no Pig Latin translation to base on, so we will just add some new stuff on top of the English slideshow. In theory, we could actually translate all the slides to Pig Latin here, but that would make a very poor example because it shouldn’t be necessary: the best practice for this part is to do translations in the ubiquity-slideshow project, and then just tweak those translations in the defaults package.

Open welcome.html in your favourite text editor, look for the content, and do what you want. Be careful, though: a syntax error can cause all sorts of problems.

To see the changes we need to build the package again.

cd ubuntuway-defaults
debuild
sudo dpkg -i ../ubuntuway-defaults_0.1_all.deb
./Slideshow.py --path=/usr/share/ubiquity-slideshow --locale='en@piglatin'

Now that we have the defaults package figured out, we can go one step further: build a disk image!

mkdir image-builder-tmp
cd image-builder-tmp
ubuntu-defaults-image --package=../ubuntuway-defaults_0.1_all.deb

This will take a while. When it’s done, it will spit out a file called livecd.ubuntu.iso. Just load that in VirtualBox or something of the sort. When you install, it should look exactly like the preview. (Assuming you use a language that can be selected in Ubiquity, and that language has been selected).

That should get you started. I hope you like it! Go ahead and download the ubuntuway-defaults source package to explore, and please share how it goes.