<hpcodecraft> release the kraken!

Delicious Library 3 Templating Tutorial

Reading time: 4 minutes

Somewhen last year I bought Delicious Library 3 to manage my DVD and book collection. It has a nice feature which allows you to export your library as a website. Stricken by the curse of the developer I immediately wanted to create my own template for this.

Since I've found little documentation on the web I've gone through a lot of trial and error:

After finishing the first template I decided to share my findings to give you a starting point if you want to develop your own HTML templates for Delicious Library 3.

File structure

This is what a basic template can look like:

The Resources folder contains the template´s thumbnail as it´ll be displayed in Delicious Library and the Template.strings file which contains the name and description of your template:

"Name" = "Boilerplate";
"Description" = "A starting point for your own template including jQuery.";

The Template folder contains all your HTML, CSS and Javascript files and images.

Meta tags

There are two meta tags which control how many items of your shelf will be displayed at once – I think they´re pretty self-explanatory:

<meta name="columns-per-page" content="3" />
<meta name="media-per-column" content="10" />

Global Variables

These variables can be used in your entire template:

Item variables

These variables can be used within a medium block. Each template must contain a div with the class “medium“ applied to it. Inside it lives the HTML that contains the item´s properties.

Installing your template

Copy your template to

~/Library/Containers/com.delicious-monster.library3/Data/Library/Application Support/Delicious Library 3/Templates

Tip: To make this easier, open your templates development folder in the shell and type (or paste):

ln -s ~/Library/Containers/com.delicious-monster.library3/Data/Library/Application\ Support/Delicious\ Library\ 3/Templates deploy_local

This will create a shortcut named deploy_local which leads to your Delicious Library Template folder.

More advice

Close your tags! The parser expects the template to be a well-formed XML file, so even if you choose an HTML5 doctype, doing stuff like <img src="happylittleclouds.png"> will break your template.
The preview in Delicious Library won´t render if the template is broken, so you´ll know something is wrong when it vanishes.

To get you started as quickly as possible I´ve prepared a little boilerplate template which you can download here.
It contains all the files and variables mentioned in this article in a minimal HTML5 template.

Happy templating!

P.S. This is just what I found out and not a complete list. If something I wrote is wrong, you´ve found some more variables or know a better documentation please let me know in the comments.

comments powered by Disqus