Brooklyn theme - two columns of blog

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
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Braydon,

it sounds like you added this code 

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

to the bottom of theme.liquid. That needs to go at the bottom of your main CSS file instead. Which one depends on your theme but theme.scss.liquid is usually a good bet. You can find that under the assets folder ofyour theme files rather than the template folder.

-Britton

Britton Shopify Guru
0 Likes
Tourist
3 0 3

But this seems to be not working as soon as going to page 2, as you can see on my page …
My Blog … as well as in the previous person's link … https://accessories-beyond-cyprus.myshopify.com/blogs/news … there is no content showing up on page 2.

Please help, it's urgent. Below you'll find my code, what shall i change that it will work?

--- CODE  STARTS HERE (blog.liquid) ---


<!-- /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 %}

<!-- Part #1 -->

<div class="grid custom-blog" style="margin-top: 60px;">

  <div class="grid__item large--five-sixths push--large--one-twelfth">
    
    {% 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">

        <div class="article">
        
                <div style="margin-bottom: 15px;">
                    <bSub style="color: white; font-size: 133%!important; letter-spacing:1px;">
                    {{ article.title }}
                    </bSub>
                </div>
          
            
            
            <h2 style="color: white; font-size: 80%!important; letter-spacing:0px; opacity: 0.33; line-height: 100%; margin-bottom: 0px; margin-left: 10px;">
                <i>
                
                
                <p class="blog-date">
                  
                  <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}"><img style="vertical-align:middle" src="{{ 'clk-icn.png' | asset_url }}" />&nbsp;{{ article.published_at |  date: '%Y-%m-%d' }}</time>
                  
                  {% comment %}
                    <span class="meta-sep">&#8226;</span>
                    {{ article.author }}
                  {% endcomment %}
                  {% if article.tags.size > 0 %}
                    <span class="meta-sep">&#8226;</span>
                    {% for tag in article.tags %}
                      <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %} <span class="meta-sep">&#8226;</span> {% endunless %}
                    {% endfor %}
                  {% endif %}
                </p>
                
                </i>
            </h2>
            

            
            <div class="rte">
              {% if article.image %}
                {% assign image_alt = article.title | escape %}
                <p>{{ article | img_url: '1024x1024' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
              {% endif %}
              {% if article.excerpt.size > 0 %}
                {{ article.excerpt }}
              {% else %}
                <p>{{ article.content | strip_html | truncatewords: 28 }}</p>
              {% endif %}
            </div>

            <p style ="border: 1px solid #7babdb; padding-left:15px; width:170px; font-size:80%; letter-spacing: 2px; text-shadow:none; color:white!important;"><a href="{{ article.url }}">Continue Reading</a></p>

          </div>
      </article>

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

    {% endfor %}

<!-- count -->
    {% 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>

<!-- Part #2 -->

<div class="grid custom-blog" style="margin-top: 60px;">

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

<!-- counter (not) -->
    {% 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">

        <div class="article">
        
            <div style="margin-bottom: 15px;">
                <bSub style="color: white; font-size: 133%!important; letter-spacing:1px;">
                {{ article.title }}
                </bSub>
            </div>
          
            
            <h2 style="color: white; font-size: 80%!important; letter-spacing:0px; opacity: 0.33; line-height: 100%; margin-bottom: 0px; margin-left: 10px;">
                <i>
                
                
                <p class="blog-date">
                  
                  <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}"><img style="vertical-align:middle" src="{{ 'clk-icn.png' | asset_url }}" />&nbsp;{{ article.published_at |  date: '%Y-%m-%d' }}</time>
                  
                  {% comment %}
                    <span class="meta-sep">&#8226;</span>
                    {{ article.author }}
                  {% endcomment %}
                  {% if article.tags.size > 0 %}
                    <span class="meta-sep">&#8226;</span>
                    {% for tag in article.tags %}
                      <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %} <span class="meta-sep">&#8226;</span> {% endunless %}
                    {% endfor %}
                  {% endif %}
                </p>
                
                </i>
            </h2>

            
            <div class="rte">
              {% if article.image %}
                {% assign image_alt = article.title | escape %}
                <p>{{ article | img_url: '1024x1024' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
              {% endif %}
              {% if article.excerpt.size > 0 %}
                {{ article.excerpt }}
              {% else %}
                <p>{{ article.content | strip_html | truncatewords: 28 }}</p>
              {% endif %}
            </div>

            <p style ="border: 1px solid #7babdb; padding-left:15px; width:170px; font-size:80%; letter-spacing: 2px; text-shadow:none; color:white!important;"><a href="{{ article.url }}">Continue Reading</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>
 
<div style="position: relative; right: -50%; margin-top: 40px; letter-spacing:15px;">
{% 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 %}
</div>
 

 

0 Likes
Tourist
3 0 3

But this does not work as soon as going to 'page 2', this is not working as you can see  in the previous person's blog link or in my blog I am currently working on. I've even tried to use exact the same code as you did and it were still not working …

0 Likes
Tourist
7 0 2

It works great but unfortunately the two columns are not centered. There is more space on the right side than on the left. Any guess how to change that?

It seems like the .grid selecor has something to do with it but I´m nor sure how to fix it without crashing the whole theme. 

Thanks for the help!

Alex

0 Likes
New Member
7 0 0

Help! There seems to be a problem when having more than one site. You can even see in the example the previous user posted, that the second (#2, #3, …) page won't show any content!

I've tried it myself too with exact the same code you've posted above but it does not work, there is somewhere a bug I guess. I've created myself a blog with over 20 posts and had set the columns to 10 posts each row, but all posts that exceed 20 weren't showed on the next page(s) :(

What needs to be changed?

AutoTonic – MIDI Note Transposer / www.autotonic.net
0 Likes
New Member
7 0 0

Also it seems you have accidentally used "'<img'" instead of "'img'", right?

AutoTonic – MIDI Note Transposer / www.autotonic.net
0 Likes
New Member
7 0 0

The URLS will end in something like this …

…/news?page=1
…/news?page=2

… but every count higher than 1 does *not* work!

AutoTonic – MIDI Note Transposer / www.autotonic.net
0 Likes
New Member
7 0 0

I have the error now live on my site, please provide a way to fix it, thank you.

Here's the Link: https://www.autotonic.net/blogs/news

Thaaaaaaaank you.

AutoTonic – MIDI Note Transposer / www.autotonic.net
0 Likes
New Member
7 0 0

Anyone?

AutoTonic – MIDI Note Transposer / www.autotonic.net
0 Likes