blob: 70e19659a4b1239f96dbd6c302f92226db9c7a26 (
plain)
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
|
{% 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>
// execute your scripts when the DOM is ready. this is a good habit
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(){
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 image in images %}
<div class="item-wrapper">
<figure class="item" >
<img src="{% get_image_by_size image 'tn' %}" />
<figcaption>{{image.id}} - {{image.title}} {% if image.caption %}– {{image.caption}}{%endif%}</figcaption>
</figure>
<ul class="actions">
<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>
</ul>
</div>
{% endfor %}
</div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>
</body>
</html>
|
