mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-28 06:13:12 +00:00
Added grabbing average image colour function
This commit is contained in:
parent
7abf0c47ce
commit
33927c63ef
9 changed files with 196 additions and 40 deletions
|
|
@ -22,6 +22,10 @@ You will need to install the image-magik PHP plugin for thumbnail creation, on U
|
|||
|
||||
apt install php-imagick
|
||||
|
||||
#### GD2
|
||||
Also install GD2 for image colour extraction, else you may get errors:
|
||||
|
||||
apt install php-gd
|
||||
|
||||
#### PHP and Nginx
|
||||
This project also requires PHP 8.1 and was made with Ubuntu 22.04 LTS and Nginx in mind, so I reccommend running this gallery on such.
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@
|
|||
<p><?php echo $log['action']; ?></p>
|
||||
<?php
|
||||
$log_time = new DateTime($log['time']);
|
||||
echo "<p>" . $log_time->format('Y-m-d H:i:s T') . " | " . $diff->time($log['time']) . "</p>";
|
||||
echo "<p>".$log_time->format('Y-m-d H:i:s T')." (".$diff->time($log['time']).")</p>";
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
<p><?php echo $ban['length']; ?> mins</p>
|
||||
<?php
|
||||
$log_time = new DateTime($ban['time']);
|
||||
echo "<p>" . $log_time->format('Y-m-d H:i:s T') . " | " . $diff->time($ban['time']) . "</p>";
|
||||
echo "<p>".$log_time->format('Y-m-d H:i:s T')." (".$diff->time($ban['time']).")</p>";
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
<p><?php echo $user['username']; ?></p>
|
||||
<?php
|
||||
$user_time = new DateTime($user['created_at']);
|
||||
echo "<p>" . $user_time->format('Y-m-d H:i:s T') . " | " . $diff->time($user['last_modified']) . "</p>";
|
||||
echo "<p>".$user_time->format('Y-m-d H:i:s T')." (".$diff->time($user['last_modified']).")</p>";
|
||||
|
||||
if ($user['id'] == 1) {
|
||||
?>
|
||||
|
|
|
|||
53
app/app.php
53
app/app.php
|
|
@ -2,6 +2,7 @@
|
|||
namespace App;
|
||||
|
||||
use Exception;
|
||||
use Throwable;
|
||||
|
||||
class Make {
|
||||
/*
|
||||
|
|
@ -50,6 +51,54 @@ class Make {
|
|||
|
||||
return trim($string);
|
||||
}
|
||||
|
||||
function get_image_colour($img) {
|
||||
$img_type = pathinfo($img, PATHINFO_EXTENSION);
|
||||
|
||||
if ($img_type == "png") {
|
||||
$img = imagecreatefrompng($img);
|
||||
} elseif ($img_type == "jpg" || $img_type == "jpeg") {
|
||||
$img = imagecreatefromjpeg($img);
|
||||
} elseif ($img_type == "webp") {
|
||||
$img = imagecreatefromwebp($img);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
$w = imagesx($img);
|
||||
$h = imagesy($img);
|
||||
$r = $g = $b = 0;
|
||||
|
||||
for($y = 0; $y < $h; $y++) {
|
||||
for($x = 0; $x < $w; $x++) {
|
||||
$rgb = imagecolorat($img, $x, $y);
|
||||
$r += $rgb >> 16;
|
||||
$g += $rgb >> 8 & 255;
|
||||
$b += $rgb & 255;
|
||||
}
|
||||
}
|
||||
|
||||
$pxls = $w * $h;
|
||||
$r = dechex(round($r / $pxls));
|
||||
$g = dechex(round($g / $pxls));
|
||||
$b = dechex(round($b / $pxls));
|
||||
|
||||
if(strlen($r) < 2) {
|
||||
$r = 0 . $r;
|
||||
}
|
||||
if(strlen($g) < 2) {
|
||||
$g = 0 . $g;
|
||||
}
|
||||
if(strlen($b) < 2) {
|
||||
$b = 0 . $b;
|
||||
}
|
||||
|
||||
return "#" . $r . $g . $b;
|
||||
} catch (Throwable $e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Account {
|
||||
|
|
@ -277,11 +326,11 @@ class Sanity {
|
|||
$manifest = json_decode(file_get_contents(__DIR__."/settings/manifest.json"), true);
|
||||
|
||||
if (!isset($manifest['user_name']) || empty($manifest['user_name']) || $manifest['user_name'] == "[your name]") {
|
||||
$results[] = "Warning: manifest.json is missing yor name";
|
||||
$results[] = "Warning: manifest.json is missing your name";
|
||||
}
|
||||
if ($manifest['upload']['rename_on_upload'] == true ) {
|
||||
if (!isset($manifest['upload']['rename_to']) || empty($manifest['upload']['rename_to'])) {
|
||||
$results[] = "Critical: manifest.json is missing what you're renaming your files to";
|
||||
$results[] = "Critical: manifest.json doesnt know what to rename your files to";
|
||||
} else {
|
||||
$rename_to = $manifest['upload']['rename_to'];
|
||||
$rename_rate = 0;
|
||||
|
|
|
|||
36
css/main.css
36
css/main.css
|
|
@ -251,7 +251,7 @@ nav .btn {
|
|||
max-width: calc(20% - 0.5rem);
|
||||
min-width: calc(20% - 0.5rem);
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1 0 150px;
|
||||
|
|
@ -294,7 +294,7 @@ nav .btn {
|
|||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nsfw-blur {
|
||||
|
|
@ -393,8 +393,8 @@ nav .btn {
|
|||
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1rem);
|
||||
max-height: 50vh;
|
||||
height: auto;
|
||||
min-height: 30vh;
|
||||
|
|
@ -417,7 +417,7 @@ nav .btn {
|
|||
width: auto;
|
||||
max-height: inherit;
|
||||
height: auto;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 3px;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
|
|
@ -431,7 +431,7 @@ nav .btn {
|
|||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 3px;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
z-index: 2;
|
||||
|
|
@ -483,7 +483,7 @@ nav .btn {
|
|||
padding: 0.5rem;
|
||||
display: block;
|
||||
background-color: #8C977D;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
.tag::before {
|
||||
|
|
@ -603,7 +603,7 @@ nav .btn {
|
|||
height: auto;
|
||||
max-width: calc(20% - 0.5rem);
|
||||
min-width: calc(20% - 0.5rem);
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1 0 150px;
|
||||
|
|
@ -626,7 +626,7 @@ nav .btn {
|
|||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: #121212;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -734,7 +734,7 @@ nav .btn {
|
|||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
max-height: 15rem;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -754,7 +754,7 @@ nav .btn {
|
|||
height: 7.813rem;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
background-color: #121212;
|
||||
}
|
||||
.pfp-upload form > * {
|
||||
|
|
@ -799,7 +799,7 @@ nav .btn {
|
|||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log {
|
||||
|
|
@ -846,7 +846,7 @@ nav .btn {
|
|||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ban {
|
||||
|
|
@ -900,7 +900,7 @@ nav .btn {
|
|||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.user {
|
||||
|
|
@ -1029,7 +1029,7 @@ body * {
|
|||
font-family: "Secular One", sans-serif;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.btn:hover {
|
||||
|
|
@ -1045,7 +1045,7 @@ body * {
|
|||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn:where(input[type=file])::file-selector-button {
|
||||
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||
|
|
@ -1055,7 +1055,7 @@ body * {
|
|||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
|
|
@ -1152,7 +1152,7 @@ a.link:hover {
|
|||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 50%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,11 @@ body {
|
|||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
||||
|
||||
|
|
@ -102,7 +106,11 @@ body {
|
|||
background-color: $white;
|
||||
|
||||
border: none;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +213,12 @@ a.link {
|
|||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: 50%;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
box-shadow: $shadow;
|
||||
|
||||
transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||
|
|
|
|||
|
|
@ -72,7 +72,11 @@
|
|||
min-width: calc(20% - 0.5rem);
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -126,7 +130,11 @@
|
|||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.nsfw-blur {
|
||||
|
|
@ -253,9 +261,9 @@
|
|||
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0;
|
||||
padding: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
width: calc(100% - 1rem);
|
||||
max-height: 50vh;
|
||||
height: auto;
|
||||
min-height: 30vh;
|
||||
|
|
@ -284,7 +292,11 @@
|
|||
max-height: inherit;
|
||||
height: auto;
|
||||
|
||||
border-radius: $rad;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
|
@ -302,7 +314,11 @@
|
|||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
border-radius: $rad;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
||||
|
||||
|
|
@ -370,7 +386,11 @@
|
|||
|
||||
background-color: $page-accent;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
font-family: $font-body;
|
||||
|
||||
|
|
@ -526,7 +546,11 @@
|
|||
max-width: calc(20% - 0.5rem);
|
||||
min-width: calc(20% - 0.5rem);
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -556,7 +580,11 @@
|
|||
padding: 0;
|
||||
|
||||
background-color: $black;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
border: none;
|
||||
|
||||
top: 0;
|
||||
|
|
@ -684,7 +712,11 @@
|
|||
max-width: 100%;
|
||||
max-height: 15rem;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -707,7 +739,11 @@
|
|||
|
||||
object-fit: cover;
|
||||
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
background-color: $black;
|
||||
}
|
||||
|
|
@ -759,7 +795,11 @@
|
|||
display: none; flex-direction: column;
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.log {
|
||||
min-width: 850px;
|
||||
|
|
@ -811,7 +851,11 @@
|
|||
display: none; flex-direction: column;
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.ban {
|
||||
min-width: 900px;
|
||||
|
|
@ -869,7 +913,11 @@
|
|||
display: none; flex-direction: column;
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.user {
|
||||
min-width: 950px;
|
||||
|
|
|
|||
10
group.php
10
group.php
|
|
@ -152,6 +152,16 @@
|
|||
if ($_SESSION['id'] == $group['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
|
||||
echo "<a href='group.php?id=".$_GET['id']."&mode=edit' class='btn btn-neutral'>Edit</a>";
|
||||
}
|
||||
?>
|
||||
<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy link</button>
|
||||
<script>
|
||||
function copyLink() {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
|
||||
sniffleAdd("Info", "Link has been copied!", "var(--success)", "assets/icons/clipboard-text.svg");
|
||||
}
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
echo "</div>";
|
||||
|
|
|
|||
16
image.php
16
image.php
|
|
@ -1,10 +1,12 @@
|
|||
<?php
|
||||
require_once __DIR__."/app/required.php";
|
||||
|
||||
use App\Make;
|
||||
use App\Account;
|
||||
use App\Image;
|
||||
use App\Diff;
|
||||
|
||||
$make_stuff = new Make();
|
||||
$image_info = new Image;
|
||||
$user_info = new Account;
|
||||
$diff = new Diff();
|
||||
|
|
@ -89,6 +91,20 @@
|
|||
if (isset($image['imagename'])) {
|
||||
$image_path = "images/".$image['imagename'];
|
||||
$image_alt = $image['alt'];
|
||||
|
||||
$image_colour = $make_stuff->get_image_colour($image_path);
|
||||
if (!empty($image_colour)) {
|
||||
$image_colour = $image_colour;
|
||||
} else {
|
||||
$image_colour = "var(--bg)";
|
||||
}
|
||||
?>
|
||||
<style>
|
||||
.image-container, .fullscreen-image {
|
||||
background-color: <?php echo $image_colour; ?>55 !important;
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
} else {
|
||||
$image_path = "assets/no_image.png";
|
||||
$image_alt = "No image could be found, sowwy";
|
||||
|
|
|
|||
20
profile.php
20
profile.php
|
|
@ -1,9 +1,11 @@
|
|||
<?php
|
||||
require_once __DIR__."/app/required.php";
|
||||
|
||||
use App\Account;
|
||||
use App\Diff;
|
||||
use App\Make;
|
||||
use App\Account;
|
||||
use App\Diff;
|
||||
|
||||
$make_stuff = new Make();
|
||||
$user_info = new Account();
|
||||
$diff = new Diff();
|
||||
|
||||
|
|
@ -30,6 +32,20 @@
|
|||
if (!empty($user)) {
|
||||
if (is_file("images/pfp/".$user['pfp_path'])) {
|
||||
echo "<img src='images/pfp/".$user['pfp_path']."'>";
|
||||
|
||||
$pfp_colour = $make_stuff->get_image_colour("images/pfp/".$user['pfp_path']);
|
||||
if (!empty($pfp_colour)) {
|
||||
$pfp_colour = $pfp_colour;
|
||||
} else {
|
||||
$pfp_colour = "var(--bg-3)";
|
||||
}
|
||||
?>
|
||||
<style>
|
||||
.profile-root {
|
||||
background-image: linear-gradient(to right, <?php echo $pfp_colour; ?>, var(--bg-3)) !important;
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
} else {
|
||||
echo "<img src='assets/no_image.png'>";
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue