1 files changed, 20 insertions, 5 deletions
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
index 70e1965..f9a2fa6 100644
--- a/design/templates/admin/insert_images.html
+++ b/design/templates/admin/insert_images.html
@@ -31,8 +31,18 @@ figure {
 </style>
 <script src="/static/jquery.tools.min.js"></script>
 <script>
-// execute your scripts when the DOM is ready. this is a good habit
-
+function buildVideo(video_url, id, c) {
+    html = '<div class="embed-container">\n\t<video poster="" loop="true" preload="auto" id="'+id+'" class="vidauto';
+    if (c) {
+        html += c+'"';
+    } else {
+        html += '"';
+    }
+    html += '>\n\t\t<source src="'+video_url+'.webm" type="video/webm">\n';
+    html += '\t\t<source src="'+video_url+'.mp4" type="video/mp4">\n';
+    html += '\t\tYour browser does not support video playback via HTML5.\n\t</video>\n</div>';
+    return html;
+}
 function buildImage(image_url, id, c, caption) {
     html = '<img src="'+image_url+'" id="image-'+id+'" class="';
     if (c) {
@@ -59,7 +69,11 @@ $(function(){
     });
     
     $('.insert').click(function(){
-        var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption'));
+        if ($(this).attr('data-is-video')) {
+            var code = buildVideo($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'));
+        } else {
+            var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption'));
+        }
         var el = parent.document.getElementById('{{textarea_id}}');
         var start = el.selectionStart
         var end = el.selectionEnd
@@ -94,13 +108,14 @@ $(function(){
             <img src="{% get_image_by_size image 'tn' %}" />
             <figcaption>{{image.id}} - {{image.title}} {% if image.caption %}&ndash; {{image.caption}}{%endif%}</figcaption>
         </figure>
-        <ul class="actions">
+        <ul class="actions">{%if image.is_video %}
+            <li><a data-is-video="true" data-src="{{image.get_video_base_url}}" data-id="{{image.id}}" data-class="vid" class="insert" href="">Insert video</a>{%else%}
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" class="insert" href="">full width</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" class="insert" href="">column width</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" data-caption="true" class="insert" href="">full width cap</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" data-caption="true" class="insert" href="">column width cap</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="cluster pic" class="insert" href="">cluster</a></li>
-            <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>
+            <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>{%endif%}
         </ul>
         </div>
 {% endfor %}