From b05015e76e1a8d20a801bbcd059edf5166ab6b2c Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:02:58 +0200 Subject: [PATCH 1/8] AlbumIndex: rewrite to use Bootstrap grid for tiles --- public/css/default.css | 26 +++++++++-- templates/AlbumIndex.php | 96 ++++++++++++++++++++-------------------- 2 files changed, 70 insertions(+), 52 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index 5f61392e..a2df598f 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -177,6 +177,13 @@ i.space-invader.alt-7::before { } +/* Album index +----------------*/ +.album-index { + clear: both; +} + + /* Tiled grid ---------------*/ .tiled_header { @@ -199,23 +206,29 @@ i.space-invader.alt-7::before { padding: 0; list-style: none; } + +div.polaroid, .tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama, .tiled_grid div.duo, .tiled_grid div.single { background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); - float: left; + /*float: left;*/ line-height: 0; - margin: 0 3.5% 3.5% 0; - overflow: hidden; +/* margin: 0 3.5% 3.5% 0;*/ +/* overflow: hidden;*/ position: relative; - width: 31%; + /*width: 31%;*/ } + +div.polaroid img, .tiled_grid div img { background: url('../images/nothumb.svg') center no-repeat; border: none; object-fit: cover; width: 100%; } + +div.polaroid h4, .tiled_grid div h4 { color: #000; margin: 0; @@ -226,9 +239,14 @@ i.space-invader.alt-7::before { white-space: nowrap; overflow: hidden; } + +div.polaroid a, .tiled_grid div a { + display: block; text-decoration: none; } + +div.polaroid:hover, .tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover, .tiled_grid div.duo:hover, .tiled_grid div.single:hover { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); diff --git a/templates/AlbumIndex.php b/templates/AlbumIndex.php index ebfe9c1f..676b8717 100644 --- a/templates/AlbumIndex.php +++ b/templates/AlbumIndex.php @@ -15,6 +15,7 @@ class AlbumIndex extends Template const TILE_WIDTH = 400; const TILE_HEIGHT = 300; + const TILE_RATIO = self::TILE_WIDTH / self::TILE_HEIGHT; public function __construct(array $albums, $show_edit_buttons = false, $show_labels = true) { @@ -26,57 +27,56 @@ class AlbumIndex extends Template public function html_main() { echo ' -
'; +
+
'; - foreach (array_chunk($this->albums, 3) as $photos) - { - echo ' -
'; - - foreach ($photos as $album) - { - echo ' -
'; - - if ($this->show_edit_buttons) - echo ' - Edit'; - - echo ' - '; - - if (isset($album['thumbnail'])) - { - $thumbs = []; - foreach ([1, 2] as $factor) - $thumbs[$factor] = $album['thumbnail']->getThumbnailUrl( - static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true); - - echo ' - '; - } - else - echo ' - '; - - if ($this->show_labels) - echo ' -

', $album['caption'], '

'; - - echo ' - -
'; - } - - echo ' -
'; - } + foreach ($this->albums as $album) + $this->renderAlbum($album); echo ' +
'; } + + private function renderAlbum(array $album) + { + echo ' +
+
'; + + if ($this->show_edit_buttons) + echo ' + Edit'; + + echo ' + '; + + if (isset($album['thumbnail'])) + { + $thumbs = []; + foreach ([1, 2] as $factor) + $thumbs[$factor] = $album['thumbnail']->getThumbnailUrl( + static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true); + + echo ' + '; + } + else + { + echo ' + '; + } + + if ($this->show_labels) + echo ' +

', $album['caption'], '

'; + + echo ' + +
+
'; + } } From cfb5ab9d829dfe26191a9f2703f4d6d5ac1a5da0 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:29:14 +0200 Subject: [PATCH 2/8] PhotosIndex: rewrite to use Bootstrap grid for tiles --- public/css/admin.css | 10 ++--- public/css/default.css | 11 +++-- templates/PhotosIndex.php | 93 ++++++++++++++++++++++++++++++++------- 3 files changed, 86 insertions(+), 28 deletions(-) diff --git a/public/css/admin.css b/public/css/admin.css index 92c27363..6be934e2 100644 --- a/public/css/admin.css +++ b/public/css/admin.css @@ -1,21 +1,21 @@ /* Edit icon on tiled grids -----------------------------*/ -.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama { +.polaroid { position: relative; } -.tiled_grid div > a.edit { +.polaroid a.edit { background: #fff; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); - display: none; + display: none !important; left: 20px; line-height: 1.5; padding: 5px 10px; position: absolute; top: 20px; } -.tiled_grid div:hover > a.edit { - display: block; +.polaroid:hover > a.edit { + display: block !important; } diff --git a/public/css/default.css b/public/css/default.css index a2df598f..5fa1743c 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -179,26 +179,25 @@ i.space-invader.alt-7::before { /* Album index ----------------*/ -.album-index { +.album-index, .photo-index { clear: both; } /* Tiled grid ---------------*/ -.tiled_header { +.tiled-header > a { background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); border-radius: 0.5rem; color: #000; - clear: both; - float: left; - margin: 0 0 1.5% 0; + display: inline-block; font: 400 18px/2.2 'Coda', sans-serif; + margin: 0 0 1.5% 0; + overflow: hidden; padding: 6px 22px; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; } .tiled_grid { diff --git a/templates/PhotosIndex.php b/templates/PhotosIndex.php index 29fa06a7..ee6e8c27 100644 --- a/templates/PhotosIndex.php +++ b/templates/PhotosIndex.php @@ -45,7 +45,7 @@ class PhotosIndex extends Template public function html_main() { echo ' -
'; +
'; for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--) { @@ -74,9 +74,9 @@ class PhotosIndex extends Template $name = str_replace(' ', '', strtolower($header)); echo ' -

- ', $header, ' -

'; +

+ ', $header, ' +

'; $this->previous_header = $header; } @@ -84,7 +84,7 @@ class PhotosIndex extends Template protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true) { echo ' -
'; +
'; if ($this->show_edit_buttons) echo ' @@ -100,7 +100,10 @@ class PhotosIndex extends Template else echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"'; - echo ' alt="" title="', $image->getTitle(), '" style="width: ', $width, 'px; height: ', $height, 'px">'; + // 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, '">'; if ($this->show_labels) echo ' @@ -115,7 +118,17 @@ class PhotosIndex extends Template protected function panorama(array $photos) { foreach ($photos as $image) + { + echo ' +
+
'; + $this->photo($image, 'panorama', static::PANORAMA_WIDTH, static::PANORAMA_HEIGHT, false, false); + + echo ' +
+
'; + } } protected function portrait(array $photos) @@ -123,19 +136,29 @@ class PhotosIndex extends Template $image = array_shift($photos); echo ' -
-
'; +
+
'; $this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, 'centre'); echo '
-
'; +
+
'; foreach ($photos as $image) - $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'centre'); + { + echo ' +
'; + + $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top'); + + echo ' +
'; + } echo ' +
'; } @@ -145,19 +168,29 @@ class PhotosIndex extends Template $image = array_shift($photos); echo ' -
-
'; +
+
'; $this->photo($image, 'landscape', static::LANDSCAPE_WIDTH, static::LANDSCAPE_HEIGHT, 'top'); echo '
-
'; +
+
'; foreach ($photos as $image) + { + echo ' +
'; + $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top'); + echo ' +
'; + } + echo ' +
'; } @@ -165,11 +198,19 @@ class PhotosIndex extends Template protected function duo(array $photos) { echo ' -
'; +
'; foreach ($photos as $image) + { + echo ' +
'; + $this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true); + echo ' +
'; + } + echo '
'; } @@ -177,23 +218,33 @@ class PhotosIndex extends Template protected function single(array $photos) { echo ' -
'; +
+
'; $image = array_shift($photos); $this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top'); echo ' +
'; } protected function row(array $photos) { echo ' -
'; +
'; foreach ($photos as $image) + { + echo ' +
'; + $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true); + echo ' +
'; + } + echo '
'; } @@ -201,11 +252,19 @@ class PhotosIndex extends Template protected function portraits(array $photos) { echo ' -
'; +
'; foreach ($photos as $image) + { + echo ' +
'; + $this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, true); + echo ' +
'; + } + echo '
'; } From 31ea4196cfbf698980b3a62f9d89fe1b017d0c83 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:36:03 +0200 Subject: [PATCH 3/8] Remove old grid from stylesheet --- public/css/default.css | 120 +++-------------------------------------- 1 file changed, 7 insertions(+), 113 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index 5fa1743c..197db326 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -177,15 +177,12 @@ i.space-invader.alt-7::before { } -/* Album index -----------------*/ +/* Album and photo index pages +--------------------------------*/ .album-index, .photo-index { clear: both; } - -/* Tiled grid ----------------*/ .tiled-header > a { background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); @@ -200,35 +197,19 @@ i.space-invader.alt-7::before { white-space: nowrap; } -.tiled_grid { - margin: 0; - padding: 0; - list-style: none; -} - -div.polaroid, -.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama, -.tiled_grid div.duo, .tiled_grid div.single { +div.polaroid { background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); - /*float: left;*/ line-height: 0; -/* margin: 0 3.5% 3.5% 0;*/ -/* overflow: hidden;*/ position: relative; - /*width: 31%;*/ } - -div.polaroid img, -.tiled_grid div img { +div.polaroid img { background: url('../images/nothumb.svg') center no-repeat; border: none; object-fit: cover; width: 100%; } - -div.polaroid h4, -.tiled_grid div h4 { +div.polaroid h4 { color: #000; margin: 0; font: 400 18px 'Coda', sans-serif; @@ -238,101 +219,14 @@ div.polaroid h4, white-space: nowrap; overflow: hidden; } - -div.polaroid a, -.tiled_grid div a { +div.polaroid a { display: block; text-decoration: none; } - -div.polaroid:hover, -.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover, -.tiled_grid div.duo:hover, .tiled_grid div.single:hover { +div.polaroid:hover { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } -/* Panoramas */ -.tiled_grid div.panorama, .tiled_grid .tiled_row { - clear: both; - float: left; - width: 100%; - margin-right: 0; -} - -/* Tiling: one landscape, two tiles */ -.tiled_row .column_landscape { - float: left; - width: 65.5%; - margin: 0 3.5% 3.5% 0; -} -.tiled_row .column_landscape div { - width: auto; - margin: 0; -} - -.tiled_row .column_tiles_two { - float: left; - width: 31%; -} -.tiled_row .column_tiles_two div { - float: left; - width: 100%; - margin: 0 0 10% 0; -} - -/* Tiling: big portrait, four tiles */ -.tiled_row .column_portrait { - float: left; - width: 31%; - margin: 0 3.5% 3.5% 0; -} -.tiled_row .column_portrait div { - width: auto; - margin: 0; -} - -.tiled_row .column_tiles_four { - float: left; - width: 65.5%; -} -.tiled_row .column_tiles_four div { - float: left; - width: 47.45%; - margin: 0 5% 5% 0; -} - -/* Tiling: two tiles */ -.tiled_row .duo { - width: 48.25% !important; -} - -/* Tiling: one tile */ -.tiled_row .single { - width: 48.25% !important; -} - -/* Tiling: remove horizontal margin at end of row. */ -.tiled_row > div:nth-child(3n), -.tiled_row > .duo:nth-child(2) { - margin-right: 0 !important; -} -.tiled_row .column_tiles_four > div:nth-child(2n) { - margin-right: 0; -} - -/* Tiling: switch places for odd rows */ -.tiled_row:nth-child(odd) .column_landscape, -.tiled_row:nth-child(odd) .column_portrait { - float: right; - margin: 0 0 3.5% 3.5%; -} -.tiled_row:nth-child(odd) .column_tiles_four { - float: right; -} -.tiled_row:nth-child(odd) .column_tiles_two { - float: right; -} - /* Album title boxes ----------------------*/ From 68ef80fb9f0c9bd204632bfdb4b157a83a8e911a Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:40:19 +0200 Subject: [PATCH 4/8] PhotoMosaic: improve heuristic for landscape/portrait row --- models/PhotoMosaic.php | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/models/PhotoMosaic.php b/models/PhotoMosaic.php index db86be70..7cf1baa8 100644 --- a/models/PhotoMosaic.php +++ b/models/PhotoMosaic.php @@ -165,7 +165,10 @@ class PhotoMosaic return [$photos, 'single']; } - // A boring set it is, then. - return [$photos, 'row']; + // Last resort: majority vote + if ($num_portrait > $num_landscape) + return [$photos, 'portraits']; + else + return [$photos, 'row']; } } From be909bf54dd4e3e2b5a5901a58a2b0bc12be2da4 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:41:24 +0200 Subject: [PATCH 5/8] PhotosIndex: rename 'row' layout to 'landscapes' --- models/PhotoMosaic.php | 2 +- templates/PhotosIndex.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/models/PhotoMosaic.php b/models/PhotoMosaic.php index 7cf1baa8..901e8a0e 100644 --- a/models/PhotoMosaic.php +++ b/models/PhotoMosaic.php @@ -169,6 +169,6 @@ class PhotoMosaic if ($num_portrait > $num_landscape) return [$photos, 'portraits']; else - return [$photos, 'row']; + return [$photos, 'landscapes']; } } diff --git a/templates/PhotosIndex.php b/templates/PhotosIndex.php index ee6e8c27..499038b1 100644 --- a/templates/PhotosIndex.php +++ b/templates/PhotosIndex.php @@ -229,7 +229,7 @@ class PhotosIndex extends Template
'; } - protected function row(array $photos) + protected function landscapes(array $photos) { echo '
'; From d315f4d0c20ab4a17fb37ea4599df6c4a350056b Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:45:06 +0200 Subject: [PATCH 6/8] AlbumHeaderBox: fix slight misalignment The 'back' arrow was one pixel taller than the header itself. Couldn't let that slide :-) --- public/css/default.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index 197db326..c8c9073b 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -231,7 +231,7 @@ div.polaroid:hover { /* Album title boxes ----------------------*/ .album_title_box { - margin-left: -46px; + margin-left: -2.85rem; width: 100%; } .album_title_box > a { @@ -241,7 +241,7 @@ div.polaroid:hover { border-bottom-left-radius: 0.5rem; display: inline-block; float: left; - font-size: 2em; + font-size: 2rem; line-height: 1; padding: 8px 10px; } @@ -252,7 +252,7 @@ div.polaroid:hover { border-bottom-right-radius: 0.5rem; float: left; font: inherit; - padding: 6px 22px; + padding: 0.4rem 1.3rem; max-width: 90%; margin: 0 0 1.5% 0; } From 9fcde24c39ccf7caa181be4931943804f7c4a34a Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 14:53:40 +0200 Subject: [PATCH 7/8] PhotosIndex: reintroduce alternating odd/even layouts --- templates/PhotosIndex.php | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/templates/PhotosIndex.php b/templates/PhotosIndex.php index 499038b1..196e870c 100644 --- a/templates/PhotosIndex.php +++ b/templates/PhotosIndex.php @@ -51,7 +51,7 @@ class PhotosIndex extends Template { list($photos, $what) = $row; $this->header($photos); - $this->$what($photos); + $this->$what($photos, $i % 2); } echo ' @@ -115,7 +115,7 @@ class PhotosIndex extends Template
'; } - protected function panorama(array $photos) + protected function panorama(array $photos, $altLayout) { foreach ($photos as $image) { @@ -131,12 +131,13 @@ class PhotosIndex extends Template } } - protected function portrait(array $photos) + protected function portrait(array $photos, $altLayout) { $image = array_shift($photos); echo ' -
+
'; $this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, 'centre'); @@ -163,12 +164,13 @@ class PhotosIndex extends Template
'; } - protected function landscape(array $photos) + protected function landscape(array $photos, $altLayout) { $image = array_shift($photos); echo ' -
+
'; $this->photo($image, 'landscape', static::LANDSCAPE_WIDTH, static::LANDSCAPE_HEIGHT, 'top'); @@ -195,7 +197,7 @@ class PhotosIndex extends Template
'; } - protected function duo(array $photos) + protected function duo(array $photos, $altLayout) { echo '
'; @@ -215,7 +217,7 @@ class PhotosIndex extends Template
'; } - protected function single(array $photos) + protected function single(array $photos, $altLayout) { echo '
@@ -229,7 +231,7 @@ class PhotosIndex extends Template
'; } - protected function landscapes(array $photos) + protected function landscapes(array $photos, $altLayout) { echo '
'; @@ -249,7 +251,7 @@ class PhotosIndex extends Template
'; } - protected function portraits(array $photos) + protected function portraits(array $photos, $altLayout) { echo '
'; From 87777a6ace2fa7f3df532d15c368392a1d7625b3 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Sat, 1 Apr 2023 15:01:14 +0200 Subject: [PATCH 8/8] Fixup: cleanup responsive styles too --- public/css/default.css | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/public/css/default.css b/public/css/default.css index c8c9073b..32ac1f9f 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -461,27 +461,15 @@ a#previous_photo:hover, a#next_photo:hover { margin-left: 0; } - .tiled_header { + .tiled-header { font-size: 14px; margin: 0 0 3.5% 0; } - .tiled_grid div h4 { + .panorama h4 { font-size: 14px; padding: 15px 5px; } - .tiled_row > div, .tiled_row .single, .tiled_row .duo { - float: none !important; - width: 100% !important; - margin: 0 0 5% !important; - } - - .tiled_row > div > div { - float: none !important; - width: 100% !important; - margin: 0 0 5% !important; - } - #previous_photo, #next_photo { display: none; }