[26298] | 1 | {combine_css path=$HEADER_MANAGER_PATH|cat:'admin/template/style.css'} |
---|
[15854] | 2 | |
---|
[15958] | 3 | <div class="titrePage"> |
---|
[15854] | 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"} |
---|
[26298] | 12 | (function(){ |
---|
| 13 | var jcrop_api; |
---|
[15854] | 14 | |
---|
[26298] | 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}, |
---|
[15854] | 20 | setSelect: [{$crop.l}, {$crop.t}, {$crop.r}, {$crop.b}], |
---|
[26298] | 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() { |
---|
[15854] | 38 | jcrop_api = this; |
---|
| 39 | }); |
---|
| 40 | |
---|
[26298] | 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 | }()); |
---|
[15854] | 50 | {/footer_script} |
---|
| 51 | |
---|
[24010] | 52 | <form method="post" action="{$F_ACTION}"> |
---|
[15854] | 53 | <fieldset> |
---|
[26298] | 54 | <legend>{'Crop banner image'|translate}</legend> |
---|
| 55 | {'Choose the part of the image you want to use as your header.'|translate}<br> |
---|
[15854] | 56 | |
---|
[26298] | 57 | <img id="jcrop" src="{$picture.banner_src}"> |
---|
[15854] | 58 | |
---|
| 59 | <ul> |
---|
[26298] | 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> |
---|
[15854] | 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"> |
---|
[15922] | 69 | <input type="hidden" name="picture_file" value="{$picture.filename}"> |
---|
[15854] | 70 | |
---|
[26298] | 71 | <input type="submit" name="submit_crop" value="{'Submit'|translate}"> |
---|
| 72 | <input type="submit" name="cancel_crop" value="{'Cancel'|translate}"> |
---|
[15854] | 73 | </fieldset> |
---|
| 74 | </form> |
---|
| 75 | |
---|
| 76 | {else} |
---|
[26298] | 77 | {footer_script require="jquery"} |
---|
[18711] | 78 | jQuery(".showInfo").tipTip({ |
---|
| 79 | delay: 0, |
---|
| 80 | fadeIn: 200, |
---|
| 81 | fadeOut: 200, |
---|
| 82 | maxWidth: '300px', |
---|
| 83 | }); |
---|
[15854] | 84 | |
---|
[18711] | 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; |
---|
[26298] | 90 | } |
---|
| 91 | else { |
---|
[18711] | 92 | return true; |
---|
| 93 | } |
---|
| 94 | }); |
---|
[26298] | 95 | {/footer_script} |
---|
[18711] | 96 | |
---|
[24010] | 97 | <form method="post" action="{$F_ACTION}" ENCTYPE="multipart/form-data"> |
---|
[15854] | 98 | <fieldset> |
---|
[26299] | 99 | <legend>{'Banner size'|translate}</legend> |
---|
[15854] | 100 | |
---|
| 101 | <label> |
---|
[26298] | 102 | {'Width'|translate}: |
---|
[24010] | 103 | <input type="text" name="width" size="4" value="{$BANNER_WIDTH}"> px |
---|
[15854] | 104 | </label> |
---|
| 105 | <br> |
---|
| 106 | <br> |
---|
| 107 | <label> |
---|
[26298] | 108 | {'Height'|translate}: |
---|
[24010] | 109 | <input type="text" name="height" size="4" value="{$BANNER_HEIGHT}"> px |
---|
[15854] | 110 | </label> |
---|
| 111 | <br> |
---|
| 112 | <br> |
---|
[26298] | 113 | <i>{'For MontBlancXL and BlancMontXL, advised size is 900×190.'|translate}</i> |
---|
[15854] | 114 | </fieldset> |
---|
| 115 | |
---|
| 116 | <fieldset> |
---|
[26298] | 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} |
---|
[15854] | 119 | <br><br> |
---|
| 120 | |
---|
[26298] | 121 | <b>{'Choose an image from your computer'|translate}</b> |
---|
[15854] | 122 | <blockquote> |
---|
[26298] | 123 | {'Maximum file size: %sB.'|translate:$upload_max_filesize_shorthand} {'Allowed file types: %s.'|translate:'jpg, png, gif'}<br> |
---|
[15854] | 124 | <input type="file" name="new_image"> |
---|
| 125 | <input type="hidden" name="MAX_FILE_SIZE" value="{$upload_max_filesize}"> |
---|
[26298] | 126 | <input type="submit" name="upload_new_image" value="{'Upload'|translate}" class="submit"> |
---|
[15854] | 127 | </blockquote> |
---|
| 128 | |
---|
[26298] | 129 | <b>{'or choose a picture from the gallery'|translate}</b> |
---|
[15854] | 130 | <blockquote> |
---|
[26298] | 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> |
---|
[15854] | 132 | <input type="text" name="picture_id" size="5"> |
---|
[26298] | 133 | <input type="submit" name="upload_gallery_image" value="{'Use'|translate}" class="submit"> |
---|
[15854] | 134 | </blockquote> |
---|
| 135 | </fieldset> |
---|
| 136 | </form> |
---|
| 137 | |
---|
| 138 | {/if} |
---|