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

Reflections

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 %} {{ post.date | 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