Mixing handlebars.js and CSS - Random background image?

1
votes

I would like to set a randomly generated background image.

I am using Meteor and am calling Flickr API to provide a random image URL which I would like to set as my background image.

From what I've read, it seems that CSS is now the recommended way to set a background image. Is there a way to inject the dynamically generated url into the CSS? I can't seem to find examples showing mixing of Handlebars.js and CSS - is this possible? Or should I be avoiding CSS and setting the background image using the traditional HTML way?

I've been trying two different strategies:

1) To create the CSS attribute in the HTML with the url injected via handlebars - but I can't seem to concatenate the CSS attribute with Handlebars.

2) The other method I've tried is to create the CSS attribute as a variable in the template code, and to return that into the HTML via Handlebars, like so:

Template.backgroundImage.background = function(){
//runs function to generate url and add to Session object   
    FlickrRandomPhotoFromSet(setID);
//create variable with html and css attribute concatenated to url
var backgroundImage = '<div style="background-image: url('+Session.get("RandomURL")+')"></div>';
//return resultant variable to HTML via template
    return backgroundImage;
};

Then in the HTML I have inserted the following:

<template name="backgroundImage">
    {{background}}
</template>
3
cssmeteorhandlebars.js
Is it possibile to mix CSS style attribute info with a {{}} handlebars insertion? I can't seem to get this to work. – songololo
@muistooshort I have expanded the original question with some code examples, hopefully this is more clear. Thanks. – songololo

3 Answers

8
votes

This approach ended up working for me:

I'm using an internal stylesheet that I define as a template. The url is updated to match the randomly generated url:

<template name="backgroundImage">
  <style>
  body {
  background-image:url({{background}});
  background-repeat: no-repeat;
  background-position: right top;
  }
  </style>
1
votes

Meteor has a package built for meteor called random you can add with

meteor add random

If it is not included in your project already.

The Random.choice() method could help you e.g if you have an array of URLs

var myurls = ["http://www.url.com/1","http://www.url.com/2","http://www.url.com/3"];
var the_random_url = Random.choice(myurls);

Then as you mentioned alter the 'body' with css & a handlebars helper for {{background}}

<style>
    body {
        background-image:url({{background}});
        background-repeat: no-repeat;
        background-position: right top;
    }
</style>

Or edit it with jquery:

$('body').css({
    background-image:"url("+the_random_url+")",
    background-repeat: "no-repeat"
    background-position: "right top"
});
-1
votes

sugarjs provides a sample() method

http://sugarjs.com/api/Array/sample

or you can check source to write your own.

https://github.com/andrewplummer/Sugar/blob/master/lib/array.js#L906

Returns a random element from the array. If num is passed, will return num samples from the array.

i use this on my meteor.js project. use that api i get random elements after template rendered.