view/templates/cropbody.tpl

   1 <h1>{{$title}}</h1>
   2 <p id="cropimage-desc">
   3         {{$desc nofilter}}
   4 </p>
   5
   6 <div id="cropimage-wrapper">
   7         <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
   8 </div>
   9
  10 <div id="cropimage-preview-wrapper" >
  11         <div id="previewWrap" class="crop-preview"></div>
  12 </div>
  13
  14 <script type="text/javascript" language="javascript">
  15
  16         var image = document.getElementById('croppa');
  17         var cropper = new Cropper(image, {
  18                 aspectRatio: 1 / 1,
  19                 viewMode: 1,
  20                 preview: '#profile-photo-wrapper, .crop-preview',
  21                 crop: function(e) {
  22                         $( '#x1' ).val(e.detail.x);
  23                         $( '#y1' ).val(e.detail.y);
  24                         $( '#x2' ).val(e.detail.x + e.detail.width);
  25                         $( '#y2' ).val(e.detail.y + e.detail.height);
  26                         $( '#width' ).val(e.detail.scaleX);
  27                         $( '#height' ).val(e.detail.scaleY);
  28                 },
  29                 ready: function() {
  30                         // Add the "crop-preview" class to the preview element ("profile-photo-wrapper").
  31                         var cwrapper = document.getElementById("profile-photo-wrapper");
  32                         cwrapper.classList.add("crop-preview");
  33                 }
  34         });
  35
  36 </script>
  37
  38 <form action="profile_photo/{{$resource}}" id="crop-image-form" method="post" />
  39         <input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
  40
  41         <input type='hidden' name='profile' value='{{$profile}}'>
  42         <input type="hidden" name="cropfinal" value="1" />
  43         <input type="hidden" name="xstart" id="x1" />
  44         <input type="hidden" name="ystart" id="y1" />
  45         <input type="hidden" name="xfinal" id="x2" />
  46         <input type="hidden" name="yfinal" id="y2" />
  47         <input type="hidden" name="height" id="height" />
  48         <input type="hidden" name="width"  id="width" />
  49
  50         <div id="crop-image-submit-wrapper" >
  51                 <input type="submit" name="submit" value="{{$done}}" />
  52         </div>
  53
  54 </form>