6 files changed, 81 insertions, 23 deletions

diff --git a/app/node_modules/okschema/index.js b/app/node_modules/okschema/index.js
index 6c7cf96..355a2ee 100644
--- a/app/node_modules/okschema/index.js
+++ b/app/node_modules/okschema/index.js
@@ -39,6 +39,33 @@ var types = {
         }];
       }
     }
+  },
+  'captioned-image-list': {
+    parent: [{
+      uri: { type: 'string' }, // TODO Implement URI type
+      caption: { type: 'string' }
+    }],
+    assertValid: function(spec, value) {
+      var message;
+      var actual;
+      if (!value || !value.length) {
+        throw [{
+          message: 'Not an array',
+          expected: JSON.stringify(this.parent),
+          actual: value
+        }];
+      } else {
+        value.forEach(function(obj) {
+          if (!(obj.uri && obj.caption)) {
+            throw [{
+              message: 'Array contains invalid object',
+              expected: JSON.stringify(this.parent),
+              actual: obj
+            }];
+          }
+        });
+      }
+    }
   }
 }
 
diff --git a/app/node_modules/oktemplate/index.js b/app/node_modules/oktemplate/index.js
index dafe5e6..a37f78e 100644
--- a/app/node_modules/oktemplate/index.js
+++ b/app/node_modules/oktemplate/index.js
@@ -18,7 +18,7 @@ var filters = {
     try {
       return '<pre>' + stringify(obj) + '</pre>';
     } catch (e) {
-      return '';
+      return 'Error stringifying';
     }
   }
 
diff --git a/examples/db.json b/examples/db.json
index f7936d5..6c2d428 100644
--- a/examples/db.json
+++ b/examples/db.json
@@ -6,18 +6,52 @@
       "description": "really a very tasty bread! yup yes",
       "color": "green",
       "id": "pretzel",
-      "title": "Pretzel Chips"
+      "title": "Pretzel Chips",
+      "images": [
+        {
+          "uri": "cool",
+          "caption": "cool"
+        }
+      ],
+      "video": {
+        "url": "",
+        "type": "",
+        "token": "",
+        "title": "",
+        "thumb": ""
+      }
     },
     {
       "type": "bagel",
       "description": "very good and dense bread",
-      "id": "bagel"
+      "id": "bagel",
+      "title": "nice",
+      "color": "blue",
+      "images": [
+        {
+          "uri": "http://del.h-cdn.co/assets/cm/15/10/54f928d7ada8d_-_1347910942518.jpg",
+          "caption": "boop"
+        }
+      ],
+      "video": {
+        "url": "https://vimeo.com/112498725",
+        "type": "vimeo",
+        "token": "112498725",
+        "title": "FW14-2H-VIDEO-V4 2",
+        "thumb": "http://i.vimeocdn.com/video/497493142_640.jpg"
+      }
     },
     {
       "type": "pumpernickel",
       "description": "grandma's recipe",
       "id": "pumpernickel",
-      "title": "Pumpernickel"
+      "title": "Pumpernickel",
+      "images": [
+        {
+          "uri": "cool",
+          "caption": "cool"
+        }
+      ]
     }
   ],
   "page": [
diff --git a/examples/index.js b/examples/index.js
index 1a5fbbe..95d2bcf 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -16,7 +16,7 @@ var app  = okcms.createApp({
       description: {type: 'text'},
       color: {type: 'enum', options: ["red","blue","green"]},
       video: {type: 'video'},
-      images: {type: 'images'},
+      images: {type: 'captioned-image-list'}
     }
   },
 
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 0cb732e..0ba6286 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -139,7 +139,8 @@ label {
 
 .main.resource form input,
 .main.resource form textarea,
-.main.resource form select {
+.main.resource form select,
+.main.resource form img {
   display: block;
   float: left;
   width: 25em;
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index e79ff14..3a33f95 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -3,7 +3,7 @@
   {% assign spec = pair[1] %}
   {% assign type = spec.type %}
 
-  <div class="property {% if spec.disabled %}hidden{% endif %}">
+  <div class="property {{type}}">
     <label for="{{name}}">{{name | capitalize}}</label>
 
     {% if type == 'string' %}
@@ -38,24 +38,20 @@
         <label>Thumbnail</label>
         <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
       </div>
-    {% elsif type == 'images' %}
-      <div class="images">
+    {% elsif type == 'captioned-image-list' %}
+      <ol>
         {% for image in spec.value %}
-          <div class="image group">
-            <input name="{{name}}[][url]" type="text" value="{{image.url}}" class="image-url">
-            <label>Caption</label>
-            <input name="{{name}}[][title]" type="text" value="{{image.title}}" class="image-title" placeholder="Title">
-          </div>
+          <li class="image-element">
+            <img src="{{image.uri}}" alt="{{image.caption}}">
+            <input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
+            <div class="clear"></div>
+            <input type="text" name="{{name}}[][caption]" value="{{image.caption}}">
+            <button class="remove-image">-</button>
+          </li>
         {% endfor %}
-      </div>
-      <script type="text/html" id="images-template">
-        <div class="image group loaded">
-          <input name="{{name}}[][url]" type="text" value="" class="url">
-          <label>Caption</label>
-          <input name="{{name}}[][title]" type="text" value="" class="caption">
-        </div>
-      </script>
-      <input type="file" id="file" multiple>
+      </ol>
+      <input class="file-upload" style="display: none;" type="file" accept="image/*">
+      <button class="add-image">+</button>
     {% else %}
       <p><pre style="color: red">Admin template doesn't support '{{type}}' properties!</pre></p>
     {% endif %}