ntermediate sized images for small screen devices #67

- Updated version
- Update database
- Write medium to database
- Delete medium on photo delete
- Show medium depending on screen

php/database/photos_table.sql

@@ -24,5 +24,6 @@ CREATE TABLE IF NOT EXISTS `?` (
   `thumbUrl` varchar(50) NOT NULL,
   `album` varchar(30) NOT NULL DEFAULT '0',
   `checksum` VARCHAR(100) DEFAULT NULL,
+  `medium` tinyint(1) NOT NULL DEFAULT '0',
   PRIMARY KEY (`id`)
 ) ENGINE=MyISAM DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

php/database/update_020700.php

@@ -0,0 +1,35 @@
+<?php
+
+###
+# @name			Update to version 2.6.2
+# @author		Tobias Reich
+# @copyright	2014 by Tobias Reich
+###
+
+# Add medium to photos
+$query = Database::prepare($database, "SELECT `medium` FROM `?` LIMIT 1", array(LYCHEE_TABLE_PHOTOS));
+if (!$database->query($query)) {
+	$query	= Database::prepare($database, "ALTER TABLE `?` ADD `medium` TINYINT(1) NOT NULL DEFAULT 0", array(LYCHEE_TABLE_PHOTOS));
+	$result	= $database->query($query);
+	if (!$result) {
+		Log::error($database, 'update_020700', __LINE__, 'Could not update database (' . $database->error . ')');
+		return false;
+	}
+}
+
+# Add medium to settings
+$query	= Database::prepare($database, "SELECT `key` FROM `?` WHERE `key` = 'medium' LIMIT 1", array(LYCHEE_TABLE_SETTINGS));
+$result	= $database->query($query);
+if ($result->num_rows===0) {
+	$query	= Database::prepare($database, "INSERT INTO `?` (`key`, `value`) VALUES ('medium', '1')", array(LYCHEE_TABLE_SETTINGS));
+	$result	= $database->query($query);
+	if (!$result) {
+		Log::error($database, 'update_020700', __LINE__, 'Could not update database (' . $database->error . ')');
+		return false;
+	}
+}
+
+# Set version
+if (Database::setVersion($database, '020700')===false) return false;
+
+?>

php/define.php

@@ -23,8 +23,9 @@ define('LYCHEE_PLUGINS', LYCHEE . 'plugins/');
 define('LYCHEE_CONFIG_FILE', LYCHEE_DATA . 'config.php');
 
 # Define urls
-define('LYCHEE_URL_UPLOADS_THUMB', 'uploads/thumb/');
 define('LYCHEE_URL_UPLOADS_BIG', 'uploads/big/');
