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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024