single image upload field, abstract upload class a bit

1 files changed, 36 insertions, 16 deletions

diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 253b275..c9a4d92 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -22,15 +22,48 @@
     {% elsif type == 'video' %}
       <div class="video group {% if spec.value.url %}loaded{% endif %}">
         <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
-        <input name="{{name}}[type]" type="text" value="{{spec.value.type}}" class="video-type" hidden>
-        <input name="{{name}}[token]" type="text" value="{{spec.value.token}}" class="video-token" hidden>
+        <input name="{{name}}[type]" type="hidden" value="{{spec.value.type}}" class="video-type" hidden>
+        <input name="{{name}}[token]" type="hidden" value="{{spec.value.token}}" class="video-token" hidden>
         <label>Title</label>
         <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title">
         <label>Thumbnail</label>
         <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
       </div>
+    {% elsif type == 'image' %}
+      <div class="image group {% if spec.value.uri %}loaded{% endif %}">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*">
+            <button>+ Add image</button>
+          </div>
+          <input class="add-image-url" type="text" placeholder="+ Add URL">
+        </div>
+        <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}}</textarea>
+          <img src="{{spec.value.uri}}" alt="{{spec.value.caption}}">
+          <button class="remove-image">x</button>
+        </div>
+      </div>
     {% elsif type == 'captioned-image-list' %}
-      <div class="image group loaded">
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-image-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" id="captioned-image-template">
+          <li class="image-element">
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]"></textarea>
+            <img alt="{{image.caption}}">
+            <button class="remove-image">x</button>
+          </li>
+        </script>
+
         <ol>
           {% for image in spec.value %}
             <li class="image-element">
@@ -41,19 +74,6 @@
             </li>
           {% endfor %}
         </ol>
-        <div class="add-image-button">
-          <input id="file" type="file" accept="image/*" multiple>
-          <button>+ Add images</button>
-        </div>
-        <input id="add-image-url" type="text" placeholder="+ Add URL">
-        <script type="text/html" id="captioned-image-template">
-          <li class="image-element">
-            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
-            <textarea class="caption" name="{{name}}[][caption]"></textarea>
-            <img alt="{{image.caption}}">
-            <button class="remove-image">x</button>
-          </li>
-        </script>
       </div>
     {% elsif type == 'meta' %}
       <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">