From 41d98a7d47d56e0d41812b23cfffc104e45acbad Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 9 Sep 2022 15:37:34 +0000
Subject: [PATCH] Lower resolution image preview

---
 app/format/create_thumbnail.php      |  20 ++++
 app/image/image.php                  |   4 +
 app/image/upload_image.php           | 169 ++++++++++++++-------------
 .env => app/settings/.env            |   0
 {Gallery => app/settings}/GetEnv.php |   0
 css/main.css                         |  22 ++++
 css/scss/_body.scss                  |  31 +++++
 image.php                            |  28 ++++-
 8 files changed, 190 insertions(+), 84 deletions(-)
 create mode 100644 app/format/create_thumbnail.php
 rename .env => app/settings/.env (100%)
 rename {Gallery => app/settings}/GetEnv.php (100%)

diff --git a/app/format/create_thumbnail.php b/app/format/create_thumbnail.php
new file mode 100644
index 0000000..92debfc
--- /dev/null
+++ b/app/format/create_thumbnail.php
@@ -0,0 +1,20 @@
+<?php
+/*
+ |-------------------------------------------------------------
+ | Create Thumbnails
+ |-------------------------------------------------------------
+ | Default resolution for a preview image is 300px (max-width)
+ | ** Not yet implemented **
+ |-------------------------------------------------------------
+*/
+function make_thumbnail($image_path, $thumbnail_path, $resolution) {
+    try {
+        $thumbnail = new Imagick($image_path);
+        $thumbnail->resizeImage($resolution,null,null,1,null);
+        $thumbnail->writeImage($thumbnail_path);
+
+        return "success";
+    } catch (Exception $e) {
+        return $e;
+    }
+}
\ No newline at end of file
diff --git a/app/image/image.php b/app/image/image.php
index 26eda47..557b83d 100644
--- a/app/image/image.php
+++ b/app/image/image.php
@@ -40,6 +40,10 @@ if (isset($_POST['submit_delete'])) {
         if (is_file("../../images/thumbnails/".$image_array['imagename'])) {
           unlink("../../images/thumbnails/".$image_array['imagename']);
         }
+        // Delete preview if exitsts
+        if (is_file("../../images/previews/".$image_array['imagename'])) {
+          unlink("../../images/previews/".$image_array['imagename']);
+        }
         // TP user to the homepage with a success message
         ?>
         <script>
diff --git a/app/image/upload_image.php b/app/image/upload_image.php
index 03cb36e..cfba1b4 100644
--- a/app/image/upload_image.php
+++ b/app/image/upload_image.php
@@ -1,96 +1,107 @@
 <?php
 /*
- |-------------------------------------------------------------
- | Uploading Images
- |-------------------------------------------------------------
- | gwa gwa
- |-------------------------------------------------------------
+|-------------------------------------------------------------
+| Uploading Images
+|-------------------------------------------------------------
+| gwa gwa
+|-------------------------------------------------------------
 */
 session_start();
 // Include server connection
 include "../server/conn.php";
-// Required to format tags correctly before upload
 include "../format/string_to_tags.php";
+include "../format/create_thumbnail.php";
 
 if (isset($_POST['submit'])) {
-  if (isset($_SESSION['id'])) {
-    // Root paths
-    $dir = "../../images/";
-    $thumb_dir = $dir."thumbnails/";
+	if (isset($_SESSION['id'])) {
+		// Root paths
+		$dir = "../../images/";
+		$thumb_dir = $dir."thumbnails/";
+		$preview_dir = $dir."previews/";
 
-    // File name updating
-    $file_type = pathinfo($dir.$_FILES['image']['name'],PATHINFO_EXTENSION);
-    $image_newname = "IMG_".$_SESSION["username"]."_".round(microtime(true)).".".$file_type;
-    $image_path = $dir.$image_newname;
+		// File name updating
+		$file_type = pathinfo($dir.$_FILES['image']['name'],PATHINFO_EXTENSION);
+		$image_newname = "IMG_".$_SESSION["username"]."_".round(microtime(true)).".".$file_type;
+		$image_path = $dir.$image_newname;
 
-    // Clean tags
-    $tags = tag_clean(trim($_POST['tags']));
+		// Clean tags
+		$tags = tag_clean(trim($_POST['tags']));
 
-    // Allowed file types
-    $allowed_types = array('jpg', 'jpeg', 'png', 'webp');
-    if (in_array($file_type, $allowed_types)) {
-      // Move file to server
-      if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) {
-        // Attempt making a thumbnail
-        try {
-          $image_thumbnail = new Imagick($image_path);
-          $image_thumbnail->resizeImage(300,null,null,1,null);
-          $image_thumbnail->writeImage($thumb_dir.$image_newname);
-        } catch (Exception $e) {
-          ?>
-          <script>
-            sniffleAdd('Gwha!', 'We hit a small roadbump during making of the thumbail. We will continue anyway!', 'var(--black)', 'assets/icons/bug.svg');
-          </script>
-          <?php
-        }
+		// Allowed file types
+		$allowed_types = array('jpg', 'jpeg', 'png', 'webp');
+		if (in_array($file_type, $allowed_types)) {
+			// Move file to server
+			if (move_uploaded_file($_FILES['image']['tmp_name'], $image_path)) {
+				// Attempt making a thumbnail
+				list($width, $height) = getimagesize($image_path);
+				if ($width > 300) {
+					$make_thumbnail = make_thumbnail($image_path, $thumb_dir.$image_newname, 300);
+					if ($make_thumbnail != "success") {
+						?>
+							<script>
+								sniffleAdd('Gwha!', 'We hit a small roadbump during making of the thumbail. We will continue anyway! \n Full Error: <?php echo $make_thumbnail; ?>', 'var(--black)', 'assets/icons/bug.svg');
+							</script>
+						<?php
+					}
+				}
+				if ($width > 1000) {
+					$make_preview = make_thumbnail($image_path, $preview_dir.$image_newname, 1000);
+					if ($make_preview != "success") {
+						?>
+							<script>
+								sniffleAdd('Gwha!', 'We hit a small roadbump during making of the preview. We will continue anyway! \n Full Error: <?php echo $make_preview; ?>', 'var(--black)', 'assets/icons/bug.svg');
+							</script>
+						<?php
+					}
+				}
 
-        // Prepare sql for destruction and filtering the sus
-        $sql = "INSERT INTO swag_table (imagename, alt, tags, author) VALUES (?, ?, ?, ?)";
+				// Prepare sql for destruction and filtering the sus
+				$sql = "INSERT INTO swag_table (imagename, alt, tags, author) VALUES (?, ?, ?, ?)";
 
-        if ($stmt = mysqli_prepare($conn, $sql)) {
-          // Bind the smelly smelly
-          mysqli_stmt_bind_param($stmt, "ssss", $param_image_name, $param_alt_text, $param_tags, $param_user_id);
+				if ($stmt = mysqli_prepare($conn, $sql)) {
+					// Bind the smelly smelly
+					mysqli_stmt_bind_param($stmt, "ssss", $param_image_name, $param_alt_text, $param_tags, $param_user_id);
 
-          // Setting up parameters
-          $param_image_name = $image_newname;
-          $param_alt_text = $_POST['alt'];
-          $param_user_id = $_SESSION['id'];
-          $param_tags = $tags;
+					// Setting up parameters
+					$param_image_name = $image_newname;
+					$param_alt_text = $_POST['alt'];
+					$param_user_id = $_SESSION['id'];
+					$param_tags = $tags;
 
-          // Attempt to execute the prepared statement
-          if (mysqli_stmt_execute($stmt)) {
-            ?>
-            <script>
-              sniffleAdd(':3', 'Your Image uploaded successfully!', 'var(--green)', 'assets/icons/check.svg');
-            </script>
-            <?php
-          } else {
-            ?>
-            <script>
-              sniffleAdd(':c', 'Something went fuckywucky, please try later', 'var(--red)', 'assets/icons/cross.svg');
-            </script>
-            <?php
-          }
-        }
-      } else {
-        ?>
-        <script>
-          sniffleAdd('Hmmff', 'Something happened when moving the file to the server. This may just been a 1-off so try again', 'var(--red)', 'assets/icons/bug.svg');
-        </script>
-        <?php
-      }
-    } else {
-      ?>
-      <script>
-        sniffleAdd('Woopsie', 'The file type you are trying to upload is not supported. Supported files include: JPEG, JPG, PNG and WEBP', 'var(--red)', 'assets/icons/cross.svg');
-      </script>
-      <?php
-    }
-  } else {
-    ?>
-    <script>
-      sniffleAdd('Denied!!!', 'As you are not loggedin, your upload has been stopped, L', 'var(--red)', 'assets/icons/cross.svg');
-    </script>
-    <?php
-  }
+					// Attempt to execute the prepared statement
+					if (mysqli_stmt_execute($stmt)) {
+						?>
+							<script>
+								sniffleAdd(':3', 'Your Image uploaded successfully!', 'var(--green)', 'assets/icons/check.svg');
+							</script>
+						<?php
+					} else {
+						?>
+							<script>
+								sniffleAdd(':c', 'Something went fuckywucky, please try later', 'var(--red)', 'assets/icons/cross.svg');
+							</script>
+						<?php
+					}
+				}
+			} else {
+				?>
+					<script>
+						sniffleAdd('Hmmff', 'Something happened when moving the file to the server. This may just been a 1-off so try again', 'var(--red)', 'assets/icons/bug.svg');
+					</script>
+				<?php
+			}
+		} else {
+			?>
+				<script>
+					sniffleAdd('Woopsie', 'The file type you are trying to upload is not supported. Supported files include: JPEG, JPG, PNG and WEBP', 'var(--red)', 'assets/icons/cross.svg');
+				</script>
+			<?php
+		}
+	} else {
+		?>
+			<script>
+				sniffleAdd('Denied!!!', 'As you are not loggedin, your upload has been stopped, L', 'var(--red)', 'assets/icons/cross.svg');
+			</script>
+		<?php
+	}
 }
