Red Moon Workshop Website

Recently I’ve been working on a showcase website for a group of game developers based in Austin Texas called Red Moon Workshop. I’ve worked with them in the past on other projects, so I was happy to get the opportunity to revisit. Red Moon Workshop creates cosmetic items for Valve titles such as Counter-Strike: Global Offensive and Dota 2. They are also working on their own title called Shot One.

The goal of the website was to create a blog-like hub for their projects which is easily readable on all screen sizes and devices. Because Red Moon Workshop is already familiar with the process of Git, I felt Jekyll and Github pages would be a perfect fit to base this on due to how low maintenance it is.

Blog vs Workshop

While this site was built as a blog, certain ‘posts’ did not need a full post body. Instead they needed to contain a preview slideshow, an excerpt, and a button that links to another website. This is mostly for their Steam Workshop content as they want traffic to be directed to each items respective workshop page. This is because Valve, the company behind the Steam Workshop, only considers accepting items with a high number of votes and views. Sadly Valve’s API does not expose almost any workshop methods, otherwise I would of utilized it to generate this content.

In order to separate the two post styles I dedicated a category flag for Jekyll to render the content differently. I also dedicated a number of other flags for things like YouTube embeds, and slideshow content.

Here’s an example of one of their posts:

---
layout: post
title:  "Courier | Redpaw"
date:   2013-10-23 23:08:34 -0500
category: courier
categories: workshop dota
label: Dota 2
workshop: https://steamcommunity.com/sharedfiles/filedetails/?id=188245962
youtube:
- HQrixhJaVCo
slides:
- /assets/posts/redpaw/slide_01.png
- /assets/posts/redpaw/slide_02.png
---

Hailing from the forests beneath the wailing mountains, a new friend and companion appears. Despite his small stature, he makes up for it in spirit.

In the next block you can see how anything categorized as workshop is rendered differently from content which is not. You’re also able to see how I’ve used for loops to generate the markup needed for the slideshow to generate.

{% if post.categories contains 'workshop' %}
<div class="col-md-6 col-sm-12 post-item text-center">
  <div class="post-item-inner">
    <div class="slider-small">
        {% for youtube in post.youtube %}
      <div>
        <div class="youtube"
             id="{{ youtube }}"
             style="width: 100%; height: 281px;">
        </div>
      </div>
      {% endfor %}
      {% for slide in post.slides %}
      <div>
        <img class="responsive-image" src="{{ site.devurl }}{{ slide }}" />
      </div>
      {% endfor %}
    </div>
    <h4 class="category bottom-border">{{ post.label }}: {{ post.category }}</h4>
    <h3>{{ post.title }}</h3>
    <p>{{ post.content }}</p>
  </div>
  <a class="btn btn-workshop" href="{{ post.workshop }}" role="button">Workshop Page</a>
</div>

{% else %}
<div class="col-md-6 col-sm-12 post-item text-center">
  <div class="post-item-inner">
    <img class="responsive-image" src="{{ site.devurl}}{{ post.image }}">
    <h4 class="category bottom-border">{{ post.label }}: {{ post.category }}</h4>
    <h3>{{ post.title }}</h3>
    <p>{{ post.excerpt | strip_html | truncatewords: 50 }}</p>
  </div>
  <a class="btn btn-workshop" href="{{ site.baseurl }}{{ post.url }}" role="button">Read More</a>
</div>
{% endif %}

Image and Repository Sizes

The biggest hurdle of this project was getting load times to an acceptable level. The site is very basic in terms of its framework usage, and uses just Bootstrap, jQuery and two plugins, however it has a ton of art assets. Each post contains anywhere from 6-12 pieces of artwork and a YouTube embed, which ends up making load times incredibly slow. It also wound up pushing the repository size uncomfortably close to Github’s limit.

Fortunately for the repository size, Red Moon Workshop has a decently fast FTP server which allowed me to move 90% of the assets away from Github. To do this I modified the _config.yaml file and added a devurl field which linked to the domain of their file server.

baseurl: ""
url: "http://redmoonworkshop.us"
devurl: "http://dev.redmoonworkshop.us/prod"
gems: [jekyll-paginate]

From there all internally linked content only needed to be changed from {{ site.baseurl }} to {{ site.devurl }}.

In the process of uploading the content to a different server, I also decided to tackle the file sizes. Each asset provided was almost 4k in resolution which was far too large no matter what your internet connection is. The first thing I did was run everything through an imagemagik mogrify script. This set the max width to 1200px wide, and because the content container is that size there’s no chance the assets could be any larger. I then used another script which compressed the file size as much as possible without losing any image quality. While I could of saved even more space if I used lossy compression, I didn’t want to run the risk of having any noticeable lack in quality, considering that showcasing the artwork is the entire point of the site. In addition to the changes I made to the image sizes, I also utilized the lazyLoad feature of Slick, which is the jQuery slideshow plugin the site uses. Lazy loading loads the slides on demand instead of them all being pulled in on the initial load.

YouTube Embeds

One of the biggest culprits of slow load times were the YouTube embeds. They are quite weighty, and can slow down the page rendering significantly when you have multiple on a single page. To solve this I borrowed a piece of jQuery by Alex Ulrich which makes a YouTube API call to get the thumbnail, and then replaces it with the embed iFrame when it’s clicked.

<div class="youtube"
     id="HQrixhJaVCo"
     style="width: 100%; height: 281px;">
</div>
var $youtube = $('.youtube');

$youtube.each(function() {
  // Based on the YouTube ID, we can easily find the thumbnail image
  $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');

  // Overlay the Play icon to make it look like a video player
  $(this).append($('<div/>', {'class': 'play'}));

  $(document).delegate('#'+this.id, 'click', function() {
      // Create an iFrame with autoplay set to true
      var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&enablejsapi=1";
      if ($(this).data('params')) iframe_url+='&'+$(this).data('params');

      // The height and width of the iFrame should be the same as parent
      var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() })

      // Replace the YouTube thumbnail with YouTube HTML5 Player
      $(this).replaceWith(iframe);
  });
});

Wrapping Up

If you’d like to see the entire website yourself it’s available at http://redmoonworkshop.us. I had a lot of fun creating it, and look forward to working on more projects with Red Moon Workshop in the future.

Site Preview

I’m always interested in new and exciting projects. If you have any feedback or if you’d like to collaborate on a project feel free to get in touch.