allow generic urls in media fieldv0.1.21

1 files changed, 34 insertions, 7 deletions

diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 4acb435..77ee7a4 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -29,6 +29,8 @@
         <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
         <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>
+        <input name="{{name}}[width]" value="{{spec.value.width}}" type="hidden" class="video-width" hidden>
+        <input name="{{name}}[height]" value="{{spec.value.height}}" type="hidden" class="video-height" hidden>
         <label>Title</label>
         <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title">
         <label>Thumbnail</label>
@@ -143,11 +145,12 @@
             <input type="file" accept="image/*" multiple>
             <button>+ Add images</button>
           </div>
-          <input class="add-url" type="text" placeholder="+ Add Image/Video URL">
+          <input class="add-url" type="text" placeholder="+ Add Image/Video/Link URL">
         </div>
 
         <script type="text/html" class="image-template">
           <li class="image-element">
+            <label>Caption</label>
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <img>
@@ -160,6 +163,8 @@
             <div style="float: left">
             <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
             <input name="{{name}}[][token]" type="hidden" class="video-token" 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>
             <label>Caption</label>
             <input name="{{name}}[][title]" type="text" class="video-title">
             <label>Thumbnail</label>
@@ -170,13 +175,24 @@
           </li>
         </script>
 
+        <script type="text/html" class="link-template">
+          <li class="link-element">
+            <input class="uri" type="text" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption"></textarea>
+            <input type="hidden" name="{{name}}[][type]" value="link">
+            <button class="remove">x</button>
+          </li>
+        </script>
+        
         <ol>
           {% for image in spec.value %}
-            {% if image.token %}
+            {% if image.type and (image.type == "vimeo" or image.type == "youtube" or image.type == "video") %}
               <li class="video-element">
                 <div style="float: left">
                 <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
                 <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
+                <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
+                <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
                 <label>Caption</label>
                 <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title}}" type="text" class="video-title">
                 <label>Thumbnail</label>
@@ -185,11 +201,22 @@
                 <img src="{{image.thumb}}">
                 <button class="remove">x</button>
               </li>
+            {% elsif image.type and image.type == "link" %}
+              <li class="link-element">
+                <label>URL</label>
+                <input class="uri" type="text" name="{{name}}[][uri]" value="{{image.uri}}">
+                <label>Caption</label>
+                <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption">{{image.caption}}</textarea>
+                <input type="hidden" name="{{name}}[][type]" value="link">
+                <button class="remove">x</button>
+              </li>
             {% else %}
               <li class="image-element">
+                <label>Caption</label>
                 <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
                 <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
-                <img src="{{image.uri}}" alt="{{image.caption}}">
+                <input type="hidden" name="{{name}}[][type]" value="image">
+                <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
                 <button class="remove">x</button>
               </li>
             {% endif %}
@@ -210,7 +237,7 @@
           <li class="image-element">
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
-            <img alt="{{image.caption}}">
+            <img>
             <button class="remove">x</button>
           </li>
         </script>
@@ -220,7 +247,7 @@
             <li class="image-element">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
               <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea>
-              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
             </li>
           {% endfor %}
@@ -238,7 +265,7 @@
 
         <script type="text/html" class="image-template">
           <li class="image-element">
-            <img alt="{{image.caption}}">
+            <img>
             <button class="remove">x</button>
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <input class="caption" name="{{name}}[][label]" placeholder="Name">
@@ -249,7 +276,7 @@
         <ol>
           {% for image in spec.value %}
             <li class="image-element">
-              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <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 class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}" placeholder="Name">