Render a template background.

* Add the /templates/1/display route to render the template image at an optional width and height for the frontend.
* Add frontend code to render an automatically resizing background-image at the initialized width and height of the current screen dom element.

app/controllers/templates_controller.rb

@@ -93,6 +93,43 @@ def destroy
       format.xml  { head :ok }
     end
   end
+
+  # GET /template/1/display
+  # Render the template for display on a screen.
+  def display
+    @template = Template.find(params[:id])
+    @media = @template.media.original.first
+    @image = Magick::Image.from_blob(@media.file_contents).first
+
+    # Resize the image to a height and width if they are both being set.
+    # Round these numbers up to ensure the image will at least fill
+    # the requested space.
+    width = nil
+    height = nil
+    width = params[:height].to_f.ceil unless params[:height].nil?
+    height = params[:width].to_f.ceil unless params[:width].nil?
+
+    unless height.nil? or width.nil?
+      # There is a lengthy discussion of resizing options here:
+      # http://rmagick.rubyforge.org/resizing-methods.html.
+      # I am not factoring any information from that page into this choice.
+      @image.scale!(height, width)
+    end
+    case request.format
+      when Mime::Type.lookup_by_extension(:jpg)
+        @image.format = "JPG"
+      when Mime::PNG
+        @image.format = "PNG"
+    end
+
+    # Set some reasonable cache headers
+    response.headers["Last-Modified"] = CGI.rfc1123_date(@template.updated_at)
+    expires_in 36.hours, :public => true
+
+    send_data @image.to_blob,
+              :filename => "#{@template.name.underscore}.#{@image.format.downcase}",
+              :type => @image.mime_type, :disposition => 'inline'
+  end
 
   # GET /template/1/preview
   # Generate a preview of the template based on the request format.

config/routes.rb

@@ -31,6 +31,7 @@
     resources :positions
     member do
       get :preview
+      get :display
     end
     collection do
       post :import

public/frontend_js/template.js

@@ -1,6 +1,7 @@
 goog.provide('concerto.frontend.Template');
 
 goog.require('concerto.frontend.Position');
+goog.require('goog.Uri');
 goog.require('goog.array');
 goog.require('goog.debug.Logger');
 goog.require('goog.dom');
@@ -82,6 +83,8 @@ concerto.frontend.Template.prototype.load = function(data) {
   this.id = data.id;
   goog.dom.setProperties(this.div_, {'id': 'template_' + this.id});
 
+  this.render_();
+
   if (goog.isDefAndNotNull(data.positions)) {
     goog.array.forEach(data.positions, goog.bind(function(position_data) {
       var position = new concerto.frontend.Position(this);
@@ -92,6 +95,26 @@ concerto.frontend.Template.prototype.load = function(data) {
 };
 
 
+/**
+ * Render the template styles.
+ * Set the correect background image and stuff.
+ *
+ * @private
+ */
+concerto.frontend.Template.prototype.render_ = function() {
+  var size = goog.style.getSize(this.div_);
+
+  var background_url = new goog.Uri('/templates/' + this.id + '/display');
+  background_url.setParameterValue('height', size.height);
+  background_url.setParameterValue('width', size.width);
+
+  goog.style.setStyle(this.div_, 'background-image',
+      'url(' + background_url.toString() + ')');
+  goog.style.setStyle(this.div_, 'background-size', '100% 100%');
+  goog.style.setStyle(this.div_, 'background-repeat', 'no-repeat');
+};
+
+
 /**
  * Insert a div into the template.
  * We treat the template div as a private variable,