CODE

Show a random thing every page load

This could be used for showing a different hero image on a home page every time a person visits the page, or just to change things up a bit and give a bit of interest to a page.

Alex Bell's:
CODE Items Profile

v1.0.0

Ok, let’s just kick things off with saying this isn’t actually random, and it’s not triggered by page load. But for most users the effect will be that they see a different thing most times they load the page.

1. In the example below we have three things that we want to show “randomly”.

   <!-- Treehouse CODE v1.0.0 -->
   {% assign msTime = "now" | date: "%L" | plus: 0 %}
   {% if  msTime > 666 %}
       Show 1
   {% elsif  msTime > 333 %}
       Show 2
   {% elsif  msTime > 0 %}
      Show 3
   {% endif %}

2. If we had four things the code snippet would look like this:

   <!-- Treehouse CODE v1.0.0 -->
   {% assign msTime = "now" | date: "%L" | plus: 0 %}
   {% if  msTime > 750 %}
       Show 1
   {% elsif  msTime > 500 %}
       Show 2
   {% elsif  msTime > 250 %}
      Show 3
   {% elsif  msTime > 0 %}
      Show 4
   {% endif %}

   Explanation: We’re getting the milliseconds of the current time. If we have three things then we divide 1000 milliseconds by 3, and we show each thing 1/3 of the time, if we have 4 things then we divide 1000 millisecond by 4, and so on.

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.