Created
May 3, 2018 03:09
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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