Ascribe

Template Tips & Tricks

Resetting Your Templates

If you reach a point where one of your templates isn't working and you can't figure out how to fix it, you can start from a fresh copy of the stock templates, click the Reset button at the bottom of the template editing page. Beware: this resets all of your templates, and there is no way to recover your previous work. So if there are customizations you want to preserve, you'll need to save your own copy first and reapply them.

Rounded Corners

By default, the layout template loads the Nifty Corners Cube javascript library. This library provides a simple way to add rounded corners to any div in your templates by making a single javascript call. For example, to round the corners of a div with the id of "projects" you'd include this code:

<script type="text/javascript">
	// <![CDATA[
		Event.observe(window, 'load', function () {
			Nifty("div#products");
		});
	// ]]>
</script>

Using Custom Stylesheets or JavaScript

There are two ways to use your own CSS or JavaScript files in your templates:

To make these files available to all of your pages, edit the layout template to include references to the files.
To make a file available only to a specific page, you can include it in a content_for_head block on the affected page. For example, the default project template uses this placeholder to add an additional stylesheet via the capture tag:
```
{% capture 'content_for_head' %}
    <link href="/stylesheets/public/project.css" media="screen" rel="Stylesheet" type="text/css" charset="utf-8" />
{% endcapture %}
```

In either case, the files must be hosted on your own server; there is no mechanism for uploading additional files directly to the Ascribe site.

Suppressing Content for Empty Collections

You may want to only display headings or other page elements when a collection has something in it. You can check this by using the empty? operator on the collection. For example, a project might hide or display a heading for its photos section this way:

{% unless project.selected_photos.empty? %}
	<h3>Photos</h3>
{% endunless %}

Counting Items in a Collection

To count the number of items in a collection, use the size filter. For example, you might want to display the number of selected photos that a project contains:

There are {{ project.selected_photos | size }} associated with this project.