Examples

Need some inspiration, or looking to see how to build something specific using Harmony? Here’s where we collect common theme snippets and examples for you to copy and use on your own site, or tweak as needed.

If you have something you’d like added to this list, log into your Harmony account and click the Feedback link at the top, we’d love to here what you’ve come up with.

Blog Post Comments

To list out all the comments on a blog post.

<ol>
  {% for comment in item.comments %}
    <li class="comment">
      <div class="comment_info">
        {{ comment | gravatar }}
        <span>{{ comment | link_to_comment_author }} - {{ comment.created_at | date: '%B %-d, %Y' }}</span>
      </div>
      {{ comment.body | texilize }}
    </li>
  {% endfor %}
</ol>

For a comment form on a blog post.

{% if item.accepting_comments? %}
  <h3>Comment</h3>
  {% commentform %}
    {% if message %}
      <p>{{ message }}</p>
    {% else %}
      {% if errors %}
        <ul>
          {% for error in errors %}
            <li>{{ error }}</li>
          {% endfor %}
        </ul>
      {% endif %}
      <p>{{ form.name_label }}{{ form.name_field }}</p>
      <p>{{ form.email_label }}{{ form.email_field }}</p>
      <p>{{ form.body_field }}</p>
      <p>{{ form.submit_field }}</p>
    {% endif %}
  {% endcommentform %}
{% endif %}

Custom Navigation

<ul id="nav">
  {% for child in site.navigation %}
    <li {% if child == item %} class="current" {% endif %}>
      <a href="{{ child.url }}">{{ child.title }}</a>
    </li>
  {% endfor %}
</ul>

If you’d like your navigation to go deeper than the first level, you’re going to need something similar to this.

<ul id="nav">
  {% for page in site.navigation %}
    <li {% if page == item %} class="current" {% endif %}>
      <a href="{{ page.url }}">{{ page.title }}</a>
        {% if page.children != null %}
          <ul class="subpages">
          {% for subpage in page.children %}
            <li {% if subpage == item %} class="current" {% endif %}>
              <a href="{{ subpage.url }}">{{ subpage.title }}</a>
            </li>
          {% endfor %}
          </ul>
        {% endif %}
    </li>
  {% endfor %}
</ul>

Loop Through Blog Posts

{% for post in blog.recent_posts.10 %}
  <div class="post">
    <h2>{{ post.title }}</h2>
    <p class="info" >{ {post.published_at | date: '%B %d, %Y' }}</p>
    {{ post.data.body }}
    <p class="info">Posted by {{ post.creator.name }}</p>
  </div>
{% endfor %}

Add this before the loop for use on a page besides the blog.

{{ '/blog/' | item_from_path | assign_to: 'blog' }}

Slide Show

{{ '/slides/' | item_from_path | assign_to: 'gallery' }}
<ul id="gallery">
  {% for slide in gallery.children %}
    <li class="slide"><img src="{{ slide.data.image | image_size_url: 'slide' }}"></li>
  {% endfor %}
</ul>

For this configuration create a page on your root directory, with any template and the name ‘Slides’, but turn off ‘Show in Navigation’ on the ‘Page Information’ sidebar. Then populate this page with subpages using a custom template, created with a file upload slot and any other information you’d like with the slide.