Skip to content

Instantly share code, notes, and snippets.

@bjornbennett
Created May 3, 2018 03:09
Show Gist options
  • Save bjornbennett/c1ea778ae7aa277e7e38b890be6a53d8 to your computer and use it in GitHub Desktop.
Save bjornbennett/c1ea778ae7aa277e7e38b890be6a53d8 to your computer and use it in GitHub Desktop.
Shopify Liquid - This Snippet is helpful if you want a blog on your homepage, with control via settings for the client.
<!-- this Case grabs the blog count set by the client in settings, and sets the classes that will adjust the containers -->
{% case settings.homepage_blog_count %}
{% when '0' %}
{% when '1' %}
{% assign homepage_blog_grid = 'large--one-half push--large--one-quarter' %}
{% when '2' %}
{% assign homepage_blog_grid = 'large--one-half' %}
{% when '3' %}
{% assign homepage_blog_grid = 'large--one-third' %}
{% endcase %}
<!-- unless there is a blog set, it will not run -->
{% unless settings.homepage_blog == blank or settings.homepage_blog.empty? %}
<!-- output blog code, set titles, grab content -->
{% assign blog = blogs[settings.homepage_blog] %}
<div class="homepage-blog {{ settings.homepage_blog_color }}">
<div class="wrapper">
<div class="grid-uniform">
{% unless settings.homepage_blog_subtitle == '' %}
<div class="grid__item one-whole">
<h4 class="home__subtitle">{{ settings.homepage_blog_subtitle}}</h4>
</div>
{% endunless %}
<div class="one-whole">
{% for article in blog.articles limit: settings.homepage_blog_count %}
{% unless article.tags contains 'News' %}
<div class="grid__item {{ homepage_blog_grid }} tbm_home-blog-post">
<a class="blog__link" href="{{ article.url }}">
{%comment%}
<div class="blog__article blog__article--card{% if article.image %} blog__article--image{% endif %}"{% if article.image %} style="background-image: url('{{ article.image | img_url: 'grande' }}');"{% endif %}>
<div class="rte blog__article__content equalHeightColumn">
<h3 class="h3 blog__article__title">{{ article.title }}</h3>
{% unless article.image %}
{% if article.excerpt == blank %}
{{ article.content | strip_html | truncate: 200 }}
{% else %}
{{ article.excerpt | strip_html | truncate: 200 }}
{% endif %}
{% endunless %}
</div>
</div>
{%endcomment%}
<div class="tbm_play-btn">{{'play-btn.svg' | asset_url | img_tag}}</div>
<img src="{{ article.image | img_url: 'grande' }}" alt="{{article.title}}">
</a>
</div>
{% endunless %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endunless %}
<!-- the following code is inserted into the settings_schema.json file. -->
{%comment%}
{
"name": "Home page - featured blog",
"settings": [
{
"type": "header",
"content": "Blog posts"
},
{
"type": "blog",
"id": "homepage_blog",
"label": "Choose blog",
"info": "Feature two recent posts from this blog."
},
{
"type": "text",
"id": "homepage_blog_subtitle",
"label": "Secondary title"
},
{
"type": "select",
"id": "homepage_blog_color",
"label": "Background color",
"options": [
{
"value": "homepage--white",
"label": "White"
},
{
"value": "homepage--light",
"label": "Light"
},
{
"value": "homepage--splash",
"label": "Accent"
},
{
"value": "homepage--dark",
"label": "Dark"
}
]
},
{
"type": "select",
"id": "homepage_blog_count",
"default": "2",
"label": "Number of posts to display",
"options": [
{
"value": "1",
"label": "1 posts"
},
{
"value": "2",
"label": "2 posts"
},
{
"value": "3",
"label": "3 posts"
}
]
}
]
},
{%endcomment%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment