Shopify themes, liquid, logos, and UX
Hi! Is there a way to get 3 blog columns instead of one in the brooklyn theme?
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
sorry but i can see only 1 blog can you please show me more!
I added 3 posts so you can see... https://mybestfriendchies.com/blogs/frenchbullblog
hi @Gabriellesimard can you provide liquid code for blog section!
this is the blog.liquid code
<!-- /templates/blog.liquid -->
{% paginate blog.articles by 15 %}
<div class="grid">
<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 }} — {{ 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 %}
{% assign article_content = article.excerpt_or_content %}
<article class="article grid small--text-center">
{% unless article.image == blank %}
<div class="grid__item">
<a class="article__featured-image-link" href="{{ article.url }}">
<noscript>
{{ article.image | img_url: '200x200' | img_tag: article.title | escape }}
</noscript>
<div class="article__featured-image-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
{% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="article__featured-image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ article.title | escape }}">
</div>
</a>
</div>
{% endunless %}
<div class="grid__item large--two-tenths push--large--one-tenth">
<time datetime="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}" class="date">{{ article.published_at | date: format: 'date' }}</time>
<hr class="hr--small hr--left small--hide">
</div>
<div class="grid__item large--six-tenths push--large--one-tenth">
<h2 class="h3"><a class="article__heading-link" href="{{ article.url }}">{{ article.title }}</a></h2>
<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 %}
{% include 'pagination' %}
{% endif %}
</div>
</div>
{% endpaginate %}
can you please confirm this look
Could it be possible to have a little space between the photos?
Yes its that possible can you please just confirm look?
thanks for confirm please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 769px) {
.template-blog main.main-content .grid__item.large--five-sixths.push--large--one-twelfth {
width: 100%;
left: 0;
}
.template-blog main.main-content article.article.grid.small--text-center {
width: calc(33.3333% - 15px);
float: left;
margin: 0px 7px;
}
.template-blog main.main-content hr {
display: none;
}
.template-blog main.main-content article.article.grid.small--text-center .grid__item {
padding-left: 0;
width: 100%;
}
.article__featured-image-wrapper {
padding-top: 100% !important;
}
.article__featured-image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
After Code result
Its perfect! thank you so much!
User | RANK |
---|---|
129 | |
93 | |
77 | |
70 | |
40 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022