{% load get_image_by_size %} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> .item-wrapper { display: flex; flex-wrap: wrap; margin-bottom: 6px; font-family: sans-serif; font-size: 11px; padding: 6px 0 4px; border-top: #ccc 1px solid; } .item { margin: 0;} .item img { margin: 0 0 4px 0;} figure { max-width: 180px; } .actions { list-style-type: none; margin: 0 0 0 10px; padding: 0; } .actions li { margin: 3px 0; } .actions a { color: #666; } </style> </head> <body> <input type="button" value="Refresh" onClick="window.location.reload()"> <button id="add_id_image" onClick="window.parent.open('/admin/media/luximage/add/?_to_field=id&_popup=1')">Upload Image <img src="/static/admin/img/icon-addlink.svg" alt="Add"> </button> <div class="up-wrapper">{% for object in object_list %} <div class="item-wrapper images"> {% if object.get_type != "Audio" %} <figure class="item" > <img src="{% if object.get_type == "LuxImage" %}{% get_image_by_size object 'tn' %}{%else%}{{object.video_poster.url}}" style="max-width: 150px{%endif%}" /> <figcaption>{{object.id}} {% if object.caption %}– {{object.caption}}{%endif%}</figcaption> </figure> <ul class="actions">{%if object.get_type == "LuxVideo" %} <li><a data-is-video="true" data-video-mp4="{{object.video_mp4.url}}" data-video-webm="{{object.video_webm.url}}" data-id="{{object.id}}" data-class="vid" data-poster="{{object.video_poster.url}}" data-ytlink="{{object.youtube_url}}" onclick="insertImage(this);return false;" class="insert" href="#">Insert video</a>{%else%}{% get_image_by_size object 'admin_insert' as tn %} <li><a data-src="{{tn}}" data-id="{{object.id}}" data-class="picwide" onclick="insertImage(this);return false;" href="#" >full width</a></li> <li><a data-src="{{tn}}" data-id="{{object.id}}" data-class="picwide" data-caption="true" onclick="insertImage(this);return false;" href="#">full width cap</a></li> <li><a data-src="{{tn}}" data-id="{{object.id}}" data-class="cluster pic66" onclick="insertImage(this);return false;" href="#">cluster</a></li> <li><a data-src="{{tn}}" data-id="{{object.id}}" data-class="picfull" onclick="insertImage(this);return false;" href="#">column width</a></li> <li><a data-src="{{tn}}" data-id="{{object.id}}" data-class="picfull" data-caption="true" onclick="insertImage(this);return false;" href="#">column width cap</a></li> <li><a onclick='openInNewTab("/admin/medij/luximage/{{object.pk}}/change/");' href="#">Edit Image</a></li>{%endif%} </ul> {% else %} <figure class="item" > <img src="/media/img/audio_icon.png" style="max-width: 50px" /> </figure> <ul class="actions"> <li><a data-is-audio="true" data-mp3="{{object.mp3.url}}" data-ogg="{{object.ogg.url}}" data-id="{{object.id}}" data-class="audio" onclick="insertImage(this);return false;" class="insert" href="#">Insert audio</a> <li><a onclick='openInNewTab("/admin/recordings/audio/{{object.pk}}/change/");' href="#">Edit Recording</a></li> </ul> {% endif %} </div> {% endfor %} </div> <!-- "next page" action --> <a class="nextPage browse right"></a> <script> function buildVideo(video_mp4, video_webm, id, c, poster, ytlink) { html = '<div class="self-embed-container">\n\t<video poster="'+poster+'" controls="true" loop="false" preload="auto" id="'+id+'" class="vidauto'; if (c) { html += c+'"'; } else { html += '"'; } html += '>\n\t\t<source src="'+video_webm+'" type="video/webm">\n'; html += '\t\t<source src="'+video_mp4+'" type="video/mp4">\n'; html += '\t\tYour browser does not support video playback via HTML5.\n\t</video>\n'; html += '\t<a class="figcaption" href="'+ytlink+'">Watch on YouTube</a>\n</div>'; return html; } function buildImage(image_url, id, c, caption) { html = '<img src="'+image_url+'" id="image-'+id+'" class="'; if (c) { html += c; } if (caption) { html += ' caption" />'; } else { html += '" />'; } return html; } function buildAudio(audio_mp3, audio_ogg) { html = '<audio controls="" preload="auto">\n\t<source src="'+audio_mp3+'">\n\t' html += '<source src="'+audio_ogg+'">\n\t' html += 'Sorry, your browser does not support audio in HTML\n</audio>' return html; } function openInNewTab(url) { var win = window.open(url, '_blank'); win.focus(); return false; } function insertImage(item) { if (item.dataset.isVideo) { var code = buildVideo(item.dataset.videoMp4, item.dataset.videoWebm, item.dataset.id, item.dataset.class, item.dataset.poster, item.dataset.ytlink); } else if (item.dataset.isAudio) { var code = buildAudio(item.dataset.mp3, item.dataset.ogg); } else { var code = buildImage(item.dataset.src, item.dataset.id, item.dataset.class, item.dataset.caption); } var el = parent.document.getElementById('{{textarea_id}}'); var start = el.selectionStart; var end = el.selectionEnd; var text = el.value; var before = text.substring(0, start); var after = text.substring(end, text.length); el.value = (before + code + after); el.selectionStart = el.selectionEnd = start + code.length; el.focus(); } </script> </body> </html>