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?
The look is great!
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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024