source: extensions/header_manager/admin/template/add.tpl @ 26298

Revision 26298, 4.6 KB checked in by mistic100, 6 years ago (diff)

update for 2.6 + better calculation + option to force ratio
TODO: issue with PNG (unable to generate thumbnail with IM)

Line 
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"}
78jQuery(".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&times;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}
Note: See TracBrowser for help on using the repository browser.