diff options
Diffstat (limited to 'themes/okadmin/templates/partials/inputs.liquid')
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 72 |
1 files changed, 66 insertions, 6 deletions
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 4d31413..1b8d6b4 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -40,15 +40,75 @@ <input type="file" accept="image/*"> <button>+ Add image</button> </div> - <input class="add-image-url" type="text" placeholder="+ Add URL"> + <input class="add-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> + <button class="remove">x</button> </div> </div> + {% elsif type == 'media-list' %} + <div class="media-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-url" type="text" placeholder="+ Add Image/Video URL"> + </div> + + <script type="text/html" class="image-template"> + <li class="image-element"> + <input class="uri" type="hidden" name="{{name}}[][uri]" value=""> + <textarea class="caption" name="{{name}}[][caption]"></textarea> + <img> + <button class="remove">x</button> + </li> + </script> + + <script type="text/html" class="video-template"> + <li class="video-element"> + <div style="float: left"> + <input name="{{name}}[][type]" type="hidden" class="video-type" hidden> + <input name="{{name}}[][token]" type="hidden" class="video-token" hidden> + <label>Caption</label> + <input name="{{name}}[][title]" type="text" class="video-title"> + <label>Thumbnail</label> + <input name="{{name}}[][thumb]" type="text" class="video-thumb"> + </div> + <img> + <button class="remove">x</button> + </li> + </script> + + <ol> + {% for image in spec.value %} + {% if image.token %} + <li class="video-element"> + <div style="float: left"> + <input name="{{name}}[][type]" value="{{image.type}}" type="hidden" class="video-type" hidden> + <input name="{{name}}[][token]" value="{{image.token}}" type="hidden" class="video-token" hidden> + <label>Caption</label> + <input name="{{name}}[][title]" value="{{image.title}}" type="text" class="video-title"> + <label>Thumbnail</label> + <input name="{{name}}[][thumb]" value="{{image.thumb}}" type="text" class="video-thumb"> + </div> + <img src="{{image.thumb}}"> + <button class="remove">x</button> + </li> + {% else %} + <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}}"> + <button class="remove">x</button> + </li> + {% endif %} + {% endfor %} + </ol> + </div> {% elsif type == 'captioned-image-list' %} <div class="image-list group loaded"> <div class="fields"> @@ -56,15 +116,15 @@ <input type="file" accept="image/*" multiple> <button>+ Add images</button> </div> - <input class="add-image-url" type="text" placeholder="+ Add URL"> + <input class="add-url" type="text" placeholder="+ Add URL"> </div> - <script type="text/html" id="captioned-image-template"> + <script type="text/html" class="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> + <button class="remove">x</button> </li> </script> @@ -74,7 +134,7 @@ <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}}"> - <button class="remove-image">x</button> + <button class="remove">x</button> </li> {% endfor %} </ol> |