2019-09-11 06:19:34 +02:00
|
|
|
{% if include.selector %}
|
|
|
|
{% assign selector = include.selector %}
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
{% if include.seed %}
|
|
|
|
{% assign seed = include.seed %}
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
|
|
|
|
<script>
|
2019-09-20 06:40:14 +02:00
|
|
|
function setRandomBgImage(selector, seed, zoom = 1) {
|
2019-09-11 06:19:34 +02:00
|
|
|
var element = document.querySelector(selector);
|
|
|
|
if (!element) return;
|
|
|
|
var pattern = Trianglify({
|
2019-09-20 06:40:14 +02:00
|
|
|
width: screen.width * zoom,
|
|
|
|
height: element.offsetHeight * zoom,
|
2019-09-11 06:19:34 +02:00
|
|
|
seed: seed
|
|
|
|
});
|
2019-09-20 06:40:14 +02:00
|
|
|
|
|
|
|
var image = document.createElement("div");
|
|
|
|
image.style.backgroundImage = "url(" + pattern.png() + ")";
|
|
|
|
element.appendChild(image);
|
2019-09-11 06:19:34 +02:00
|
|
|
}
|
|
|
|
|
2019-09-20 06:40:14 +02:00
|
|
|
setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
|
2019-09-11 06:19:34 +02:00
|
|
|
</script>
|