mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-29 17:28:27 +00:00
Lower resolution image preview
This commit is contained in:
parent
3847020ae7
commit
41d98a7d47
20
app/format/create_thumbnail.php
Normal file
20
app/format/create_thumbnail.php
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
22
css/main.css
22
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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
28
image.php
28
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue