Shopify Help Secondary Blog Section on a different page

Question

Hi I'm hoping theres someone familiar with Shopify here.

I'm trying to create a secondary Blog section on a different page to my default 'Blog Page' but I'm having some problems getting the actual blog posts to show up on the page. All I seem to get is the page title and I'm uncertain as to why. I actually only wants specific articles dependant on their tags but I'm willing to settle for all articles right now and then I can go from there. My code is below. My blog is titled Studio. Any help would be much appreciated as I just cannot work out how I'm going wrong

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
    {% if blog.tags.size > 0 %}
      <select id="BlogTagFilter">
        <option value="/blogs/{{ blog.handle }}">{{ 'blogs.article.all_topics' | t }}</option>
        {% for tag in blog.all_tags %}
          <option value="/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
        {% endfor %}
      </select>
    {% endif %}
  </header>
</div>

<div class="{% if section.settings.layout == 'list' %}blog--list-view{% endif %}">
  {% if section.settings.layout == 'grid' %}
    <div class="page-width">
      <div class="grid grid--uniform grid--blog">
        {% for article in blog.articles %}
          <div class="grid__item medium-up--one-third">
            {% if article.image %}
              {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              {% include 'image-style' with image: article.image, small_style: true, width: 345, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}

              <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <a href="{{ article.url }}" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;" class="article__grid-image-container">
                  <img id="{{ img_id }}"
                       class="article__grid-image lazyload"
                       src="{{ article.image | img_url: '300x300' }}"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ article.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ article.image.alt | escape }}">
                </a>
              </div>

              <noscript>
                <a href="{{ article.url }}" class="article__grid-image-wrapper">
                  {{ article | img_url: '345x', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                </a>
              </noscript>
            {% endif %}

            <div class="article__grid-meta{% if article.image %} article__grid-meta--has-image{% endif %}">
              <h2 class="article__title h3">
                <a href="{{ article.url }}">{{ article.title }}</a>
              </h2>

              {% if section.settings.blog_show_author %}
                <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
              {% endif %}

              {% if section.settings.blog_show_date %}
                <span class="article__date">
                  {{ article.published_at | time_tag: format: 'month_day_year' }}
                </span>
              {% endif %}

              <div class="rte article__grid-excerpt">
                {% if article.excerpt.size > 0 %}
                  {{ article.excerpt }}
                {% else %}
                  {{ article.content | strip_html | truncate: 150 }}
                {% endif %}
              </div>

              {% if article.tags.size > 0 %}
                <div class="article__tags rte">
                  {% for tag in article.tags %}
                    <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="article__grid-tag">{{ tag }}</a>
                  {% endfor %}
                </div>
              {% endif %}

              <ul class="list--inline">
                <li>
                  <a href="{{ article.url }}" class="btn btn--secondary btn--small">
                    {{ 'blogs.article.read_more' | t }}
                  </a>
                </li>

                {% if blog.comments_enabled? and article.comments_count > 0 %}
                  <li>
                    <a href="{{ article.url }}#comments" class="btn btn--small btn--link">
                      {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                    </a>
                  </li>
                {% endif %}
              </ul>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% else %}
    {% for article in blog.articles %}
      <div class="border-top">
        <div class="page-width">
          <div class="grid">
            <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
              <div class="article--listing">
                <h2 class="article__title h3"><a href="{{ article.url }}">{{ article.title }}</a></h2>
                {% if section.settings.blog_show_author %}
                  <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
                {% endif %}

                {% if section.settings.blog_show_date %}
                  <span class="article__date">
                    {{ article.published_at | time_tag: format: 'month_day_year' }}
                  </span>
                {% endif %}

                {% if article.image %}
                  {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
                  {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
                  {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                  {% include 'image-style' with image: article.image, small_style: false, width: 905, height: 600, wrapper_id: img_wrapper_id, img_id: img_id %}

                  <div id="{{ img_wrapper_id }}" class="article__list-image-wrapper js">
                    <a href="{{ article.url }}" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;" class="article__list-image-container">
                      <img id="{{ img_id }}"
                           class="article__list-image lazyload"
                           src="{{ article.image | img_url: '300x300' }}"
                           data-src="{{ img_url }}"
                           data-widths="[180, 360, 540, 720, 905, 1090, 1296, 1512, 1728, 2048]"
                           data-aspectratio="{{ article.image.aspect_ratio }}"
                           data-sizes="auto"
                           alt="{{ article.image.alt | escape }}">
                    </a>
                  </div>

                  <noscript>
                    <p>
                      <a href="{{ article.url }}">
                        {{ article | img_url: '455x300', scale: 2 | img_tag: article.title }}
                      </a>
                    </p>
                  </noscript>
                {% endif %}

                <div class="rte">
                  {% if article.excerpt.size > 0 %}
                    {{ article.excerpt }}
                  {% else %}
                    {{ article.content | strip_html | truncate: 150 }}
                  {% endif %}
                </div>

                {% if article.tags.size > 0 %}
                  <div class="article__tags article__tags--list rte">
                    {{ 'blogs.article.posted_in' | t }}
                    {% for tag in article.tags %}
                      <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
                    {% endfor %}
                  </div>
                {% endif %}

                <ul class="list--inline article__meta-buttons">
                  {% if article.excerpt.size > 0 %}
                    <li>
                      <a href="{{ article.url }}" class="btn btn--secondary btn--small">
                        {{ 'blogs.article.read_more' | t }}
                      </a>
                    </li>
                  {% endif %}

                  {% if blog.comments_enabled? and article.comments_count == 0 %}
                    <li>
                      <a href="{{ article.url }}#comment_form" class="btn btn--secondary btn--small">
                        {{ 'blogs.comments.title' | t }}
                      </a>
                    </li>
                  {% endif %}

                  {% if blog.comments_enabled? and article.comments_count > 0 %}
                    <li>
                      <a href="{{ article.url }}#comments" class="btn btn--secondary btn--small">
                        {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                      </a>
                    </li>
                  {% endif %}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
        {% endif %}

        <h3><a href= "{{ article.url }}">{{ article.title }}</a></h3>
        <p><span class="date" style="display: block;">Posted: <em>{{ article.published_at | date: "%B %d %Y" }}</em> in <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a></span></p>
        <section>{{ article.content | strip_html | truncatewords: 30 }}</section>
      </article>

      <hr class="divider" />

</div>


{% schema %}
  {
    "name": "Blog pages",
    "settings": [
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "list",
        "options": [
          {
            "value": "grid",
            "label": "Grid"
          },
          {
            "value": "list",
            "label": "List"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "blog_show_author",
        "label": "Show author",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "blog_show_date",
        "label": "Show date",
        "default": true`enter code here`
      }
    ]
  }
{% endschema %}

Thanks for your help so far.

Is this what the code would look like in my section template then?

{% if blogs[section.settings.sidebar_blog].tags.size > 0 %}
{% for tag in blogs[section.settings.sidebar_blog].all_tags %}
{{ tag }}
{% endfor %}

{% endif %}

{% schema %}

{
"type": "blogs",
"id": "sidebar_blogs",
"label": "Blogs"
} 

{% endschema %}

With the code above I get the following errors when trying to save the new section.

Error: Invalid schema: 'type' is not a valid attribute Error: Invalid schema: 'id' is not a valid attribute Error: Invalid schema: 'label' is not a valid attribute

I still get the same errors if I add this schema rather than the schema above.

{
"type": "blog", 
"id": "sidebar_blog",
"label": "Blog"
}

Gurpreet Singh Gurpreet Singh · Accepted Answer · 2018-05-24T06:41:36

I have checked your code. Actually problem is that you are trying to get shopify blog & article content outside blog files. If you want to get blog & article content in page template then there is another way for that

You have to pass your blog handle at the place where you write blog in code.Here I write sample code for you please try this code & check if this is working for you:-

{% if blogs['all'].tags.size > 0 %}

{% for tag in blogs['all'].all_tags %}
```
 {{ tag }}
```
{% endfor %}

{% endif %}

So, this way you can get your particular blog data by passing blog handle. here 'all' is representing for blog handle. you can pass own blog handle on the place 'all'.

You can replace blog with blogs['blog-handle'] then you can get blog data.

As if you want blog handle dynamic in your code then you have to create a area in section schema where you can select you blog then you can get automatically blog handle.

{
 "type": "blog",
 "id": "sidebar_blog",
 "label": "Blog"
}

Add above code in your section schema then you get your all blogs in drop-down. After that your code by which get you blog tags will becomes:-

{% if blogs[section.settings.sidebar_blog].tags.size > 0 %}
  {% for tag in blogs[section.settings.sidebar_blog].all_tags %}
     {{ tag }}
  {% endfor %}
{% endif %}

Now, every thing is dynamic & you get all data of blog which you will select in your section schema.

Shopify Help Secondary Blog Section on a different page

1 Answers