Skip to content

Instantly share code, notes, and snippets.

View wvuwebgist's full-sized avatar

wvuwebgist

View GitHub Profile
@wvuwebgist
wvuwebgist / _exclude-labelled-blog-posts-liquid.html
Created March 4, 2021 23:18
CleanSlate: Pull a feed from your blog while excluding certain labels in Liquid.
{% assign blog = site | get_page: 1234 %} <!-- Change this ID to your blog_index page's ID -->
{% assign articles = blog.articles | filter_articles: tags: "dont-show-stuff-with-this-label", tags_match: "none", limit: 5 %}
{% if articles.length > 0 %}
<ul>
{% for article in articles.all %}
<li><a href="{{ article.url }}">{{ article.name }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No blog posts found. Try again later, perhaps?</p>
@wvuwebgist
wvuwebgist / _random-image-loop--different-sizes-liquid.html
Created February 23, 2021 22:30
CleanSlate: Randomize the hero image and generate variables for different sizes based on a label in Liquid.
{% liquid
assign background_image_small = site | first_random_image_tagged_with: label: "backpage-1-thumbnail" | image_url: size: "1780x580" | css_background_image
assign background_image_large = site | first_random_image_tagged_with: label: "backpage-1-thumbnail" | image_url: size: "1780x1780" | css_background_image
%}
<style>
.wvu-hero {
{{ background_image_small }}
} /* /.wvu-hero */
@media (min-width: 501px) {
@wvuwebgist
wvuwebgist / _random-image-style-tag-liquid.html
Last active February 23, 2021 22:19
Generate a URL to a background image from a label and output that to a style tag in the head (Liquid).
{% assign background1 = site | first_random_image_tagged_with: label: "backpage-1-hero" | image_url: size: "1780x580" %}
<style>
.example {
background-image: url('{{ background1 }}');
}
</style>
<!-- OR: -->
{% assign background2 = site | first_random_image_tagged_with: label: "backpage-1-hero" | image_url: size: "1780x580" | css_background_image %}
@wvuwebgist
wvuwebgist / dynamic-tags-liquid.html
Created January 23, 2021 00:35
Assign the tags/labels you want to pull dynamically via Custom Data in CleanSlate CMS using Liquid.
---
layout: default
custom_data_attributes:
- tags_to_pull
---
<!--
Step 1: ☝️ Add the `tags_to_pull` custom data attribute to the
page template you want to output the feed on.
-->
@wvuwebgist
wvuwebgist / _featured-blog-post-simple-liquid.html
Last active March 4, 2021 23:07
CleanSlate (Liquid): Simplified example of how to pull a featured blog post.
{% assign blog = site | get_page: 123 %} <!-- Change this ID to your blog_index page's ID -->
{% assign articles = blog.articles | filter_articles: tags: "featured", limit: 1 %}
{% for article in articles.all %}
<h1>{{ article.name }}</h1>
{% endfor %}
@wvuwebgist
wvuwebgist / _featured-blog-post-liquid.html
Last active March 4, 2021 23:09
CleanSlate (Liquid): Add a featured blog post to a page on your site.
{% assign blog = site | get_page: 1234 %} <!-- Change this ID to your blog_index page's ID -->
{% assign articles = blog.articles | filter_articles: tags: "featured", limit: 1 %}
{% for article in articles.all %}
<article class="wvu-article">
<h2 class="wvu-article__title"><a href="{{ article.url }}">{{ article.name }}</a></h2>
<p class="wvu-article__meta">
{{ article.author.full_name }} |
<time class="wvu-article__date" datetime="{{ article.published_at | date_iso8601 }}">{{ article.published_at | date: '%A, %B %d, %Y' }}</time>
</p> <!-- /.wvu-article__meta -->
<div class="wvu-article__body" itemprop="articleBody">
@wvuwebgist
wvuwebgist / profile_index--simple-liquid.html
Created January 15, 2021 21:28
A profile index CleanSlate CMS template that only outputs a linked name for each child page written in Liquid.
---
layout: default
---
{% comment %} First, we must get the ID of the current profile_index page, then assign it to a "pages" variable: {% endcomment %}
{% assign pages = site | get_page: page.id %}
{% comment %} Then we take the "pages" variable, get the children from that variable and assign it to a "profiles" variable which we iterate through: {% endcomment %}
{% assign profiles = pages.children %}
{% for profile in profiles.all %}
@wvuwebgist
wvuwebgist / profile_index_liquid.html
Created January 15, 2021 21:22
A profile index template for CleanSlate CMS written in Liquid.
---
layout: default
---
<div class="wvu-container">
<div id="maincontent" class="main">
<h1>{{ page.name }}</h1>
<ul class="wvu-profile">
@wvuwebgist
wvuwebgist / profile_individual_liquid.html
Created January 15, 2021 20:48
A Profile Individual template for CleanSlate CMS written in Liquid.
---
layout: default
---
<div class="wvu-container">
<div id="maincontent" class="main">
<h1 class="wvu-profile__name">
{% editable_region_block name: "wvu-profile__name" type: "simple" %}
@wvuwebgist
wvuwebgist / _blog-feed-liquid.html
Last active January 22, 2021 20:19
CleanSlate (Liquid): Pull articles from a blog onto another page in the same site.
{% assign blog = site | get_page: 1234 %} <!-- Change this ID to your blog_index page's ID -->
{% assign articles = blog.articles | filter_articles: limit: 5 %}
{% if articles.length > 0 %}
<ul>
{% for article in articles.all %}
<li>
<a href="{{ article.url }}">{{ article.name }}</a>
{{ article.content['article-body'] | select_html: css_selector: 'p', limit: 2 }}
</li>
{% endfor %}