1 | {combine_css path=$HEADER_MANAGER_PATH|cat:'admin/template/style.css'} |
---|
2 | |
---|
3 | <div class="titrePage"> |
---|
4 | <h2>Header Manager</h2> |
---|
5 | </div> |
---|
6 | |
---|
7 | {if $IN_CROP} |
---|
8 | {combine_css path="themes/default/js/plugins/jquery.Jcrop.css"} |
---|
9 | {combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'} |
---|
10 | |
---|
11 | {footer_script require="jquery"} |
---|
12 | (function(){ |
---|
13 | var jcrop_api; |
---|
14 | |
---|
15 | jQuery("#jcrop").Jcrop({ |
---|
16 | boxWidth: {$crop.box_width}, |
---|
17 | boxHeight: {$crop.box_height}, |
---|
18 | trueSize: [{$picture.width}, {$picture.height}], |
---|
19 | aspectRatio: {$crop.real_width}/{$crop.real_height}, |
---|
20 | setSelect: [{$crop.l}, {$crop.t}, {$crop.r}, {$crop.b}], |
---|
21 | onChange: function(sel) { |
---|
22 | jQuery("input[name='x']").val(Math.round(sel.x)); |
---|
23 | jQuery("input[name='y']").val(Math.round(sel.y)); |
---|
24 | jQuery("input[name='x2']").val(Math.round(sel.x2)); |
---|
25 | jQuery("input[name='y2']").val(Math.round(sel.y2)); |
---|
26 | |
---|
27 | var final_width = Math.min(Math.round(sel.x2-sel.x), {$crop.desired_width}), |
---|
28 | final_height = Math.round((sel.y2-sel.y)*final_width/(sel.x2-sel.x)); |
---|
29 | |
---|
30 | jQuery("#width").html(final_width); |
---|
31 | jQuery("#height").html(final_height); |
---|
32 | }, |
---|
33 | onRelease: function() { |
---|
34 | jcrop_api.setSelect([{$crop.l}, {$crop.t}, {$crop.r}, {$crop.b}]); |
---|
35 | } |
---|
36 | }, |
---|
37 | function() { |
---|
38 | jcrop_api = this; |
---|
39 | }); |
---|
40 | |
---|
41 | jQuery('input[name="keep_ratio"]').on('change', function() { |
---|
42 | jcrop_api.setOptions({ |
---|
43 | aspectRatio: jQuery(this).prop('checked') ? {$crop.real_width}/{$crop.real_height} : 0 |
---|
44 | }); |
---|
45 | if (!jQuery(this).prop('checked')) { |
---|
46 | jcrop_api.release(); |
---|
47 | } |
---|
48 | }); |
---|
49 | }()); |
---|
50 | {/footer_script} |
---|
51 | |
---|
52 | <form method="post" action="{$F_ACTION}"> |
---|
53 | <fieldset> |
---|
54 | <legend>{'Crop banner image'|translate}</legend> |
---|
55 | {'Choose the part of the image you want to use as your header.'|translate}<br> |
---|
56 | |
---|
57 | <img id="jcrop" src="{$picture.banner_src}"> |
---|
58 | |
---|
59 | <ul> |
---|
60 | <li><b>{'Width'|translate}:</b> <span id="width"></span>px</li> |
---|
61 | <li><b>{'Height'|translate}:</b> <span id="height"></span>px</li> |
---|
62 | <li><label><input type="checkbox" name="keep_ratio" checked> {'Respect %s aspect ratio'|translate:($crop.desired_width|cat:'/'|cat:$crop.desired_height)}</label></li> |
---|
63 | </ul> |
---|
64 | |
---|
65 | <input type="hidden" name="x"> |
---|
66 | <input type="hidden" name="y"> |
---|
67 | <input type="hidden" name="x2"> |
---|
68 | <input type="hidden" name="y2"> |
---|
69 | <input type="hidden" name="picture_file" value="{$picture.filename}"> |
---|
70 | |
---|
71 | <input type="submit" name="submit_crop" value="{'Submit'|translate}"> |
---|
72 | <input type="submit" name="cancel_crop" value="{'Cancel'|translate}"> |
---|
73 | </fieldset> |
---|
74 | </form> |
---|
75 | |
---|
76 | {else} |
---|
77 | {footer_script require="jquery"} |
---|
78 | jQuery(".showInfo").tipTip({ |
---|
79 | delay: 0, |
---|
80 | fadeIn: 200, |
---|
81 | fadeOut: 200, |
---|
82 | maxWidth: '300px', |
---|
83 | }); |
---|
84 | |
---|
85 | $("input").bind("keydown", function(event) { |
---|
86 | var keycode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode); |
---|
87 | if (keycode == 13 && $("input[name='picture_id']").val() != '') { |
---|
88 | $("input[name='upload_gallery_image']").click(); |
---|
89 | return false; |
---|
90 | } |
---|
91 | else { |
---|
92 | return true; |
---|
93 | } |
---|
94 | }); |
---|
95 | {/footer_script} |
---|
96 | |
---|
97 | <form method="post" action="{$F_ACTION}" ENCTYPE="multipart/form-data"> |
---|
98 | <fieldset> |
---|
99 | <legend>{'Default banner size'|translate}</legend> |
---|
100 | |
---|
101 | <label> |
---|
102 | {'Width'|translate}: |
---|
103 | <input type="text" name="width" size="4" value="{$BANNER_WIDTH}"> px |
---|
104 | </label> |
---|
105 | <br> |
---|
106 | <br> |
---|
107 | <label> |
---|
108 | {'Height'|translate}: |
---|
109 | <input type="text" name="height" size="4" value="{$BANNER_HEIGHT}"> px |
---|
110 | </label> |
---|
111 | <br> |
---|
112 | <br> |
---|
113 | <i>{'For MontBlancXL and BlancMontXL, advised size is 900×190.'|translate}</i> |
---|
114 | </fieldset> |
---|
115 | |
---|
116 | <fieldset> |
---|
117 | <legend>{'Select an image'|translate}</legend> |
---|
118 | {'You can upload a custom header image or select one from your gallery. On the next screen you will be able to crop the image.'|translate} |
---|
119 | <br><br> |
---|
120 | |
---|
121 | <b>{'Choose an image from your computer'|translate}</b> |
---|
122 | <blockquote> |
---|
123 | {'Maximum file size: %sB.'|translate:$upload_max_filesize_shorthand} {'Allowed file types: %s.'|translate:'jpg, png, gif'}<br> |
---|
124 | <input type="file" name="new_image"> |
---|
125 | <input type="hidden" name="MAX_FILE_SIZE" value="{$upload_max_filesize}"> |
---|
126 | <input type="submit" name="upload_new_image" value="{'Upload'|translate}" class="submit"> |
---|
127 | </blockquote> |
---|
128 | |
---|
129 | <b>{'or choose a picture from the gallery'|translate}</b> |
---|
130 | <blockquote> |
---|
131 | {'Picture id.'|translate} <a class="icon-info-circled-1 showInfo" title="{'The numeric identifier can be found on the picture edition page, near the thumbnail.'|translate}"></a> |
---|
132 | <input type="text" name="picture_id" size="5"> |
---|
133 | <input type="submit" name="upload_gallery_image" value="{'Use'|translate}" class="submit"> |
---|
134 | </blockquote> |
---|
135 | </fieldset> |
---|
136 | </form> |
---|
137 | |
---|
138 | {/if} |
---|