From a69c9875102c1e8c44bca7a9bec51bcd344881b4 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 10 Nov 2023 21:57:23 +0100 Subject: [PATCH 1/7] PhotosIndex: add blurred versions of thumbnails for added coolness --- public/css/default.css | 36 ++++++++++++++++++++++++++++++------ templates/PhotosIndex.php | 28 +++++++++++++++++----------- 2 files changed, 47 insertions(+), 17 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index 32ac1f9f..d2d0edb5 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -199,33 +199,57 @@ i.space-invader.alt-7::before { div.polaroid { background: #fff; - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); line-height: 0; position: relative; + transition: 0.25s; } -div.polaroid img { - background: url('../images/nothumb.svg') center no-repeat; +div.polaroid:hover { + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); +} +div.polaroid img.normal-photo { + background: #fff url('../images/nothumb.svg') center no-repeat; border: none; + left: 0; object-fit: cover; + position: absolute; + top: 0; width: 100%; + z-index: 20; +} +div.polaroid img.blur-photo { + filter: blur(50px); + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + z-index: 0; +} +div.polaroid img.placeholder-image { + background: #fff; + z-index: 20; } div.polaroid h4 { + background: #fff; + bottom: 0; color: #000; margin: 0; font: 400 18px 'Coda', sans-serif; padding: 15px 5px; + position: absolute; text-overflow: ellipsis; text-align: center; + width: 100%; white-space: nowrap; overflow: hidden; + z-index: 20; } div.polaroid a { display: block; text-decoration: none; } -div.polaroid:hover { - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -} + /* Album title boxes diff --git a/templates/PhotosIndex.php b/templates/PhotosIndex.php index 196e870c..b01a9230 100644 --- a/templates/PhotosIndex.php +++ b/templates/PhotosIndex.php @@ -83,27 +83,33 @@ class PhotosIndex extends Template protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true) { + // Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio. + $aspectRatio = isset($width, $height) ? $width / $height : $image->ratio(); + echo ' -
'; +
'; if ($this->show_edit_buttons) echo ' Edit'; echo ' - + '; + + + foreach (['normal-photo', 'blur-photo'] as $className) + { + echo ' width() >= $width * 2 && $image->height() >= $height * 2) - echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"'; - else - echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"'; + // Can we offer double-density thumbs? + if ($image->width() >= $width * 2 && $image->height() >= $height * 2) + echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"'; + else + echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"'; - // Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio. - $aspectRatio = isset($width, $height) ? $width / $height : $image->ratio(); - - echo ' alt="" title="', $image->getTitle(), '" style="aspect-ratio: ', $aspectRatio, '">'; + echo ' alt="" title="', $image->getTitle(), '" class="', $className, '" style="aspect-ratio: ', $aspectRatio, '">'; + } if ($this->show_labels) echo ' From 66478c59225f4b61cd6d35fc6430227b32cd7678 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 10 Nov 2023 21:57:53 +0100 Subject: [PATCH 2/7] AlbumIndex: use blurred images for albums as well --- templates/AlbumIndex.php | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/templates/AlbumIndex.php b/templates/AlbumIndex.php index 676b8717..aa483856 100644 --- a/templates/AlbumIndex.php +++ b/templates/AlbumIndex.php @@ -42,7 +42,7 @@ class AlbumIndex extends Template { echo '
-
'; +
'; if ($this->show_edit_buttons) echo ' @@ -58,15 +58,20 @@ class AlbumIndex extends Template $thumbs[$factor] = $album['thumbnail']->getThumbnailUrl( static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true); - echo ' + foreach (['normal-photo', 'blur-photo'] as $className) + { + echo ' '; + } } else { echo ' '; } From aa82efe03e29787ebfc3f4da34c612ca461e625e Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 10 Nov 2023 22:50:51 +0100 Subject: [PATCH 3/7] PhotoPage: trying out blur on the photo page --- public/css/default.css | 52 +++++++++++++++++++++++++++++++++++------ templates/PhotoPage.php | 26 ++++++++++++++++----- 2 files changed, 65 insertions(+), 13 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index d2d0edb5..c3ff9bd2 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -390,22 +390,60 @@ footer a { /* Styling for the photo pages --------------------------------*/ -#photo_frame { - padding-top: 1.5vh; - text-align: center; -} -#photo_frame a { +#photo-figure { + position: relative; } -#photo_frame a img { +#photo-figure img.normal-photo { border: none; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); cursor: -moz-zoom-in; display: inline-block; - height: 97vh; max-width: 100%; object-fit: contain; width: auto; + z-index: 20; + position: absolute; + left: 0; + top: 0; +} +#photo-figure img.blur-photo { + filter: blur(50px); + left: 0; + object-fit: contain; + position: absolute; + top: 0; + width: auto; + z-index: 0; +} + +#photo_frame { + padding-top: 1.5vh; + text-align: center; + height: 97vh; +} + +figure.portrait-figure, +figure.landscape-figure { + height: 97vh; + margin: 0 auto; +} +figure.panorama-figure { + width: 90vw; + object-fit: cover; + margin: 0 auto; +} +figure.portrait-figure img.normal-photo, +figure.portrait-figure img.blur-photo, +figure.landscape-figure img.normal-photo, +figure.landscape-figure img.blur-photo { + height: 100%; + width: 100%; +} +figure.panorama-figure img.normal-photo, +figure.panorama-figure img.blur-photo { + width: 100%; + height: auto; } #previous_photo, #next_photo { diff --git a/templates/PhotoPage.php b/templates/PhotoPage.php index 52b6fe59..f26a8c7b 100644 --- a/templates/PhotoPage.php +++ b/templates/PhotoPage.php @@ -67,17 +67,31 @@ class PhotoPage extends Template protected function photo() { echo ' - + '; } private function photoNav() From 9b192aa7a6d7c49d3797f67790a98f25f10f627e Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 10 Nov 2023 23:22:09 +0100 Subject: [PATCH 4/7] PhotoPage: fix position and size of blurred photo --- public/css/default.css | 17 +++++++---------- templates/PhotoPage.php | 4 ++-- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index c3ff9bd2..399c8bf6 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -391,17 +391,21 @@ footer a { /* Styling for the photo pages --------------------------------*/ +#photo_frame { + padding-top: 1.5vh; + text-align: center; + height: 97vh; +} + #photo-figure { position: relative; + object-fit: contain; } #photo-figure img.normal-photo { border: none; - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); cursor: -moz-zoom-in; display: inline-block; - max-width: 100%; object-fit: contain; - width: auto; z-index: 20; position: absolute; left: 0; @@ -413,15 +417,9 @@ footer a { object-fit: contain; position: absolute; top: 0; - width: auto; z-index: 0; } -#photo_frame { - padding-top: 1.5vh; - text-align: center; - height: 97vh; -} figure.portrait-figure, figure.landscape-figure { @@ -429,7 +427,6 @@ figure.landscape-figure { margin: 0 auto; } figure.panorama-figure { - width: 90vw; object-fit: cover; margin: 0 auto; } diff --git a/templates/PhotoPage.php b/templates/PhotoPage.php index f26a8c7b..a4bcbb2f 100644 --- a/templates/PhotoPage.php +++ b/templates/PhotoPage.php @@ -73,7 +73,7 @@ class PhotoPage extends Template if ($this->photo->isPortrait()) { echo ' -
', +
', $this->photo->getInlineImage(null, 960, 'normal-photo'), $this->photo->getInlineImage(null, 960, 'blur-photo'), '
'; @@ -82,7 +82,7 @@ class PhotoPage extends Template { $className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure'; echo ' -
', +
', $this->photo->getInlineImage(1280, null, 'normal-photo'), $this->photo->getInlineImage(1280, null, 'blur-photo'), '
'; From c8bf43b7f9fab4d8fb3305a7784633781c5e87ed Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 10 Nov 2023 23:34:30 +0100 Subject: [PATCH 5/7] PhotoPage: fixed alignment for panoramas (now to simplify...) --- public/css/default.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index 399c8bf6..f47dac31 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -400,11 +400,15 @@ footer a { #photo-figure { position: relative; object-fit: contain; + height: 97vh; + object-position: center center; +} +#photo-figure img { + object-position: center center; } #photo-figure img.normal-photo { border: none; cursor: -moz-zoom-in; - display: inline-block; object-fit: contain; z-index: 20; position: absolute; @@ -440,7 +444,7 @@ figure.landscape-figure img.blur-photo { figure.panorama-figure img.normal-photo, figure.panorama-figure img.blur-photo { width: 100%; - height: auto; + height: 100%; } #previous_photo, #next_photo { From 0133308113ee8bb19613fd324b9744985177c036 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 10 Nov 2023 23:36:49 +0100 Subject: [PATCH 6/7] PhotoPage: simplify styling a little --- public/css/default.css | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index f47dac31..0e47d8d8 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -434,18 +434,11 @@ figure.panorama-figure { object-fit: cover; margin: 0 auto; } -figure.portrait-figure img.normal-photo, -figure.portrait-figure img.blur-photo, -figure.landscape-figure img.normal-photo, -figure.landscape-figure img.blur-photo { +figure#photo-figure img.normal-photo, +figure#photo-figure img.blur-photo { height: 100%; width: 100%; } -figure.panorama-figure img.normal-photo, -figure.panorama-figure img.blur-photo { - width: 100%; - height: 100%; -} #previous_photo, #next_photo { background: #fff; From 0cf8d0fc11601a2db11a52cd373b8eb88803fff1 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 11 Nov 2023 00:10:25 +0100 Subject: [PATCH 7/7] PhotoPage: expand margins slightly --- public/css/default.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index 0e47d8d8..f3913b3d 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -392,15 +392,15 @@ footer a { --------------------------------*/ #photo_frame { - padding-top: 1.5vh; + padding: 3.5vh 0; text-align: center; - height: 97vh; + height: 95vh; } #photo-figure { position: relative; object-fit: contain; - height: 97vh; + height: 93vh; object-position: center center; } #photo-figure img { @@ -424,10 +424,9 @@ footer a { z-index: 0; } - figure.portrait-figure, figure.landscape-figure { - height: 97vh; + height: 93vh; margin: 0 auto; } figure.panorama-figure {