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>
<script src="/static/jquery.tools.min.js"></script>
<script>
function buildVideo(video_mp4, video_webm, id, c, poster) {
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</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(){
var ta = parent.document.getElementById('{{textarea_id}}');
$('#uploads li').click(function(){
$(this).children('.popup').show();
});
$('.popup .close').click(function(){
$(this).parent('.popup').hide();
return false;
});
$('.insert').click(function(){
if ($(this).attr('data-is-video')) {
var code = buildVideo($(this).attr('data-video-mp4'), $(this).attr('data-video-webm'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-poster'));
} 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
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()
$(this).parents('.popup').hide();
return false;
});
$('#refresh').click(function(){
location.reload(true);
return false;
});
});
</script>
</head>
<body>
<input type="button" value="Refresh" onClick="window.location.reload()">
<button id="add_id_image" onClick="window.parent.open('/admin/photos/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">
<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}} - {{object.title}} {% 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}}" class="insert" href="">Insert video</a>{%else%}
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picwide" class="insert" href="">full width</a></li>
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" class="insert" href="">column width</a></li>
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picwide" data-caption="true" class="insert" href="">full width cap</a></li>
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="picfull" data-caption="true" class="insert" href="">column width cap</a></li>
<li><a data-src="{% get_image_by_size object 'admin_insert' %}" data-id="{{object.id}}" data-class="cluster pic" class="insert" href="">cluster</a></li>
<li><a href="/admin/photos/luximage/{{object.pk}}/change/">Edit Image</a></li>{%endif%}
</ul>
</div>
{% endfor %}
</div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>
</body>
</html>
|
