Custom page in blog sidebar - Top of sidebar above tags

article.liquid

<!-- /sections/article.liquid -->
{% assign number_of_comments = article.comments_count %}

{% comment %}
  If a comment was just submitted and it has no blank fields, we have an extra comment to count.
{% endcomment %}
{% if comment and comment.created_at %}
  {% assign number_of_comments = article.comments_count | plus: 1 %}
{% endif %}

{% assign sidebar_enable = false %}
{% if article.tags != blank and section.settings.sidebar_tags %}
  {% assign sidebar_enable = true %}
{% elsif section.settings.recent %}
  {% assign sidebar_enable = true %}
{% endif %}


{% assign blog_grid = 'large--two-thirds push--large--one-sixth' %}
{% if sidebar_enable %}
  {% assign blog_grid = 'large--two-thirds' %}
{% endif %}


<div data-section-id="{{ section.id }}" data-section-type="article">

{% if article.image %}
  <div class="homepage-image {{ section.settings.image_height }}" id="FeaturedImage-{{ section.id }}" {% if section.settings.parallax %}data-img-src="{{ article.image | img_url: '1800x' }}"{% endif %}>
    {% if section.settings.image_height == 'use_image' %}
      <img src="{{ article.image | img_url: '1400x' }}" alt="{{ article.image | default: article.title }}" class="responsive-wide-image" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}/>
    {% endif %}
    {% if section.settings.parallax == false and section.settings.image_height != 'use_image' %}
      <div class="background-size-cover" style="background-image: url('{{ article.image | img_url: '1400x' }}');"></div>
    {% endif %}
  </div>
{% endif %}


  <div class="wrapper page-margin">

    <div class="grid">

      <article class="grid__item {{ blog_grid }}" itemscope itemtype="http://schema.org/Article">

        <div class="blog__article{% if article.image %} blog__article--over-image{% endif %}">
          <header>
            <h1 class="h2" itemprop="headline">{{ article.title }}</h1>
            {% if section.settings.blog_show_meta %}
              {% capture author %}<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span class="strong" itemprop="name">{{ article.author }}</span></span>
              {% endcapture %}
              {% capture date %}<time itemprop="datePublished" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
              <p class="accent">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
            {% endif %}
          </header>

          <div class="blog__article__content rte" itemprop="articleBody">
            {{ article.content }}
          </div>

          {% if section.settings.tags %}
            {% include 'tags-article' %}
          {% endif %}
          {% if section.settings.social %}
            {% capture link %}{{ shop.url }}{{ article.url }}{% endcapture %}
            {% capture title %}{{ article.title | url_param_escape }}{% endcapture %}
            <div class="share text-center" data-permalink="{{ link }}">
              {% if settings.share_enable_facebook %}
                <a target="_blank" href="//www.facebook.com/sharer.php?u={{ link }}" class="share__link">
                  <span class="icon icon-facebook" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.facebook' | t }}</span>
                </a>
              {% endif %}
              {% if settings.share_enable_twitter %}
                <a target="_blank" href="//twitter.com/share?url={{ link }}&amp;text={{ shareTitle }}" class="share__link">
                  <span class="icon icon-twitter" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.twitter' | t }}</span>
                </a>
              {% endif %}
              {% if settings.share_enable_pinterest %}
                <a target="_blank" href="http://pinterest.com/pin/create/button/?url={{ link }}&amp;media={{ article.image | img_url: '1024x1024' | prepend: 'http:' }}&amp;description={{ shareTitle }}" class="share__link">
                  <span class="icon icon-pinterest" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.pinterest' | t }}</span>
                </a>
              {% endif %}
              {% if settings.share_enable_google %}
                <a target="_blank" href="//plus.google.com/share?url={{ link }}" class="share__link">
                  <span class="icon icon-google" aria-hidden="true"></span>
                  <span class="share__text">{{ 'general.share.google' | t }}</span>
                </a>
              {% endif %}
            </div>
          {% endif %}
        </div>
        {% if blog.next_article or blog.previous_article %}
          <p class="clearfix">
            {% if blog.previous_article %}
              <span class="left">
                <a href="{{ blog.previous_article }}" class="btn btn--secondary btn--small uppercase">
                  &larr; {{ 'blogs.article.older_post' | t }}
                </a>
              </span>
            {% endif %}
            {% if blog.next_article %}
              <span class="right">
                <a href="{{ blog.next_article }}" class="btn btn--secondary btn--small uppercase">
                  {{ 'blogs.article.newer_post' | t }} &rarr;
                </a>
              </span>
            {% endif %}
          </p>
        {% endif %}


        {% if blog.comments_enabled? %}
          <hr class="hr--clear">

          {% if article.comments_count > 0 %}
          <p class="uppercase h4">{{ 'blogs.comments.comments_with_count' | t: count: number_of_comments }}</p>
          {% endif %}

          <hr class="hr--clear">

          {% comment %}
            Just like blog.liquid page, define how many comments should be on each page.
          {% endcomment %}
          {% paginate article.comments by 5 %}
            {% comment %}
              #Comments is required, it is used as an anchor link by Shopify.
            {% endcomment %}
            <div id="Comments">

              {% if comment and comment.created_at %}
                <p class="note form-success">
                  {% if blog.moderated? %}
                    {{ 'blogs.comments.success_moderated' | t }}
                  {% else %}
                    {{ 'blogs.comments.success' | t }}
                  {% endif %}
                </p>
              {% endif %}

              {% if number_of_comments > 0 %}
                <ul>
                  {% comment %}
                    If a comment was just submitted with no blank field, show it.
                  {% endcomment %}
                  {% if comment and comment.created_at %}
                    <li id="{{ comment.id }}" class="comment first{% if article.comments_count == 0 %} last{% endif %}">
                      {% include 'comment' %}
                    </li>
                  {% endif %}

                  {% comment %}
                    Showing the rest of the comments.
                  {% endcomment %}
                  {% for comment in article.comments %}
                    <li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
                      {% include 'comment' %}
                    </li>
                  {% endfor %}
                </ul>

                {% if paginate.pages > 1 %}
                  <hr class="hr--clear">
                  <div class="text-center">
                    {% include 'pagination-custom' %}
                  </div>
                {% endif %}

                <hr class="hr--clear">

              {% endif %}

              {% comment %}
                Comment submission form
              {% endcomment %}
              {% form 'new_comment', article %}

                {% comment %}
                  #AddCommentTitle is used simply as an anchor link
                {% endcomment %}
                <p class="uppercase h4" id="AddCommentTitle">{{ 'blogs.comments.title' | t }}</p>

                {{ form.errors | default_errors }}

                <div class="grid">

                  <div class="grid__item large--one-half">
                    <label for="CommentAuthor" class="label--hidden">{{ 'blogs.comments.name' | t }}</label>
                    <input {% if form.errors contains "author" %} class="error"{% endif %} type="text" name="comment[author]" placeholder="{{ 'blogs.comments.name' | t }}" id="CommentAuthor" value="{{ form.author }}" autocapitalize="words">

                    <label for="CommentEmail" class="label--hidden">{{ 'blogs.comments.email' | t }}</label>
                    <input {% if form.errors contains "email" %} class="error"{% endif %} type="email" name="comment[email]" placeholder="{{ 'blogs.comments.email' | t }}" id="CommentEmail" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
                  </div>

                  <div class="grid__item">
                    <label for="CommentBody" class="label--hidden">{{ 'blogs.comments.message' | t }}</label>
                    <textarea {% if form.errors contains "body" %} class="error"{% endif %} name="comment[body]" id="CommentBody" placeholder="{{ 'blogs.comments.message' | t }}">{{ form.body }}</textarea>
                  </div>

                </div>

                {% if blog.moderated? %}
                  <p>{{ 'blogs.comments.moderated' | t }}</p>
                {% endif %}

                <input type="submit" class="btn uppercase" value="{{ 'blogs.comments.post' | t }}">

                {% comment %}
                  Assign variable to be used after timber.init() is run in theme.liquid
                {% endcomment %}
                {% if form.errors %}
                  {% assign newHash = 'AddCommentTitle' %}
                {% endif %}

                {% if form.posted_successfully? %}
                  {% assign newHash = 'Comments' %}
                {% endif %}

              {% endform %}

            </div>
          {% endpaginate %}
        {% endif %}

      </article>
      {% if sidebar_enable %}
        <div class="grid__item large--one-third blog__sidebar">
          <h2 class="uppercase h4">{{ blog.title }}</h2>
          <a class="icon-fallback-text blog__rss" href="{{ blog.url }}.atom" title="{{ shop.name }} RSS" target="_blank">
            <span class="icon icon-rss"></span>
            <span class="fallback-text">RSS</span>
          </a>
          <hr class="hr--small">

          
          {% if section.settings.info_page != blank %}
              {% assign size_page = pages[section.settings.info_page] %}
              <p>
                  {{ size_page.content }}
              </p>
          {% endif %}

          
          
          {% if blog.all_tags != blank and section.settings.sidebar_tags %}
          <h5 class="uppercase h5">{{ 'blogs.article.tags' | t }}</h2>
            {% for tag in blog.all_tags %}
              <a class="blog__tag" href="/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
            {% endfor %}
            <div class="page-margin"></div>
          {% endif %}
          {% if section.settings.recent %}
            {% assign counter = 0 %}
            {% assign article_limit = 2 %}
            {% assign current_article = article %}
            {% assign blog_grid = 'one-whole' %}
            <div class="grid">
              {% for article in blog.articles %}
                {% unless article.handle == current_article.handle %}
                  {% include 'article-grid-item' %}
                  {% assign counter = counter | plus: 1 %}
                  {% if counter == article_limit %}
                    {% break %}
                  {% endif %}
                {% endunless %}
              {% endfor %}
            </div>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
