diff --git a/features/trumpeter.feature b/features/trumpeter.feature
index c29f3b7a6c63356b1a3f8067ae430898160917f8..06c9f72c3d24922a280a7488f98d4c6a5fd91bab 100644
--- a/features/trumpeter.feature
+++ b/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
diff --git a/public/javascripts/app/forms/post_form.js b/public/javascripts/app/forms/post_form.js
index 275af46d9847008ffee7226ed5e3c6a532ce924b..9acc56ab4d241015a954a31cb37cb6ea07aca3a0 100644
--- a/public/javascripts/app/forms/post_form.js
+++ b/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);
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 4b2bfdfd8fbed94648464235d4108218b6b66e74..3c7c22d7dd4504a83fb5565e2e324ac7c7d6716f 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/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%;