Custom Post Type Indicator

Another day, another self imposed challenge to add something cool to my blog theme! 😀

This time I set out to add a 'post type indicator' for each blog post. This is basically a small visual indication as to what the post content is about. For example, a game controller for something video game related, or code brackets for something related to code (like this post).

My blog / website runs on blot so the system fully supports custom metadata types, it was simply a matter of figuring it all out. It wasn't an easy journey, but it was a fruitful one! I learned a lot about how various formats and technologies work. I went through the city of Mustache, and passed by the town of JSON, all while walking the familiar path of HTML and CSS.

I started out by building/designing the small container that I wanted the indicator to live in. This ended up being this:

Pretty simple CSS for this:

.post_type {
  display: block;
  font-size: 1.5em;
  line-height: 46px;
  color: #f1fa8c;
  background: #282a36;
  height: 45px;
  Width: 45px;
  border: solid 1.5px #bd93f9;
  border-radius: 20%;
  text-align: center;
  left: -12%;
  top: 40px;
  position: absolute;
}

Next, it was time to figure out what would go into the little boxes. Thanks to my wife, she turned me on to Font Awesome which was the perfect solution. This allowed me to build the template in such a way that I could use Font Awesome codes as the meta data string and customize each post with the perfect indicator icon!

The standard metadata in a blot post is:

Date: 2020-01-01 12:00:00  
Tags: Some, Sample, Tags

So I added another line: Type:

This Type metadata is the Font Awesome code you want to use for a post. For example if I wanted it to be a text based post, I can use fas fas-font to render a large 'A' inside the indicator box. Such as this:

Now that the individual components are there, it's time to pull it all together. Shoutout to David (seriously one of the nicest people ever) over at blot for helping me with this as well, I was heading down a path that would probably work but he showed me a way to accomplish it that was much easier.

Quick little heads up: for some reason it appears to be all but impossible to escape Mustache tags (This is a problem I will have to solve another day..) so I have replaced all the double curly braces for the Mustache tags with square brackets in this post. Just remember that all Mustache tags are enclosed with double curly braces.

The metadata value of Type is what I use with Mustache tags to auto populate the Font Awesome code into the html of the template. So in the example of this post, <a href="/entry-metadata-type">entry.metadata.type</a> turns into fas fa-font.

The HTML template for each post:

<span class="post_type">
	<span class="<a href="/entry-metadata-type">entry.metadata.type</a>"></span>
</span>

And with that, every post with a Type: metadata tag will have a little icon in the indicator box next to it.

There are four other small things to deal with concerning this setup. These are really just related to design and layout.

One. Since 'Pages' are essentially 'Posts' within blot, I added a line of CSS to each Page to hide this post indicator box. I have to imagine there is a better way to do this, but this will do for now.

/* Used to remove post type indicator from Pages */
.post_type {
    display: none;
}

Two. The Archives page needs smaller icons given the layout, so there is another CSS class for the archives pages .post_type_small. Here is an example of that:

/* Used on archive page */
.post_type_small {
  display: inline-block;
  font-size: 0.8em;
  line-height: 20px;
  color: #f1fa8c;
  background: #282a36;
  height: 20px;
  Width: 20px;
  border: solid 1.5px #bd93f9;
  border-radius: 20%;
  text-align: center;
  margin-right: 10px;
}

Three. On the main page of the blog "Entries", the Mustache tag of <a href="/entry-metadata-type">entry.metadata.type</a> needs to be <a href="/metadata-type">metadata.type</a>.

Four. I have this all turned off for mobile layout currently. Still working out how I want that look. This is what it looks like currently.

/* overrides for mobile media query */
.post_type {
    font-size: 1em;
    line-height: 28px;
    height: 25px;
    width: 25px;
    left: 0%;
    top: -30px;
  }

I think that's it! It was a fun journey and I am very happy with where I ended up. Hopefully if you were wondering about how to setup custom metadata on your blot site, this project may be of some help to you.