</div>


{% schema %}
{
  "name": "Article",
  "settings": [
    {
      "type": "header",
      "content": "Article"
    },
    {
      "type": "checkbox",
      "id": "blog_show_meta",
      "label": "Show date and author",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "tags",
      "label": "Show article tags"
    },
    {
      "type": "checkbox",
      "id": "social",
      "label": "Show social sharing"
    },
    {
      "type": "header",
      "content": "Featured Image"
    },
    {
      "type": "select",
      "id": "image_height",
      "label": "Image height",
      "options": [
        { "value": "use_image", "label": "Image height"},
        { "value": "use_screen_two_thirds", "label": "Tall"},
        { "value": "use_screen_one_half", "label": "Medium"},
        { "value": "use_screen_one_third", "label": "Short"},
        { "value": "use_screen_one_fifth", "label": "Tiny"}
      ],
      "default": "use_image"
    },
    {
      "type": "checkbox",
      "id": "parallax",
      "default": true,
      "label": "Enable parallax scroll"
    },
    {
      "type": "header",
      "content": "Sidebar"
    },
    {
      "type": "checkbox",
      "id": "sidebar_tags",
      "label": "Show all tags"
    },
    {
      "type": "checkbox",
      "id": "recent",
      "default": true,
      "label": "Show recent articles"
    },
    {
      "type": "header",
      "content": "Optional Sidebar Content"
    },
    {
      "id": "info_page",
      "type": "page",
      "label": "Select page"
    }
  ]
}
{% endschema %}