view/de/cropbody.tpl

   1 <h1>Bild zuschneiden</h1>
   2 <p id="cropimage-desc">
   3 Zur optimalen Darstellung des Bildes kann es nun auf einen Bereich
   4 zugeschnitten werden. Bitte wähle diesen Bereich.
   5 </p>
   6 <div id="cropimage-wrapper">
   7 <img src="$image_url" id="croppa" class="imgCrop" alt="" />
   8 </div>
   9 <div id="cropimage-preview-wrapper" >
  10 <div id="previewWrap" ></div>
  11 </div>
  12
  13 <script type="text/javascript" language="javascript">
  14
  15         function onEndCrop( coords, dimensions ) {
  16                 $( 'x1' ).value = coords.x1;
  17                 $( 'y1' ).value = coords.y1;
  18                 $( 'x2' ).value = coords.x2;
  19                 $( 'y2' ).value = coords.y2;
  20                 $( 'width' ).value = dimensions.width;
  21                 $( 'height' ).value = dimensions.height;
  22         }
  23
  24         Event.observe( window, 'load', function() {
  25                 new Cropper.ImgWithPreview(
  26                 'croppa',
  27                 {
  28                         previewWrap: 'previewWrap',
  29                         minWidth: 175,
  30                         minHeight: 175,
  31                         maxWidth: 640,
  32                         maxHeight: 640,
  33                         ratioDim: { x: 100, y:100 },
  34                         displayOnInit: true,
  35                         onEndCrop: onEndCrop
  36                 }
  37                 );
  38         }
  39         );
  40
  41 </script>
  42
  43 <form action="profile_photo/$resource" id="crop-image-form" method="post" />
  44
  45 <input type="hidden" name="imagename" value="$hash" />
  46 <input type="hidden" name="cropfinal" value="1" />
  47 <input type="hidden" name="xstart" id="x1" />
  48 <input type="hidden" name="ystart" id="y1" />
  49 <input type="hidden" name="xfinal" id="x2" />
  50 <input type="hidden" name="yfinal" id="y2" />
  51 <input type="hidden" name="height" id="height" />
  52 <input type="hidden" name="width"  id="width" />
  53
  54 <div id="crop-image-submit-wrapper" >
  55 <input type="submit" name="submit" value="Done Editing" />
  56 </div>
  57
  58 </form>