Creating a Random Block for Ads or Messages in Jekyll

» Posted on May 2 2015 in Code

I wanted a way to insert an ad block into a post, but since the site is static, I wasn’t sure how to do it. I didn’t want to hard code ads into each video/post, and didn’t want to just have one that I stuck into the layout file. I found something on stackoverflow where someone asked about random numbers for listing articles. One of the answers had a bit of code for creating a random quote from a data file which is pretty much the same idea as what I wanted.

The idea in the stackoverflow article didn’t quite work for me as I wanted to have a random bit inserted into every post. The code used the date/time, which at runtime ends up being the same on every post, so it didn’t work. Instead, I use the size of the page title (number of characters).

There are two components to what I did - an include, and a data file.

First, the data file. The basic parts to my “ad” are:

  • image
  • url to go to when clicked
  • some text to display below the image

This is what the data file looks like, I named it ads.yaml

- image: pro-lab-prints-logo14.png
  text: "Simple quantity pricing, Fuji Pro paper, nice people" 

- image: pro-lab-prints-logo14.png
  text: "Cleverly hidden in a tiny stripmall in San Diego, we ship throughout the US." 

- image: pro-lab-prints-logo14.png
  text: "One lab, one world" 

- image: pro-lab-prints-logo14.png
  text: "AKA Fromex Photo Lab, Inc." 

The second part is the Include File - which I called randomizer.html. Inside of this I put:

 {% assign hours= site.time | date: "%H" | plus:100 %}
 {% assign random = page.title.size | plus: hours | modulo: %}
 <a title="Need a quality print lab? Try our Lab, - AKA Fromex Photo" 
 href="{{[random].url}}" rel="nofollow">
 <div class="ad-div">
 <p class="ad-p">
 <img class="img-responsive-cent" src="/assets/img/{{[random].image}}"><br />
 {{[random].text }}</p></div></a>

Here I get the hours of the current time {% assign hours = site.time | date: "%H" | plus:100 %} and add something to it in case it is zero (100 is just an arbitrary choice), then add this to the page title size (number of characters in the title), divide that by the number of ads I have in the data file, and get the remainder (modulo). I don’t think this is truly random, it seems like certain numbers are more likely to come up than others, but so far this has been the best result for what I am trying to do.

The remainder can never be more than the total number of items I have in the ads.yaml file. So if I only have 2 ads, the remainder can only be 0 or 1. Then you can use this number - [random] to get that particular set of data by using[random].image or whatever part of the data you need. I use the current time (hours) as an extra randomizer - so everytime I generate the site the ads rotate (assuming the hour value is different).

Then all I do is put the Include where ever I want an ad to be by putting {% include randomizer.html %}.

Here is is an ad:

Simple quantity based pricing, Fuji Pro paper, nice people

Obviously this is not random on the users end, if you refresh the browser the ad will not change. This just makes it so that when the site is built by jekyll all the posts get a random ad on them.

When building the site, there are two things that effect the ‘randomness’ of the add: the number of ads in the data file, and the hour value of the build time.

edited 05-16-2015 changed first variable from minutes to hours - sometimes all adds come back as the first ad so the modulo was 0. Changing to use the hour as the modifier helps in finding why it is not working (it stays the same longer)

edited - 05-17-2015 switched the random calculation from multiplying the title size/count by the hours variable to adding the hours variable to the title size/count. Multiplying sometimes caused problems, for instance if the ‘hours’ variable was divisible by the number of adds then the modulo would be 0 for all posts.