diff --git a/.env b/app/settings/.env
similarity index 100%
rename from .env
rename to app/settings/.env
diff --git a/Gallery/GetEnv.php b/app/settings/GetEnv.php
similarity index 100%
rename from Gallery/GetEnv.php
rename to app/settings/GetEnv.php
diff --git a/css/main.css b/css/main.css
index b78a2f5..f67e75b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -320,6 +320,28 @@ nav .btn {
   max-height: inherit;
   height: auto;
   border-radius: 0rem;
+  transition: opacity 0.5s;
+}
+
+.preview-button {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  display: block;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: "Secular One", sans-serif;
+  text-decoration: none;
+  border: none;
+  border-radius: calc(0rem - (0.5rem + 3px));
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+  background-color: #151515;
+  opacity: 0.8;
+}
+.preview-button:hover {
+  outline: #E8E3E3 0.2rem solid;
+  color: #E8E3E3;
 }
 
 .image-description {
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 02924f8..05e59e9 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -201,6 +201,37 @@
     height: auto;
 
     border-radius: $rad;
+
+    transition: opacity 0.5s;
+}
+
+.preview-button {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+
+    display: block;
+    box-sizing: border-box;
+
+    font-size: 14px;
+    font-weight: 500;
+    font-family: $font-body;
+
+    text-decoration: none;
+
+    border: none;
+    border-radius: calc($rad - (0.5rem + 3px));
+
+    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+
+    background-color: $black;
+
+    opacity: 0.8;
+
+    &:hover {
+        outline: $white 0.2rem solid;
+        color: $fg;
+    }
 }
 
 // DESCRIPTION
