Add media ratio to improve page rendering

files/db/update_v18_to_v19.sql

@@ -0,0 +1,2 @@
+ALTER TABLE medias ADD width INT AFTER timezone;
+ALTER TABLE medias ADD height INT AFTER width;

inc/Media.php

@@ -76,7 +76,7 @@ class Media extends PhpObject {
 		if($bOwnMedia && empty($this->asMedia) || !$bOwnMedia && empty($this->asMedias) || $bConstraintArray) {
 			if($this->oProject->getProjectId()) {
 				$asParams = array(
-					'select'	=> array(Db::getId(self::MEDIA_TABLE), 'filename', 'taken_on', 'posted_on', 'timezone', 'rotate', 'type AS subtype', 'comment'),
+					'select'	=> array(Db::getId(self::MEDIA_TABLE), 'filename', 'taken_on', 'posted_on', 'timezone', 'width', 'height', 'rotate', 'type AS subtype', 'comment'),
 					'from'		=> self::MEDIA_TABLE,
 					'constraint'=> array(Db::getId(Project::PROJ_TABLE) => $this->oProject->getProjectId())
 				);
@@ -127,11 +127,13 @@ class Media extends PhpObject {
 				'taken_on'						=> ($asMediaInfo['taken_ts'] > 0)?date(Db::TIMESTAMP_FORMAT, $asMediaInfo['taken_ts']):0,
 				'posted_on'						=> date(Db::TIMESTAMP_FORMAT, $asMediaInfo['file_ts']),
 				'timezone'						=> $asMediaInfo['timezone'],
+				'width'							=> $asMediaInfo['width'],
+				'height'						=> $asMediaInfo['height'],
 				'rotate'						=> $asMediaInfo['rotate'],
 				'type'							=> $asMediaInfo['type']
 			);
 
-			if($sMethod=='sync')	$iMediaId = $this->oDb->insertUpdateRow(self::MEDIA_TABLE, $asDbInfo, array(Db::getId(Project::PROJ_TABLE), 'filename'));
+			if($sMethod=='sync')	$iMediaId = $this->oDb->insertUpdateRow(self::MEDIA_TABLE, $asDbInfo, array('filename'));
 			else					$iMediaId = $this->oDb->insertRow(self::MEDIA_TABLE, $asDbInfo);
 
 			if(!$iMediaId) $sError = 'error_commit_db';
@@ -166,6 +168,8 @@ class Media extends PhpObject {
 		$iTimeStamp = $iTakenOn = 0;
 		$iPostedOn = filemtime($sMediaPath);
 		$sTimeZone = date_default_timezone_get();
+		$iWidth = 0;
+		$iHeight = 0;
 		$sRotate = '0';
 		$sTakenOn = '';
 		switch($sType) {
@@ -174,9 +178,10 @@ class Media extends PhpObject {
 				$sParams = implode(' ', array(
 					'-loglevel error', //Remove comments
 					'-select_streams v:0', //First video channel
-					'-show_entries '. //filter tags : Creation Time & Rotation
-						'format_tags=creation_time,com.apple.quicktime.creationdate'.':'.
-						'stream_tags=rotate,creation_time',
+					'-show_entries '. //filter tags : Width, Height, Creation Time & Rotation
+						'format_tags=creation_time,com.apple.quicktime.creationdate:'.
+						'stream_tags=rotate,creation_time:'.
+						'stream=width,height',
 					'-print_format json', //output format: json
 					'-i' //input file
 				));
@@ -190,11 +195,17 @@ class Media extends PhpObject {
 				}
 				else $sTakenOn = $asExif['format']['tags']['creation_time'] ?? $asExif['streams'][0]['tags']['creation_time'];
 
+				//Width & Height
+				$iWidth = $asExif['streams'][0]['width'];
+				$iHeight = $asExif['streams'][0]['height'];
+
 				//Orientation
 				if(isset($asExif['streams'][0]['tags']['rotate'])) $sRotate = $asExif['streams'][0]['tags']['rotate'];
 				break;
 			case 'image':
 				$asExif = @exif_read_data($sMediaPath, 0, true);
+				if($asExif === false) $asExif = array();
+				list($iWidth, $iHeight) = getimagesize($sMediaPath);
 
 				//Posted On
 				if(array_key_exists('FILE', $asExif) && array_key_exists('FileDateTime', $asExif['FILE'])) $iPostedOn = $asExif['FILE']['FileDateTime'];
@@ -240,6 +251,8 @@ class Media extends PhpObject {
 			'timezone'	=> $sTimeZone,
 			'taken_ts'	=> $iTakenOn,
 			'file_ts'	=> $iPostedOn,
+			'width'		=> $iWidth,
+			'height'	=> $iHeight,
 			'rotate'	=> $sRotate,
 			'type'		=> $sType
 		);

inc/Spot.php

@@ -89,7 +89,7 @@ class Spot extends Main
 				Feed::SPOT_TABLE	=> array('ref_spot_id', 'name', 'model'),
 				Project::PROJ_TABLE	=> array('name', 'codename', 'active_from', 'active_to'),
 				self::POST_TABLE	=> array(Db::getId(Project::PROJ_TABLE), Db::getId(User::USER_TABLE), 'name', 'content', 'site_time', 'timezone'),
-				Media::MEDIA_TABLE	=> array(Db::getId(Project::PROJ_TABLE), 'filename', 'type', 'taken_on', 'posted_on', 'timezone', 'rotate', 'comment'),
+				Media::MEDIA_TABLE	=> array(Db::getId(Project::PROJ_TABLE), 'filename', 'type', 'taken_on', 'posted_on', 'timezone', 'width', 'height', 'rotate', 'comment'),
 				User::USER_TABLE	=> array('name', 'email', 'gravatar', 'language', 'timezone', 'active', 'clearance'),
 				Map::MAP_TABLE		=> array('codename', 'pattern', 'token', 'tile_size', 'min_zoom', 'max_zoom', 'attribution'),
 				Map::MAPPING_TABLE	=> array(Db::getId(Map::MAP_TABLE) , Db::getId(Project::PROJ_TABLE))
@@ -134,7 +134,9 @@ class Spot extends Main
 				'weather_icon'	=> "VARCHAR(30)",
 				'weather_cond'	=> "VARCHAR(30)",
 				'weather_temp'	=> "DECIMAL(3,1)",
-				'tile_size'		=> "SMALLINT UNSIGNED DEFAULT 256"
+				'tile_size'		=> "SMALLINT UNSIGNED DEFAULT 256",
+				'width'			=> "INT",
+				'height'		=> "INT"
 			),
 			'constraints'		=> array
 			(

masks/project.html

@@ -998,7 +998,14 @@ function getMediaLink(asData, sType) {
 			'data-title': $Title.html(),
 			'data-orientation': asData.rotate
 		})
-		.append($('<img>', {'src': asData.thumb_path, title: oSpot.lang((asData.subtype == 'video')?'click_watch':'click_zoom')}))
+		.append($('<img>')
+			.attr({
+				'src': asData.thumb_path,
+				'width': asData.width, //set image ratio so that the required space can be reserved
+				'height': asData.height,
+				'title': oSpot.lang((asData.subtype == 'video')?'click_watch':'click_zoom')
+			})
+		)
 		.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+asData.subtype));
 
 	return $Link;

style/_mask_project.scss

@@ -192,6 +192,8 @@ $legend-color: $post-color;
 						}
 
 						img {
+							width: auto;
+							height: auto;
 							max-width: 200px;
 							max-height: 100px;
 							border-radius: $block-radius;
@@ -647,6 +649,7 @@ $legend-color: $post-color;
 
 							img {
 								width: 100%;
+								height: auto;
 								image-orientation: from-image;
 								outline: none;
 								border-radius: $block-radius;