Generating a random number for use in scss.liquid file

New Member
1 0 0

I am trying to use random numbers to build a picture url that gets used in the styles.scss.liquid file. I figured out how to do this within the file itself, but the cache is preventing the number from being regenerated each time the page is reloaded, so I then tried to use javascript to do this. I don't know how to use javascript inline in the scss.liquid file so I made a js file that does it, but now I am unsure how get the javascript variable from the js file to use it in the scss.liquid file. 

This is the code I am using in the styles.scss.liquid:

{% assign min = 1 %}
{% assign max = 4 %}
{% assign diff = max | minus: min %}
{% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min %}
{% assign randomPicture = "slideshow_" %}
{% assign randomPicture = randomPicture | append: randomNumber %}
{% assign randomPicture = randomPicture | append: ".jpg" %}

#slide-1 .bcg {background-image:url({{ randomPicture | asset_url }}); }
#slide-1 .hsContainer { height: {{ settings.image_1_height }}px; }

And this is the javascript code

var randNum = Math.random(4);
var randPicture = "slideshow_" + toString(randNum) + ".jpg";

I was initially trying to put the randPicture variable from the javascript into the scss.liquid, but obviously just getting the random number into the scss.liquid file would be very helpful as well.

0 Likes