showing photos in framer

features/trumpeter.feature

@@ -44,6 +44,7 @@ Feature: Creating a new post
     And I upload a fixture picture with filename "button.gif"
     And I start the framing process
     Then I should see "This is hella customized" in the framer preview
+#    And I should see the image "button.gif"
     When I select the template "note"
     Then I should see an "note" framer preview
     When I finalize my frame

public/javascripts/app/forms/post_form.js

@@ -29,6 +29,7 @@ app.forms.Post = app.forms.Base.extend({
     this.model.set(_.inject(this.formAttrs, setValueFromField, {}))
     //pass collections across
     this.model.photos = this.pictureForm.photos
+    this.model.set({"photos": this.model.photos.toJSON() })
 
     function setValueFromField(memo, attribute, selector){
       var selectors = form.find(selector);

public/stylesheets/sass/new-templates.scss

@@ -226,7 +226,7 @@ $pane-width: 420px;
 
 .photo-fill {
   @include background-cover();
-
+  z-index : -5000; //so the framer controls don't get lost
   position: absolute;
   top: 0;
   left: 0;
@@ -250,6 +250,7 @@ $pane-width: 420px;
 }
 
 .rich-media {
+  z-index : -5000; //so the framer controls don't get lost
   position: absolute;
   height: 100%;
   width: 100%;