some initial work on uploading and cropping cover photos

6 files changed, 121 insertions, 2 deletions

diff --git a/include/photo/photo_driver.php b/include/photo/photo_driver.php
index 0de3b9c97..dce92d8da 100644
--- a/include/photo/photo_driver.php
+++ b/include/photo/photo_driver.php
@@ -69,6 +69,8 @@ abstract class photo_driver {
 
 	abstract function cropImage($max,$x,$y,$w,$h);
 
+	abstract function cropImageRect($maxx,$maxy,$x,$y,$w,$h);
+
 	abstract function imageString();
 
 
@@ -229,6 +231,7 @@ abstract class photo_driver {
 		$this->doScaleImage($dest_width,$dest_height);
 	}
 
+
 	public function scaleImageSquare($dim) {
 		if(!$this->is_valid())
 			return FALSE;
diff --git a/include/photo/photo_gd.php b/include/photo/photo_gd.php
index 2ac7287e4..24bdc204f 100644
--- a/include/photo/photo_gd.php
+++ b/include/photo/photo_gd.php
@@ -108,6 +108,23 @@ class photo_gd extends photo_driver {
 		$this->setDimensions();
 	}
 
+	public function cropImageRect($maxx,$maxy,$x,$y,$w,$h) {
+		if(!$this->is_valid())
+			return FALSE;
+
+		$dest = imagecreatetruecolor( $maxx, $maxy );
+		imagealphablending($dest, false);
+		imagesavealpha($dest, true);
+		if ($this->type=='image/png') imagefill($dest, 0, 0, imagecolorallocatealpha($dest, 0, 0, 0, 127)); // fill with alpha
+		imagecopyresampled($dest, $this->image, 0, 0, $x, $y, $maxx, $maxy, $w, $h);
+		if($this->image)
+			imagedestroy($this->image);
+		$this->image = $dest;
+		$this->setDimensions();
+	}
+
+
+
 	public function imageString() {
 		if(!$this->is_valid())
 			return FALSE;
diff --git a/include/photo/photo_imagick.php b/include/photo/photo_imagick.php
index 3f84fd06c..32bb61342 100644
--- a/include/photo/photo_imagick.php
+++ b/include/photo/photo_imagick.php
@@ -163,6 +163,24 @@ class photo_imagick extends photo_driver {
 		$this->doScaleImage($max,$max);
 	}
 
+	public function cropImageRect($maxx,$maxy,$x,$y,$w,$h) {
+		if(!$this->is_valid())
+			return FALSE;
+
+		$this->image->setFirstIterator();
+		do {
+			$this->image->cropImage($w, $h, $x, $y);
+			/**
+			 * We need to remove the canvas,
+			 * or the image is not resized to the crop:
+			 * http://php.net/manual/en/imagick.cropimage.php#97232
+			 */
+			$this->image->setImagePage(0, 0, 0, 0);
+		} while ($this->image->nextImage());
+
+		$this->doScaleImage($maxx,$maxy);
+	}
+
 	public function imageString() {
 		if(!$this->is_valid())
 			return FALSE;
diff --git a/mod/profile_photo.php b/mod/profile_photo.php
index 2884505f0..0091d0585 100644
--- a/mod/profile_photo.php
+++ b/mod/profile_photo.php
@@ -502,8 +502,8 @@ function profile_photo_crop_ui_head(&$a, $ph, $hash, $smallest){
 	$width  = $ph->getWidth();
 	$height = $ph->getHeight();
 
-	if($width < 300 || $height < 300) {
-		$ph->scaleImageUp(200);
+	if($width < 500 || $height < 500) {
+		$ph->scaleImageUp(400);
 		$width  = $ph->getWidth();
 		$height = $ph->getHeight();
 	}
diff --git a/view/tpl/cover_photo.tpl b/view/tpl/cover_photo.tpl
new file mode 100755
index 000000000..1db139e7b
--- /dev/null
+++ b/view/tpl/cover_photo.tpl
@@ -0,0 +1,23 @@
+<div class="generic-content-wrapper-styled">
+<h1>{{$title}}</h1>
+
+<form enctype="multipart/form-data" action="cover_photo" method="post">
+<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+<div id="profile-photo-upload-wrapper">
+
+<label id="profile-photo-upload-label" class="form-label" for="profile-photo-upload">{{$lbl_upfile}}</label>
+<input name="userfile" class="form-input" type="file" id="profile-photo-upload" size="48" />
+<div class="clear"></div>
+
+<div id="profile-photo-submit-wrapper">
+<input type="submit" name="submit" id="profile-photo-submit" value="{{$submit}}">
+</div>
+</div>
+
+</form>
+
+<div id="profile-photo-link-select-wrapper">
+{{$select}}
+</div>
+</div>
diff --git a/view/tpl/cropcover.tpl b/view/tpl/cropcover.tpl
new file mode 100755
index 000000000..2bfd65a8f
--- /dev/null
+++ b/view/tpl/cropcover.tpl
@@ -0,0 +1,58 @@
+<h1>{{$title}}</h1>
+<p id="cropimage-desc">
+{{$desc}}
+</p>
+<div id="cropimage-wrapper">
+<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
+</div>
+<div id="cropimage-preview-wrapper" >
+<div id="previewWrap" ></div>
+</div>
+
+<script type="text/javascript" language="javascript">
+
+	function onEndCrop( coords, dimensions ) {
+		$( 'x1' ).value = coords.x1;
+		$( 'y1' ).value = coords.y1;
+		$( 'x2' ).value = coords.x2;
+		$( 'y2' ).value = coords.y2;
+		$( 'width' ).value = dimensions.width;
+		$( 'height' ).value = dimensions.height;
+	}
+
+	Event.observe( window, 'load', function() {
+		new Cropper.ImgWithPreview(
+		'croppa',
+		{
+			previewWrap: 'previewWrap',
+			minWidth: 850,
+			minHeight: 310,
+			maxWidth: 2400,
+			maxHeight: 872,
+			ratioDim: { x: 100, y:36 },
+			displayOnInit: true,
+			onEndCrop: onEndCrop
+		}
+		);
+	}
+	);
+
+</script>
+
+<form action="cover_photo/{{$resource}}" id="crop-image-form" method="post" />
+<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+<input type='hidden' name='profile' value='{{$profile}}'>
+<input type="hidden" name="cropfinal" value="1" />
+<input type="hidden" name="xstart" id="x1" />
+<input type="hidden" name="ystart" id="y1" />
+<input type="hidden" name="xfinal" id="x2" />
+<input type="hidden" name="yfinal" id="y2" />
+<input type="hidden" name="height" id="height" />
+<input type="hidden" name="width"  id="width" />
+
+<div id="crop-image-submit-wrapper" >
+<input type="submit" name="submit" value="{{$done}}" />
+</div>
+
+</form>