Delicious Library 3 Templating Tutorial
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.
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.";
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" />
These variables can be used in your entire template:
$fullName The name of your export page as defined when you created it (see screenshot).
$addressBookImage Your image from Apple´s Contacts app. It only gives you the url of the image, so you´ll have to wrap it into an
<img>tag and size it via CSS.
$totalItems The total number of items in all exported shelves.
$publishDate The time of your export. Useful for "Last update: Jan 8, 2014" labels. The date format looks like in the previous example and I haven´t found out if it can be modified.
$shelfNavigation Renders the list of shelves as links. HTML output looks like this:
<div class="shelf_selection"> <a class="shelf selected" href="index.html">Shelf 1</a> <a class="shelf" href="shelf2.html">Shelf 2</a> <a class="shelf" href="shelf3.html">Shelf 3</a> </div>
$shelfNavigationPopup Will give you a select box with all your shelves in it. Choosing one will switch the page (every shelf is a seperate HTML page) and display the shelf. The HTML output looks like this:
<select class="shelf_selection" onchange="location.href = this.options[this.selectedIndex].value;"> <option value="shelf1.html" selected="selected">Shelf 1</option> <option value="shelf2.html">Shelf 2</option> <option value="shelf3.html">Shelf 3</option> </select>
$pageNavigation A list of links to switch between different pages of the current shelf. The HTML output looks like this:
<span class="arrow left"> </span> <span class="pages"> <span class="page">1</span> <a class="page" href="books-2.html">2</a> <a class="page" href="books-3.html">3</a> <a class="page" href="books-4.html">4</a> <a class="page" href="books-5.html">5</a> </span> <a class="arrow right" href="books-2.html"> </a>
In this example we´re on the first page, so the left arrow and the first page link are
<span>tags instead of
<a>. Use this in your css to hide the arrows or emphasize the active page.
$librarySearchString A string containing the location and name of the library publisher. Can be disabled in the publish settings (below the shelf selection).
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.
$title The item´s title
$coverImage200 The item´s cover image. The 200 can be replaced with another number to control the height of the outputted image. It will output the complete
$creatorsCompositeString For books the author´s name, for movies the director´s name.
$rating The rating for the item you entered in Delicious Library. The HTML output is a number of star images (between 0 and 5):
<img src="images/star-filled.png" alt="*"> <img src="images/star-filled.png" alt="*"> <img src="images/star-filled.png" alt="*"> <img src="images/star-empty.png" alt="*"> <img src="images/star-empty.png" alt="*">
$primaryDescriptionString The item´s description text.
$uuidString Some ID of the item, used internally in Delicious Library. Looks like this: 6C1D9050-DA30-4673-BF42-58DCC2BBD5A3. The cover image has the same name, e.g. covers/6C1D9050-DA30-4673-BF42-58DCC2BBD5A3.png
$asin The item´s Amazon Standard Identification Number
$netRating I found this in the official templates but I haven´t found out what kind of rating this is. It´s empty in my items.
$amazonURL A link to the item´s Amazon page. Linktext and href both contain the full URL.
$amazonAuthorURL A link to Amazon listing more items of the same author.
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.
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.
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