Blog template

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
  <main class="blog-page">
    <header>
      {% if blog.image and blog.theme.settings.show_image != false %}
        <img
          src="{{ blog.image | image_url: width: 1200, height: 480, fit: 'cover' }}"
          alt="{{ blog.image.alt | default: blog.title }}"
        >
      {% endif %}
      <h1>{{ blog.title }}</h1>
      {% if blog.description %}
        <div class="rich-text">{{ blog.richDescription_html }}</div>
      {% endif %}
    </header>

    {% stageblocks blog %}

    {% if posts.size > 0 %}
      <ul class="post-list">
        {% for post in posts %}
          <li>
            <article>
              {% if post.image %}
                <img
                  src="{{ post.image | image_url: width: 480, height: 300, fit: 'cover' }}"
                  alt="{{ post.image.alt | default: post.title }}"
                  loading="lazy"
                >
              {% endif %}
              <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
              {% if post.publishDate %}
                <time datetime="{{ post.publishDate }}">{{ post.publishDate | date: '%d %B %Y' }}</time>
              {% endif %}
              {% if post.description %}<p>{{ post.description }}</p>{% endif %}
            </article>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p>No posts have been published yet.</p>
    {% endif %}
  </main>
{% endcapture %}

{% schema %}
{
  "settings": [
    {
      "type": "switch",
      "name": "show_image",
      "label": "Show blog image",
      "defaultValue": true
    }
  ],
  "blocks": []
}
{% endschema %}