Brooklyn theme - two columns of blog

Pavlos_Stavrou
New Member
10 0 0

Hi i have a new shop here https://accessories-beyond-cyprus.myshopify.com ;

i was wondering if there is a way to split the blog into two columns instead of one

also is it possible to display 1-2 or even 3 latest blog posts on the homepage?

 

thanks

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi Pavlos,

Britton here with the Shopify support team.

This blog has a good walkthrough on how to get featured blog posts to show up on a theme that does not usually support them. These themes also come with that functionality by default:

As for having a two column display for blog entries I redid the blog.liquid file for you so it now outputs 10 articles and lists them in a two column display. I also have it so it reverts back to a one column display for mobile devices. To get that to work replace your blog.liquid code in its entirety with this:

<!-- /templates/blog.liquid -->
{% paginate blog.articles by 10 %}

{% assign pageIndex0 = paginate.current_page | minus: 1 | times: 10 %}
{% assign counter = paginate.current_page | minus: 1 | times: 10 | plus: 5 %}

<div class="grid custom-blog">

  <div class="grid__item large--five-sixths push--large--one-twelfth">

    <header class="section-header text-center">
      <h1>
        {% if current_tags %}
          {{ blog.title | link_to: blog.url }} &mdash; {{ current_tags.first }}
        {% else %}
          {{ blog.title }}
        {% endif %}
        <a href="{{ shop.url }}{{ blog.url }}.atom" class="icon-fallback-text rss-link">
          <span class="icon icon-rss" aria-hidden="true"></span>
          <span class="fallback-text">RSS</span>
        </a>
      </h1>
      <hr class="hr--small">
    </header>
    
    {% for article in blog.articles limit: 5 offset: pageIndex0 %}

      {% assign article_content = article.excerpt_or_content %}
      {% assign featured_image_src = '' %}

      {% if article.image %}
        {% assign featured_image_src = article | img_url: '1024x1024' %}
      {% elsif article_content contains '<img' %}
        {% assign featured_image_src = article_content | split: 'src="' %}
        {% assign featured_image_src = featured_image_src[1] | split: '"' | first %}
      {% endif %}
    
      <article class="article grid small--text-center">

        {% unless featured_image_src == blank %}
          <div class="grid__item">
            <a class="article__featured-image" href="{{ article.url }}">
              {{ featured_image_src | img_tag: article.title }}
            </a>
          </div>
        {% endunless %}

        <div class="grid__item large--two-tenths push--large--one-tenth">
          <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}" class="date">{{ article.published_at | date: format: 'month_day_year' }}</time>
          <hr class="hr--small hr--left small--hide">
        </div>
        <div class="grid__item large--six-tenths push--large--one-tenth">
          <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
          <div class="rte rte--indented-images">
            {{ article_content | strip_html | truncatewords: 120 }}
          </div>

          <p>
            <a href="{{ article.url }}" class="text-link">{{ 'blogs.article.read_more' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span></a>
          </p>

          {% if article.tags.size > 0 %}
            <ul class="tags tags--article inline-list">
              {% include 'tags-article' %}
            </ul>
          {% endif %}
        </div>
      </article>

      {% unless forloop.last %}<hr class="hr--clear">{% endunless %}

    {% endfor %}

    {% if paginate.pages > 1 and blog.articles_count <= 5 %}
      <div class="pagination">
        {{ paginate | default_pagination | replace: '&laquo; Previous', '<span class="icon icon-arrow-left" aria-hidden="true"></span>' | replace: 'Next &raquo;', '<span class="icon icon-arrow-right" aria-hidden="true"></span>' }}
      </div>
    {% endif %}

  </div>
</div>

<div class="grid custom-blog">

  <div class="grid__item large--five-sixths push--large--one-twelfth">

    {% for article in blog.articles offset: counter %}

      {% assign article_content = article.excerpt_or_content %}
      {% assign featured_image_src = '' %}

      {% if article.image %}
        {% assign featured_image_src = article | img_url: '1024x1024' %}
      {% elsif article_content contains '<img' %}
        {% assign featured_image_src = article_content | split: 'src="' %}
        {% assign featured_image_src = featured_image_src[1] | split: '"' | first %}
      {% endif %}
    
      <article class="article grid small--text-center">

        {% unless featured_image_src == blank %}
          <div class="grid__item">
            <a class="article__featured-image" href="{{ article.url }}">
              {{ featured_image_src | img_tag: article.title }}
            </a>
          </div>
        {% endunless %}

        <div class="grid__item large--two-tenths push--large--one-tenth">
          <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}" class="date">{{ article.published_at | date: format: 'month_day_year' }}</time>
          <hr class="hr--small hr--left small--hide">
        </div>
        <div class="grid__item large--six-tenths push--large--one-tenth">
          <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
          <div class="rte rte--indented-images">
            {{ article_content | strip_html | truncatewords: 120 }}
          </div>

          <p>
            <a href="{{ article.url }}" class="text-link">{{ 'blogs.article.read_more' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span></a>
          </p>

          {% if article.tags.size > 0 %}
            <ul class="tags tags--article inline-list">
              {% include 'tags-article' %}
            </ul>
          {% endif %}
        </div>
      </article>

      {% unless forloop.last %}<hr class="hr--clear">{% endunless %}

    {% endfor %}

  </div>
</div>

{% if paginate.pages > 1 %}
      <div class="pagination">
        {{ paginate | default_pagination | replace: '&laquo; Previous', '<span class="icon icon-arrow-left" aria-hidden="true"></span>' | replace: 'Next &raquo;', '<span class="icon icon-arrow-right" aria-hidden="true"></span>' }}
      </div>
    {% endif %}

{% endpaginate %}

Then add this to the bottom of theme.scss.liquid

@include at-query($min, $postSmall) {
.custom-blog {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
}

That should set you up! Just remember to back up your theme by duplicating it before making any code changes in case there are any errors in the above that I didn't catch!

I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
Pavlos_Stavrou
New Member
10 0 0

THANKS!!!!!!!! im sorry for late posting. i only saw this today. i replaced the codes as you said and it worked 

https://accessories-beyond-cyprus.myshopify.com/blogs/news

0 Likes
Pavlos_Stavrou
New Member
10 0 0

could you also tell me how to limit the text that appears on this page of each article?

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi again Pavlos,

You should be able to set the word limit for those section under blog.liquid. You want to find all instances of this line:

{{ article_content | strip_html | truncatewords: 120 }}

and then choose a lower value for truncatewords. For the code snippet I provided you they should be on lines 55 and 116.

Glad to hear that customization is working out for you :)

-Britton

Britton Shopify Guru
0 Likes
Pavlos_Stavrou
New Member
10 0 0

Awesome! it looks better now

thanks for your support

0 Likes
Omar_Markhieh
New Member
7 0 0

Hi! 

What would I need to change in the blog.liquid file to have it put out 4 articles instead of 10?

Thanks in advance!

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi Omar,

this is the line in the code I posted that would change the number of blog posts per page:

{% paginate blog.articles by 10 %}

Keep in mind if you want to use my modification above that you will also need to change this code:

{% assign pageIndex0 = paginate.current_page | minus: 1 | times: 10 %}
{% assign counter = paginate.current_page | minus: 1 | times: 10 | plus: 5 %}

to this: 

{% assign pageIndex0 = paginate.current_page | minus: 1 | times: 4 %}
{% assign counter = paginate.current_page | minus: 1 | times: 4 | plus: 2 %}

and then any other mention of the number 5 to the number 2. That should sort it out!

-Britton

Britton Shopify Guru
0 Likes
Omar_Markhieh
New Member
7 0 0

Thank you very much! :)

0 Likes
Braydon_Russell
Tourist
8 0 1

So this worked great! Except for the fact that now some code is showing at the bottom of my blog page. How would I get this to be hidden? Thank you. 

0 Likes