fix issue with single input fields, store image width/heightv0.1.34

3 files changed, 36 insertions, 12 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 15b8781..e539a71 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -291,7 +291,9 @@ button, input[type=submit] {
   height: 7em;
 }
 .main.resource form img {
-  width: 10em;
+  width: auto;
+  height: auto;
+  max-width: 10em;
   max-height: 6em;
   border: 0;
 }
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 59fc6ae..578d99f 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -9,8 +9,10 @@ var OKAdmin = function(){
       var url = media.url
       var imageTemplate = $(".image-template", parent).html()
       var $el = $(imageTemplate)
-      $el.find(".uri").val(url)
-      $el.find("img").attr("src", url)
+      $el.find(".uri").val(media.url)
+      $el.find(".image-width").val(media.width)
+      $el.find(".image-height").val(media.height)
+      $el.find("img").attr("src", media.url)
       $("ol", parent).prepend($el)
     }
   })
@@ -44,8 +46,10 @@ var OKAdmin = function(){
       var url = media.url
       var imageTemplate = $(".image-template", parent).html()
       var $el = $(imageTemplate)
-      $el.find(".uri").val(url)
-      $el.find("img").attr("src", url)
+      $el.find(".uri").val(media.url)
+      $el.find(".image-width").val(media.width)
+      $el.find(".image-height").val(media.height)
+      $el.find("img").attr("src", media.url)
       $("ol", parent).prepend($el)
     }
     uploader.addMedia = function(media){
@@ -103,11 +107,13 @@ var OKAdmin = function(){
     var $el = $(this)
     var uploader = new OKUpload ()
     uploader.bind( this )
-    uploader.add = function(url){
-      console.log(url)
-      $el.find(".uri").val(url)
+    uploader.add = function(media){
+      console.log(media)
+      $el.find(".uri").val(media.url)
       $el.find(".caption").val("")
-      $el.find("img").attr("src", url).show()
+      $el.find(".image-width").val(media.width)
+      $el.find(".image-height").val(media.height)
+      $el.find("img").attr("src", media.url).show()
       $el.addClass("loaded")
     }
   })
@@ -117,6 +123,8 @@ var OKAdmin = function(){
       var $el = $(this).closest(".image")
       $el.removeClass('loaded')
       $el.find(".uri").val("")
+      $el.find(".image-width").val("")
+      $el.find(".image-height").val("")
       $el.find(".caption").val("")
       $el.find("img").attr("src", "")
     }
@@ -141,7 +149,7 @@ var OKAdmin = function(){
       $el.parent().addClass("loaded")
       $el.parent().find(".video-type").val( media.type )
       $el.parent().find(".video-token").val( media.token )
-      $el.parent().find(".video-uri").val( media.uri )
+      $el.parent().find(".video-uri").val( media.url )
       $el.parent().find(".video-title").val( media.title )
       $el.parent().find(".video-thumb").val( media.thumbnail )
       $el.parent().find(".video-width").val( media.width )
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 373e580..e71f4ad 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -48,6 +48,8 @@
         <div class="image-element">
           <input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}">
           <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption | escape}}</textarea>
+          <input type="hidden" name="{{name}}[width]" value="{{spec.value.width}}" class="image-width">
+          <input type="hidden" name="{{name}}[height]" value="{{spec.value.height}}" class="image-height">
           <img src="{{spec.value.uri}}" alt="{{spec.value.caption | escape}}">
           <button class="remove">x</button>
         </div>
@@ -154,6 +156,8 @@
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <input type="hidden" name="{{name}}[][type]" value="image">
+            <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
+            <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
             <img>
             <button class="remove">x</button>
           </li>
@@ -165,8 +169,8 @@
             <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
             <input name="{{name}}[][token]" type="hidden" class="video-token" hidden>
             <input name="{{name}}[][uri]" type="hidden" class="video-uri" hidden>
-            <input name="{{name}}[][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
-            <input name="{{name}}[][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
+            <input name="{{name}}[][width]" type="hidden" class="video-width" hidden>
+            <input name="{{name}}[][height]" type="hidden" class="video-height" hidden>
             <label>Caption</label>
             <input name="{{name}}[][title]" type="text" class="video-title">
             <label>Thumbnail</label>
@@ -249,6 +253,8 @@
               <li class="image-element">
                 <label>Caption</label>
                 <input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
+                <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="image-width" hidden>
+                <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="image-height" hidden>
                 <textarea class="caption" name="{{name}}[][caption]">{{image.caption | escape}}</textarea>
                 <input type="hidden" name="{{name}}[][type]" value="image">
                 <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
@@ -271,6 +277,8 @@
         <script type="text/html" class="image-template">
           <li class="image-element">
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
+            <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <img>
             <button class="remove">x</button>
@@ -281,6 +289,8 @@
           {% for image in spec.value %}
             <li class="image-element">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
               <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
@@ -303,6 +313,8 @@
             <img>
             <button class="remove">x</button>
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width">
+            <input type="hidden" name="{{name}}[][height]" class="image-height">
             <input class="caption" name="{{name}}[][label]" placeholder="Name">
             <input class="caption" name="{{name}}[][caption]" placeholder="Email">
           </li>
@@ -314,6 +326,8 @@
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
               <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Name">
               <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Email">
             </li>