change the Supply Theme blog layout into a grid

HKfreedom
New Member
2 0 2

I am a Shopify beginner and would like to change the Supply Theme blog layout into a grid, such as Default Theme.

there is the blog.liquid code and the blog layout of the Default Theme. Anyone can advise? Thanks a lot.

{% paginate blog.articles by 5 %}

{% include 'breadcrumb' %}

<div class="grid grid-border">

  <div class="grid-item large--four-fifths">
    <div class="grid">
      <div class="grid-item large--ten-twelfths">

        {% if current_tags %}
          <h1>{{ blog.title | link_to: blog.url }} &mdash; {{ current_tags.first }}</h1>
        {% else %}
          <h1>{{ blog.title }}</h1>
        {% endif %}

        {% for article in blog.articles %}

          <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
          <p class="text-light">
            {% capture date %}<strong><time pubdate datetime="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}">{{ article.published_at | date: format: 'date' }}</time></strong>{% endcapture %}
            {% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
            {{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}
          </p>

          <div class="rte">
          {% if article.image %}
            {% assign image_alt = article.title | escape %}
            {%- assign image = article.image -%}
            {% comment %}{{ article | img_url: '1024x1024' | img_tag: image_alt, 'article__image' | link_to: article.url }}{% endcomment %}
            <a href="{{ article.url }}" alt="{{ image_alt }}">
              {%- assign width = 650 -%}
              {%- assign height = 1000 -%}

              {%- include 'image-logic' with width: width, height: height -%}

              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              <div class="lazyload__image-wrapper" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
                <div class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                  <img class="lazyload js article__image"
                  src="{{ article.image | img_url: '300x' }}"
                  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="{{ image_alt }}">
                </div>
              </div>
              <noscript>
                <img src="{{ image | img_url: '580x' }}"
                  srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
                  alt="{{ image.alt }}" style="opacity:1;">
              </noscript>
            </a>

          {% endif %}
            {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
            {% else %}
              <p>{{ article.content | strip_html | truncatewords: 100 }}</p>
            {% endif %}
          </div>

          <ul>
            {% if blog.comments_enabled? %}
            <li>
              <a href="{{ article.url }}#comments">
                {{ 'blogs.comments.with_count' | t: count: article.comments_count }}
              </a>
            </li>
            {% endif %}

            {% include 'tags-article' %}
          </ul>

          <p><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} →</a></p>

        {% endfor %}

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

      </div>
    </div>
  </div>

  <aside class="sidebar grid-item large--one-fifth grid-border--left">
    {% include 'blog-sidebar' %}
  </aside>
</div>

{% endpaginate %}

 

Untitled.jpg

KetanKumar
Shopify Partner
14197 1652 5106

@HKfreedom 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
14197 1652 5106

@HKfreedom 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes