Koru automatically creates snapshot buttons for you and you can style them up with CSS, which covers most of the possible usage cases, but sometimes you may need a very different way to control snapshots and the default buttons may not work at all. What’s then?
When Koru exports a scene, it wraps it up in some HTML called “template”. Template decides whether the scene will be fullscreen or not, template customizes snapshot buttons and can do some other scene control. Finally, template may simply add your logotype to the caption of the page. Any time you need a custom HTML output in Koru, you make a template.
You can read more about templates here, but best of all you don’t really need to start from scratch. Koru comes with a couple of pre-defined templates that you can use to kick-start your own. Let’s clone one of the existing ones now.
Start Koru and click its File menu. In the drop-down list select Open Templates Library item. You will see a folder on your disk where Koru stores its templates. Find a folder called snapshots and make a clone of it. On Mac you need to right-click it and select Duplicate, on Windows you can simply copy and paste it. Rename the new folder to my-snapshot-buttons and enter that folder.
You will see three files inside:
It has two functions: koruInit() and onLoadEnd(). The first one gets called when the Koru engine is started. It sets up a handler for “loadend” event that Koru sends when it finishes loading the scene. The other thing is that it sets createSnapshotButtons property to false which tells Koru that you don’t need the standard buttons.
When Koru loads the scene it doesn’t create the default buttons as you asked it and finally it calls your onLoadEnd() function. The function gets Koru object and also gets the HTML element with “snapshots-row” identifier that will contain the new buttons.
The function then loops through the snapshots, check if snapshot is visible and makes a link-based button for each of the snapshots. It also adds a handler to each button that activates the snapshot.
That is all, easy!
You can use the same idea to automatically start a snapshot when the scene is loaded. Just replace the loop in the code above with getting the first (or any other) snapshot and directly calling that apply() method on it.
If this is too much for you and all you need is to change the buttons appearance, have a look at our other tutorial that shows how to customize snapshot buttons with CSS.