diff --git a/image.php b/image.php
index b537bf8..5ffa70f 100644
--- a/image.php
+++ b/image.php
@@ -128,13 +128,31 @@
 	} else {
 		$privilaged = False;
 	}
-	?>
 
-	<div class="image-container">
-		<img class='image' id='<?php echo $image['id']; ?>' src='<?php echo $image_path; ?>' alt='<?php echo $image_alt; ?>'>
-	</div>
+	if (is_file("images/previews/".$image['imagename'])) {
+		echo "<div class='image-container'>
+		<img class='image' id='".$image['id']."' src='images/previews/".$image['imagename']."' alt='".$image_alt."'>
+		<button class='preview-button' onclick='showFull()'>Show full quality</button>
+		</div>";
+		?>
+			<script>
+				function showFull() {
+					document.querySelector(".image").style.opacity = 0;
+					document.querySelector(".preview-button").style.display = "none";
+					setTimeout(function(){
+						document.querySelector(".image").src = "<?php echo $image_path;?>";
+						document.querySelector(".image").style.opacity = 1;
+					}, 500);
+				}
+			</script>
+		<?php
+	} else {
+		echo "<div class='image-container'>
+		<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
+		</div>";
+	}
+
 
-	<?php
 	/*
 	 |-------------------------------------------------------------
 	 | Start of displaying all info on image