diff --git a/models/PhotoMosaic.php b/models/PhotoMosaic.php index db86be70..901e8a0e 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, 'landscapes']; } } 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 5f61392e..32ac1f9f 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -177,46 +177,39 @@ i.space-invader.alt-7::before { } -/* Tiled grid ----------------*/ -.tiled_header { +/* Album and photo index pages +--------------------------------*/ +.album-index, .photo-index { + clear: both; +} + +.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 { - margin: 0; - padding: 0; - list-style: none; -} -.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%; } -.tiled_grid div img { +div.polaroid img { background: url('../images/nothumb.svg') center no-repeat; border: none; object-fit: cover; width: 100%; } -.tiled_grid div h4 { +div.polaroid h4 { color: #000; margin: 0; font: 400 18px 'Coda', sans-serif; @@ -226,101 +219,19 @@ i.space-invader.alt-7::before { white-space: nowrap; overflow: hidden; } -.tiled_grid div a { +div.polaroid a { + display: block; text-decoration: none; } -.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 ----------------------*/ .album_title_box { - margin-left: -46px; + margin-left: -2.85rem; width: 100%; } .album_title_box > a { @@ -330,7 +241,7 @@ i.space-invader.alt-7::before { border-bottom-left-radius: 0.5rem; display: inline-block; float: left; - font-size: 2em; + font-size: 2rem; line-height: 1; padding: 8px 10px; } @@ -341,7 +252,7 @@ i.space-invader.alt-7::before { 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; } @@ -550,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; } 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 ' + +
+
'; + } } diff --git a/templates/PhotosIndex.php b/templates/PhotosIndex.php index 29fa06a7..196e870c 100644 --- a/templates/PhotosIndex.php +++ b/templates/PhotosIndex.php @@ -45,13 +45,13 @@ class PhotosIndex extends Template public function html_main() { echo ' -
'; +
'; for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--) { list($photos, $what) = $row; $this->header($photos); - $this->$what($photos); + $this->$what($photos, $i % 2); } echo ' @@ -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 ' @@ -112,100 +115,158 @@ class PhotosIndex extends Template
'; } - protected function panorama(array $photos) + protected function panorama(array $photos, $altLayout) { foreach ($photos as $image) + { + echo ' +
+
'; + $this->photo($image, 'panorama', static::PANORAMA_WIDTH, static::PANORAMA_HEIGHT, false, false); + + echo ' +
+
'; + } } - 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'); 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 ' +
'; } - 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'); echo '
-
'; +
+
'; foreach ($photos as $image) + { + echo ' +
'; + $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top'); + echo ' +
'; + } + + echo ' +
+
+
'; + } + + protected function duo(array $photos, $altLayout) + { + echo ' +
'; + + foreach ($photos as $image) + { + echo ' +
'; + + $this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true); + + echo ' +
'; + } + + echo ' +
'; + } + + protected function single(array $photos, $altLayout) + { + echo ' +
+
'; + + $image = array_shift($photos); + $this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top'); + echo '
'; } - protected function duo(array $photos) + protected function landscapes(array $photos, $altLayout) { echo ' -
'; +
'; foreach ($photos as $image) - $this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true); + { + echo ' +
'; - echo ' -
'; - } - - 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) $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true); + echo ' +
'; + } + echo '
'; } - protected function portraits(array $photos) + protected function portraits(array $photos, $altLayout) { echo ' -
'; +
'; foreach ($photos as $image) + { + echo ' +
'; + $this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, true); + echo ' +
'; + } + echo '
'; }