General Blog Improvements

Tags: journal, innovate, and tips
Personhours: 7
General Blog Improvements By Caitlin

Task: Make blog more accessible and simpler to write for

In a rough order, here are the things I've worked on in the blog over the past month or so:

  • Add a readable nav-bar and fix header text color
  • Add About page structure for new members to fill in
  • Resize a bunch of images to fit the 600 px width, and a couple that were too tall
  • Create tag-specific post pages
  • Make these tag pages Case-Insensitive so posters could tag "Design" or "design"
  • Add Div wrappers around newly created pages so the margins work
  • Add a Date limit on the printable version of the blog so only this season's posts print


The first draft of the tag page came from Christian Specht's great guide. This created a bulleted list of all posts in that tag, which I edited to show the post content in the same way the main page does. The drawback with this method is that it is Case-Sensitive, and a new folder and index page must be made for the individual tags you want to access. The code from the above guide is
{% for post in site.tags[page.tag] %}
while to make the search Case-Insensitive I needed
{% for post in site.posts %}
{% assign tagArray = "" | split: "/" %}
{% for item in post.tags %}
{% assign tagDowncased = item | downcase %}
{% assign tagArray = tagArray | push: tagDowncased %}
{% endfor %}
{% if tagArray contains page.tag %}

2nd version from this stackoverflow question

When we print our blog out to give to judges, we use a different version of the main index page that doesn't truncate the post. Last year we didn't have to worry about printing old posts, but now we needed a way to stop when a certain date was reached. This may seem like a trivial thing, just add an if statement in the already existing loop, but liquid isn't the most cooperative of languages. I couldn't find someone with the exact question as my own, but this question about matching years was similar enough to give me a place to start. I used the Shopify website's date filter guide and this extremely helpful Shopify Cheat Sheet to get the date as "YYYYMMDD" This returned the date as a String, which was converted to an integer by adding 0.
Final version:
{% for post in site.posts %}
{% capture comparableDate %} {{ | date: "%Y%m%d" }} {% endcapture %}
{% assign comparableDate = comparableDate | plus: 0 %}
{% if comparableDate >= 20150424 %}

The blog back-end probably won't be touched during normal practice times anymore as competition deadlines are threateningly close.

Written on December 27, 2015