Ignore:
Timestamp:
Dec 28, 2013, 6:08:42 PM (10 years ago)
Author:
mistic100
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • extensions/header_manager/admin/template/add.tpl

    r24010 r26298  
    1 {combine_css path=$HEADER_MANAGER_PATH|@cat:"admin/template/style.css"}
     1{combine_css path=$HEADER_MANAGER_PATH|cat:'admin/template/style.css'}
    22
    33<div class="titrePage">
    … …  
    1010
    1111{footer_script require="jquery"}
    12 var jcrop_api;
     12(function(){
     13  var jcrop_api;
    1314
    14 jQuery("#jcrop").Jcrop({ldelim}
    15     boxWidth: {$crop.display_width},
    16     boxHeight: {$crop.display_height},
     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},
    1720    setSelect: [{$crop.l}, {$crop.t}, {$crop.r}, {$crop.b}],
    18     onChange: jOnChange,
    19     onRelease: jOnRelease
    20         },
    21   function(){ldelim}
     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() {
    2238    jcrop_api = this;
    2339  });
    2440 
    25 function jOnChange(sel) {ldelim}
    26         jQuery("input[name='x']").val(sel.x);
    27         jQuery("input[name='y']").val(sel.y);
    28         jQuery("input[name='x2']").val(sel.x2);
    29         jQuery("input[name='y2']").val(sel.y2);
    30  
    31   jQuery("#width").html(sel.x2-sel.x);
    32   jQuery("#height").html(sel.y2-sel.y);
    33 }
    34  
    35 function jOnRelease() {ldelim}
    36         jcrop_api.setSelect([{$crop.l}, {$crop.t}, {$crop.r}, {$crop.b}]);
    37 }
     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}());
    3850{/footer_script}
    3951
    4052<form method="post" action="{$F_ACTION}">
    4153<fieldset>
    42   <legend>{'Crop banner image'|@translate}</legend>
    43   {'Choose the part of the image you want to use as your header.'|@translate}<br>
     54  <legend>{'Crop banner image'|translate}</legend>
     55  {'Choose the part of the image you want to use as your header.'|translate}<br>
    4456 
    45   <img id="jcrop" src="{$picture.banner_src}" width="{$crop.display_width}" height="{$crop.display_height}">
     57  <img id="jcrop" src="{$picture.banner_src}">
    4658 
    4759  <ul>
    48     <li><b>{'Width'|@translate}:</b> <span id="width"></span>px</li>
    49     <li><b>{'Height'|@translate}:</b> <span id="height"></span>px</li>
     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>
    5063  </ul>
    5164 
    … …  
    5669  <input type="hidden" name="picture_file" value="{$picture.filename}">
    5770 
    58   <input type="submit" name="submit_crop" value="{'Submit'|@translate}">
    59   <input type="submit" name="cancel_crop" value="{'Cancel'|@translate}">
     71  <input type="submit" name="submit_crop" value="{'Submit'|translate}">
     72  <input type="submit" name="cancel_crop" value="{'Cancel'|translate}">
    6073</fieldset>
    6174</form>
    6275
    6376{else}
    64 {footer_script require="jquery"}{literal}
     77{footer_script require="jquery"}
    6578jQuery(".showInfo").tipTip({
    6679  delay: 0,
    … …  
    7588    $("input[name='upload_gallery_image']").click();
    7689    return false;
    77   } else {
     90  }
     91  else {
    7892    return true;
    7993  }
    8094});
    81 {/literal}{/footer_script}
     95{/footer_script}
    8296
    8397<form method="post" action="{$F_ACTION}" ENCTYPE="multipart/form-data">
    8498  <fieldset>
    85     <legend>{'Default banner size'|@translate}</legend>
     99    <legend>{'Default banner size'|translate}</legend>
    86100   
    87101    <label>
    88       {'Width'|@translate}:
     102      {'Width'|translate}:
    89103      <input type="text" name="width" size="4" value="{$BANNER_WIDTH}"> px
    90104    </label>
    … …  
    92106    <br>
    93107    <label>
    94       {'Height'|@translate}:
     108      {'Height'|translate}:
    95109      <input type="text" name="height" size="4" value="{$BANNER_HEIGHT}"> px
    96110    </label>
    97111    <br>
    98112    <br>
    99     <i>{'For MontBlancXL and BlancMontXL, advised size is 900&times;190.'|@translate}</i>
     113    <i>{'For MontBlancXL and BlancMontXL, advised size is 900&times;190.'|translate}</i>
    100114  </fieldset>
    101115 
    102116  <fieldset>
    103     <legend>{'Select an image'|@translate}</legend>
    104     {'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}
     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}
    105119    <br><br>
    106120   
    107     <b>{'Choose an image from your computer'|@translate}</b>
     121    <b>{'Choose an image from your computer'|translate}</b>
    108122    <blockquote>
    109       {'Maximum file size: %sB.'|@translate|@sprintf:$upload_max_filesize_shorthand} {'Allowed file types: %s.'|@translate|@sprintf:'jpg, png, gif'}<br>
     123      {'Maximum file size: %sB.'|translate:$upload_max_filesize_shorthand} {'Allowed file types: %s.'|translate:'jpg, png, gif'}<br>
    110124      <input type="file" name="new_image">
    111125      <input type="hidden" name="MAX_FILE_SIZE" value="{$upload_max_filesize}">
    112       <input type="submit" name="upload_new_image" value="{'Upload'|@translate}" class="submit">
     126      <input type="submit" name="upload_new_image" value="{'Upload'|translate}" class="submit">
    113127    </blockquote>
    114128   
    115     <b>{'or choose a picture from the gallery'|@translate}</b>
     129    <b>{'or choose a picture from the gallery'|translate}</b>
    116130    <blockquote>
    117       {'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>
     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>
    118132      <input type="text" name="picture_id" size="5">
    119       <input type="submit" name="upload_gallery_image" value="{'Use'|@translate}" class="submit">
     133      <input type="submit" name="upload_gallery_image" value="{'Use'|translate}" class="submit">
    120134    </blockquote>
    121135  </fieldset>
Note: See TracChangeset for help on using the changeset viewer.