summaryrefslogtreecommitdiff
path: root/design/templates/admin/insert_images.html
blob: caaa7903a9a2526f14c1605ee7f599a5ebbc57b0 (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
{% 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, c, caption) {
    html = '<img src="'+image_url+'" 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-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&amp;_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.title}} {% if image.caption %}&ndash; {{image.caption}}{%endif%}</figcaption>
        </figure>
        <ul class="actions">
            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picwide" class="insert" href="">full width</a></li>
            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-class="picfull" class="insert" href="">column width</a></li>
            <li><a data-src="{% get_image_by_size image 'admin_insert' %}" 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-class="picfull" data-caption="true" class="insert" href="">column width cap</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>