1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
{% 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>
|