+define('LYCHEE_URL_UPLOADS_MEDIUM', 'uploads/medium/');
+define('LYCHEE_URL_UPLOADS_THUMB', 'uploads/thumb/');
 
 function defineTablePrefix($dbTablePrefix) {
 

php/modules/Database.php

@@ -54,7 +54,8 @@ class Database extends Module {
 			'020500', #2.5
 			'020505', #2.5.5
 			'020601', #2.6.1
-			'020602' #2.6.2
+			'020602', #2.6.2
+			'020700' #2.7.0
 		);
 
 		# For each update

php/modules/Photo.php

@@ -124,6 +124,7 @@ class Photo extends Module {
 					$photo_name	= $exists['photo_name'];
 					$path		= $exists['path'];
 					$path_thumb	= $exists['path_thumb'];
+					$medium		= ($exists['medium']==='1' ? true : false);
 					$exists		= true;
 				}
 
@@ -181,8 +182,8 @@ class Photo extends Module {
 			}
 
 			# Save to DB
-			$values	= array(LYCHEE_TABLE_PHOTOS, $id, $info['title'], $photo_name, $description, $tags, $info['type'], $info['width'], $info['height'], $info['size'], $info['iso'], $info['aperture'], $info['make'], $info['model'], $info['shutter'], $info['focal'], $info['takestamp'], $path_thumb, $albumID, $public, $star, $checksum);
+			$values	= array(LYCHEE_TABLE_PHOTOS, $id, $info['title'], $photo_name, $description, $tags, $info['type'], $info['width'], $info['height'], $info['size'], $info['iso'], $info['aperture'], $info['make'], $info['model'], $info['shutter'], $info['focal'], $info['takestamp'], $path_thumb, $albumID, $public, $star, $checksum, $medium);
-			$query	= Database::prepare($this->database, "INSERT INTO ? (id, title, url, description, tags, type, width, height, size, iso, aperture, make, model, shutter, focal, takestamp, thumbUrl, album, public, star, checksum) VALUES ('?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?')", $values);
+			$query	= Database::prepare($this->database, "INSERT INTO ? (id, title, url, description, tags, type, width, height, size, iso, aperture, make, model, shutter, focal, takestamp, thumbUrl, album, public, star, checksum, medium) VALUES ('?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?')", $values);
 			$result = $this->database->query($query);
 
 			if (!$result) {
@@ -205,8 +206,8 @@ class Photo extends Module {
 		self::dependencies(isset($this->database, $checksum));
 
 		# Exclude $photoID from select when $photoID is set
-		if (isset($photoID)) $query = Database::prepare($this->database, "SELECT id, url, thumbUrl FROM ? WHERE checksum = '?' AND id <> '?' LIMIT 1", array(LYCHEE_TABLE_PHOTOS, $checksum, $photoID));
+		if (isset($photoID)) $query = Database::prepare($this->database, "SELECT id, url, thumbUrl, medium FROM ? WHERE checksum = '?' AND id <> '?' LIMIT 1", array(LYCHEE_TABLE_PHOTOS, $checksum, $photoID));
-		else $query = Database::prepare($this->database, "SELECT id, url, thumbUrl FROM ? WHERE checksum = '?' LIMIT 1", array(LYCHEE_TABLE_PHOTOS, $checksum));
+		else $query = Database::prepare($this->database, "SELECT id, url, thumbUrl, medium FROM ? WHERE checksum = '?' LIMIT 1", array(LYCHEE_TABLE_PHOTOS, $checksum));
 
 		$result	= $this->database->query($query);
 
@@ -222,7 +223,8 @@ class Photo extends Module {
 			$return = array(
 				'photo_name'	=> $result->url,
 				'path'			=> LYCHEE_UPLOADS_BIG . $result->url,
-				'path_thumb'	=> $result->thumbUrl
+				'path_thumb'	=> $result->thumbUrl,
+				'medium'		=> $result->medium
 			);
 
 			return $return;
@@ -319,7 +321,7 @@ class Photo extends Module {
 
 	}
 
-	private function createMedium($url, $filename, $width, $height, $newWidth = 1920, $newHeight = 1080) {
+	private function createMedium($url, $filename, $width, $height) {
 
 		# Check dependencies
 		self::dependencies(isset($this->database, $this->settings, $url, $filename, $width, $height));
@@ -327,9 +329,16 @@ class Photo extends Module {
 		# Call plugins
 		$this->plugins(__METHOD__, 0, func_get_args());
 
+		# When changing these values,
+		# also change the size detection in the front-end
+		$newWidth = 1920;
+		$newHeight = 1080;
+
 		# Is photo big enough?
-		# is Imagick installed?
+		# Is medium activated?
+		# Is Imagick installed and activated?
 		if (($width>$newWidth||$height>$newHeight)&&
+			($this->settings['medium']==='1')&&
 			(extension_loaded('imagick')&&$this->settings['imagick']==='1')) {
 
 			# $info = getimagesize($url);
@@ -348,6 +357,7 @@ class Photo extends Module {
 		} else {
 
 			# Photo too small or
+			# Medium is deactivated or
 			# Imagick not installed
 			$error = true;
 
@@ -492,7 +502,11 @@ class Photo extends Module {
 		$photo['sysdate'] = date('d M. Y', substr($photo['id'], 0, -4));
 		if (strlen($photo['takestamp'])>1) $photo['takedate'] = date('d M. Y', $photo['takestamp']);
 
-		# Parse url
+		# Parse medium
+		if ($photo['medium']==='1') $photo['medium'] = LYCHEE_URL_UPLOADS_MEDIUM . $photo['url'];
+		else $photo['medium'] = '';
+
+		# Parse paths
 		$photo['url']		= LYCHEE_URL_UPLOADS_BIG . $photo['url'];
 		$photo['thumbUrl']	= LYCHEE_URL_UPLOADS_THUMB . $photo['thumbUrl'];
 
@@ -942,6 +956,12 @@ class Photo extends Module {
 					return false;
 				}
 
+				# Delete medium
+				if (file_exists(LYCHEE_UPLOADS_MEDIUM . $photo->url)&&!unlink(LYCHEE_UPLOADS_MEDIUM . $photo->url)) {
+					Log::error($this->database, __METHOD__, __LINE__, 'Could not delete photo in uploads/medium/');
+					return false;
+				}
+
 				# Delete thumb
 				if (file_exists(LYCHEE_UPLOADS_THUMB . $photo->thumbUrl)&&!unlink(LYCHEE_UPLOADS_THUMB . $photo->thumbUrl)) {
 					Log::error($this->database, __METHOD__, __LINE__, 'Could not delete photo in uploads/thumb/');

src/scripts/build.js

@@ -103,7 +103,7 @@ build = {
 
 	},
 
-	imageview: function(photoJSON, isSmall, visibleControls) {
+	imageview: function(photoJSON, size, visibleControls) {
 
 		if (!photoJSON) return "";
 
@@ -112,19 +112,27 @@ build = {
 		view += "<div class='arrow_wrapper previous'><a id='previous' class='icon-caret-left'></a></div>";
 		view += "<div class='arrow_wrapper next'><a id='next' class='icon-caret-right'></a></div>";
 
-		if (isSmall) {
+		if (size==="big") {
+
+			if (visibleControls)
+				view += "<div id='image' style='background-image: url(" + photoJSON.url + ")'></div>";
+			else
+				view += "<div id='image' style='background-image: url(" + photoJSON.url + ");' class='full'></div>";
+
+		} else if (size==="medium") {
+
+			if (visibleControls)
+				view += "<div id='image' style='background-image: url(" + photoJSON.medium + ")'></div>";
+			else
+				view += "<div id='image' style='background-image: url(" + photoJSON.medium + ");' class='full'></div>";
+
+		} else if (size==='small') {
 
 			if (visibleControls)
 				view += "<div id='image' class='small' style='background-image: url(" + photoJSON.url + "); width: " + photoJSON.width + "px; height: " + photoJSON.height + "px; margin-top: -" + parseInt(photoJSON.height/2-20) + "px; margin-left: -" + photoJSON.width/2 + "px;'></div>";
 			else
 				view += "<div id='image' class='small' style='background-image: url(" + photoJSON.url + "); width: " + photoJSON.width + "px; height: " + photoJSON.height + "px; margin-top: -" + parseInt(photoJSON.height/2) + "px; margin-left: -" + photoJSON.width/2 + "px;'></div>";
 
-		} else {
-
-			if (visibleControls)
-				view += "<div id='image' style='background-image: url(" + photoJSON.url + ")'></div>";
-			else
-				view += "<div id='image' style='background-image: url(" + photoJSON.url + ");' class='full'></div>";
 
 		}
 

src/scripts/lychee.js

@@ -8,8 +8,8 @@
 var lychee = {
 
 	title: "",
-	version: "2.6.3",
+	version: "2.7.0",
-	version_code: "020603",
+	version_code: "020700",
 
 	api_path: "php/api.php",
 	update_path: "http://lychee.electerious.com/version/index.php",

src/scripts/photo.js

@@ -543,18 +543,30 @@ photo = {
 
 	},
 
-	isSmall: function() {
+	getSize: function() {
 
-		var size = {
+		// Size can be 'big, medium, small'
-			width: false,
+		// Default is big
-			height: false
+		// Small is centered in the middle of the screen
-		};
+		var size = 'big',
+			hasMedium = photo.json.medium!=="",
+			view = {
+				width: $(window).width()-60,
+				height: $(window).height()-100
+			};
 
-		if (photo.json.width<$(window).width()-60) size.width = true;
+		// Medium available and
-		if (photo.json.height<$(window).height()-100) size.height = true;
+		// Medium still bigger than screen
+		if (hasMedium===true&&
+			(1920>view.width&&1080>view.height)) size = 'medium';
 
-		if (size.width&&size.height) return true;
+		// Medium not available and
-		else return false;
+		// Photo smaller then screen
+		if (hasMedium===false&&
+			(photo.json.width<view.width&&
+			photo.json.width<view.height)) size = 'small';
+
+		return size;
 
 	},
 

src/scripts/view.js

@@ -479,7 +479,7 @@ view = {
 
 		photo: function() {
 
-			lychee.imageview.html(build.imageview(photo.json, photo.isSmall(), visible.controls()));
+			lychee.imageview.html(build.imageview(photo.json, photo.getSize(), visible.controls()));
 
 			if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==="")||lychee.viewMode) $("a#next").hide();
 			if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==="")||lychee.viewMode) $("a#previous").hide();