Table of Contents
Liquid Templates
Built on the Liquid markup language, Liquid templates are what tell SandwichBoard how to render restaurants' web sites. What follows is a detailed description of each template found in a SandwichBoard theme.
layout.liquid
This is the outermost template for a site. This is where the restaurant name, logo, site navigation, and copyright information would typically go. All other templates and pages are rendered inside it and are called by {{content_for_layout}}.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Andreas Viklund - http://andreasviklund.com/ and SandwichBoard - http://sandwichboard.com/" />
<title>{{ title }} - {{ restaurant.name }}</title>
{{ 'site' | stylesheet }}
{{ 'page' | stylesheet }}
{{ 'print' | stylesheet: 'print' }}
{% if image %}
{{ 'prototype' | javascript }}
{{ 'scriptaculous.js?load=effects,builder' | javascript }}
{{ 'lightbox' | javascript }}
{{ 'lightbox' | stylesheet }}
{% endif %}
</head>
<body>
<div id="restaurant-name"><a href="/"><h1>{{ restaurant.name | upcase }}</h1></a></div>
<div id="wrapper">
<div id="left">
<ul class="navigation">
<li><a href="/">Home</a></li>
{% if restaurant.has_a_single_menu %}
<li><a href="{{ restaurant.menu.path }}">Menu</a></li>
{% endif %}
{% if restaurant.has_a_single_location %}
<li><a href="{{ restaurant.location.path }}">Location</a></li>
{% endif %}
{% if restaurant.has_multiple_locations %}
<li><a href="/locations">Locations</a></li>
{% endif %}
{% if albums != empty %}
<li><a href="/albums">Photos</a></li>
{% endif %}
{% for page in pages %}
{% if page.path != '/' %}
<li><a href="{{ page.path }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% if restaurant.has_multiple_menus %}
<div id="menu-navigation">
<h2>Menus</h2>
<ul class="navigation">
{% for menu in menus %}
<li><a href="{{ menu.path }}">{{ menu.name }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div id="right">
{% if restaurant.has_a_single_location %}
<div id="restaurant-address">
{{ restaurant.location.address }}{% if restaurant.location.phone %} • {{ restaurant.location.phone }}{% endif %}
</div>
{% endif %}
<h1>{{ title }}</h1>
<div id="content">
{{ content_for_layout }}
</div>
<div id="copyright-credits">Copyright © {{ restaurant.name }}. All Rights Reserved.<br />
Original Design by <a href="http://andreasviklund.com/">Andreas Viklund</a>. Powered by <a href="http://sandwichboard.com/">SandwichBoard</a>.
</div>
</div>
</div>
{{ restaurant.stats_tracker }}
</body>
</html>
menu.liquid
Every menu's web page is generated by this template. You use the menu Liquid drop and its attributes to build the resulting page detailing the menu.
Example:
<div class="menu">
{% if menu.description %}<div class="menu-description">{{ menu.description | simple_format }}</div>{% endif %}
{% for section in menu.sections %}
<div class="menu-section">
<h2 class="menu-section-name">{{ section.name }}</h2>
{% if section.description %}<div class="menu-section-description">{{ section.description | simple_format }}</div>{% endif %}
{% for item in section.items %}
<div class="menu-item">
<h3 class="menu-item-name">{{ item.name }}</h3>
{% if item.description %}<div class="menu-item-description">{{ item.description | simple_format }}</div>{% endif %}{% if item.price %} <span class="menu-item-price">{{ item.price | number_to_currency_with_cents }}</span>{% endif %}
<ul class="menu-item-variations">
{% for variation in item.variations %}
<li class="menu-item-variation"><span class="menu-item-variation-name">{{ variation.name }}</span>{% if variation.price %} <span class="menu-item-variation-price">{{ variation.price | number_to_currency_with_cents }}</span>{% endif %}</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
error.liquid
If a Liquid template generates an error or if a user navigates to a page that doesn't exist, this template is used to tell the user that something has gone awry. You can access the Liquid error message from this template.
Example:
<h1>An error has occurred</h1>
<p>{{ message }}</p>
locations.liquid
This template is used to build the web page that displays a concise list of all a restaurant's locations. You use the locations Liquid collection, its location Liquid drops, and their attributes to build the resulting page.
Example:
<table class="locations">
{% for location in locations %}
<tr class="locations-location"><td>
<div class="locations-location-information">
<a href="{{ location.path }}"><h2 class="locations-location-name">{{ location.name }}</h2></a>
<div class="locations-location-address">
<div class="adr">
<span class="street-address">{{ location.street_address }}</span>,
<span class="locality">{{ location.city }}</span>,
<span class="region">{{ location.state }}</span>
<span class="postal-code">{{ location.zip }}</span>
</div>
</div>
{% if location.email or location.phone %}
<div class="locations-location-email-telephone-fax">
{% if location.email %}
<div class="email">
<span class="type">Email</span>:
<span class="value"><a href="mailto:{{ location.email }}">{{ location.email }}</a></span>
</div>
{% endif %}
{% if location.phone %}
<div class="tel">
<span class="type">Phone</span>:
<span class="value">{{ location.phone }}</span>
</div>
{% endif %}
</div>
{% endif %}
</div>
</td></tr>
{% endfor %}
</table>
location.liquid
Every restaurant location's web page is generated by this template. You use the location Liquid drop and its attributes to build the resulting page detailing the location and its hours of operation.
Example:
<div class="location">
{% if location.gmap_url %}
<div class="location-map">
<iframe src="{{ location.gmap_url }}" frameborder="0" scrolling="no"></iframe><br />
<small><a href="http://maps.google.com/maps?hl=en&q={{ restaurant.name }} {{ location.address }}">View Larger Map</a></small>
</div>
{% endif %}
<div class="location-information">
<div class="location-address">
<h2>Address</h2>
<div class="adr">
<div class="street-address">{{ location.street_address }}</div>
<span class="locality">{{ location.city }}</span>,
<span class="region">{{ location.state }}</span>
<span class="postal-code">{{ location.zip }}</span>
</div>
</div>
{% if location.email or location.phone or location.fax %}
<div class="location-email-telephone-fax">
{% if location.email %}
<div class="email">
<span class="type">Email</span>:
<span class="value"><a href="mailto:{{ location.email }}">{{ location.email }}</a></span>
</div>
{% endif %}
{% if location.phone %}
<div class="tel">
<span class="type">Phone</span>:
<span class="value">{{ location.phone }}</span>
</div>
{% endif %}
{% if location.fax %}
<div class="tel">
<span class="type">Fax</span>:
<span class="value">{{ location.fax }}</span>
</div>
{% endif %}
</div>
{% endif %}
{% for schedule in location.schedules %}
<div class="location-schedule">
<h2 class="location-schedule-name">{{ schedule.name }}</h2>
<table>
{% for entry in schedule.entries %}
<tr class="location-schedule-entry">
<td class="location-schedule-entry-days">{{ entry.days }}</td><td class="location-schedule-entry-hours">{{ entry.hours }}</td>
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
{% if location.notes %}
<div class="location-notes">
<h2>Additional Information</h2>
{{ location.notes | simple_format }}
</div>
{% endif %}
</div>
</div>
albums.liquid
This template is used to build the web page that displays a concise list of all a restaurant's albums. You use the albums Liquid collection, its album Liquid drops, and their attributes to build the resulting page.
Example:
<table class="albums">
{% for album in albums %}
<tr class="albums-album">
<td class="albums-thumbnail">
<a href="{{ album.path }}"><img src="{{ album.thumbnail.path | path_for_size: 'thumb' }}" /></a>
<div class="albums-album-images-count">
({{ album.images | size | pluralize: 'Image' }})
</div>
</td>
<td class="albums-album-information">
<a href="{{ album.path }}"><h2 class="albums-album-name">{{ album.name }}</h2></a>
{% if album.date %}
<div class="albums-album-date">
{{ album.date | date: '%B %e, %Y' }}
</div>
{% endif %}
<div class="albums-album-description">
{{ album.description }}
</div>
</td>
</tr>
{% endfor %}
</table>
album.liquid
Every restaurant album's web page is generated by this template. You use the album Liquid drop and its attributes to build the resulting page showing the album and its images.
Example:
<div class="album">
{% if album.date or album.description %}
<div class="album-information">
{% if album.date %}
<div class="album-date">
{{ album.date | date: '%B %e, %Y' }}
</div>
{% endif %}
{% if album.date %}
<div class="album-description">
{{ album.description }}
</div>
{% endif %}
</div>
{% endif %}
<div class="album-images">
{% for image in album.images %}
<div class="album-image">
<a href="{{ image.page_path }}"><img src="{{ image.path | path_for_size: 'thumb' }}" class="album-image-thumbnail" /></a>
</div>
{% endfor %}
</div>
</div>
image.liquid
Every album's image web page is generated by this template. You use the image Liquid drop and its attributes to build the resulting page showing the image and its comments.
Example:
<div class="image">
<div class="image-album">
Back to <a href="{{ image.album.path }}">{{ image.album.name }}</a> Album
</div>
<div class="image-small">
<a href="{{ image.path | path_for_size: 'medium' }}" rel="lightbox"><img src="{{ image.path | path_for_size: 'small' }}" /></a></div>
<div class="image-next-prev">
<div class="image-prev">
<a href="{{ image.prev_image.page_path }}">Previous</a>
</div>
<div class="image-next">
<a href="{{ image.next_image.page_path }}">Next</a>
</div>
</div>
<h2>{{ image.comments | size | pluralize: 'Comment'}}</h2>
{% if image.comments %}
<div class="image-comments">
{% for comment in image.comments %}
<div class="image-comment">
<div class="image-comment-author-date-time"><span class="image-comment-author">{{ comment.author }}</span> <span class="image-comment-date-time">(at {{ comment.created_at | date: '%l:%M %p, %B %e, %Y' }})</span> said:</div>
<p class="image-comment-body">
{{ comment.body }}
</p>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<h2>Make a Comment</h2>
{% commentform %}
<p><label for="comment_author">Author</label> <span class="small">(required)</span><br />{{ form.name }}</p>
<p><label for="comment_email">Email</label> <span class="small">(required but will not be published)</span><br />{{ form.email }}</p>
<p><label for="comment_author_url">Website</label><br />{{ form.url }}</p>
<p><label for="comment_body">Body</label> <span class="small">(required)</span><br />{{ form.body }}</p>
<p><input name="submit" type="submit" id="submit" value="Submit Comment" /></p>
{% endcommentform %}
