Merge pull request 'Use Bootstrap for album/photo grid' (#31) from bootstrap-tiles into master

Reviewed-on: Public/pics#31
This commit is contained in:
Aaron van Geffen 2023-04-05 17:08:13 +02:00
commit ef7fe60fca
5 changed files with 184 additions and 221 deletions

View File

@ -165,7 +165,10 @@ class PhotoMosaic
return [$photos, 'single']; return [$photos, 'single'];
} }
// A boring set it is, then. // Last resort: majority vote
return [$photos, 'row']; if ($num_portrait > $num_landscape)
return [$photos, 'portraits'];
else
return [$photos, 'landscapes'];
} }
} }

View File

@ -1,21 +1,21 @@
/* Edit icon on tiled grids /* Edit icon on tiled grids
-----------------------------*/ -----------------------------*/
.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama { .polaroid {
position: relative; position: relative;
} }
.tiled_grid div > a.edit { .polaroid a.edit {
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3); box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
display: none; display: none !important;
left: 20px; left: 20px;
line-height: 1.5; line-height: 1.5;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
top: 20px; top: 20px;
} }
.tiled_grid div:hover > a.edit { .polaroid:hover > a.edit {
display: block; display: block !important;
} }

View File

@ -177,46 +177,39 @@ i.space-invader.alt-7::before {
} }
/* Tiled grid /* Album and photo index pages
---------------*/ --------------------------------*/
.tiled_header { .album-index, .photo-index {
clear: both;
}
.tiled-header > a {
background: #fff; background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
border-radius: 0.5rem; border-radius: 0.5rem;
color: #000; color: #000;
clear: both; display: inline-block;
float: left;
margin: 0 0 1.5% 0;
font: 400 18px/2.2 'Coda', sans-serif; font: 400 18px/2.2 'Coda', sans-serif;
margin: 0 0 1.5% 0;
overflow: hidden;
padding: 6px 22px; padding: 6px 22px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
} }
.tiled_grid { div.polaroid {
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 {
background: #fff; background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
float: left;
line-height: 0; line-height: 0;
margin: 0 3.5% 3.5% 0;
overflow: hidden;
position: relative; position: relative;
width: 31%;
} }
.tiled_grid div img { div.polaroid img {
background: url('../images/nothumb.svg') center no-repeat; background: url('../images/nothumb.svg') center no-repeat;
border: none; border: none;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
} }
.tiled_grid div h4 { div.polaroid h4 {
color: #000; color: #000;
margin: 0; margin: 0;
font: 400 18px 'Coda', sans-serif; font: 400 18px 'Coda', sans-serif;
@ -226,101 +219,19 @@ i.space-invader.alt-7::before {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.tiled_grid div a { div.polaroid a {
display: block;
text-decoration: none; text-decoration: none;
} }
.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover, div.polaroid:hover {
.tiled_grid div.duo:hover, .tiled_grid div.single:hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 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 boxes
----------------------*/ ----------------------*/
.album_title_box { .album_title_box {
margin-left: -46px; margin-left: -2.85rem;
width: 100%; width: 100%;
} }
.album_title_box > a { .album_title_box > a {
@ -330,7 +241,7 @@ i.space-invader.alt-7::before {
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
display: inline-block; display: inline-block;
float: left; float: left;
font-size: 2em; font-size: 2rem;
line-height: 1; line-height: 1;
padding: 8px 10px; padding: 8px 10px;
} }
@ -341,7 +252,7 @@ i.space-invader.alt-7::before {
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
float: left; float: left;
font: inherit; font: inherit;
padding: 6px 22px; padding: 0.4rem 1.3rem;
max-width: 90%; max-width: 90%;
margin: 0 0 1.5% 0; margin: 0 0 1.5% 0;
} }
@ -550,27 +461,15 @@ a#previous_photo:hover, a#next_photo:hover {
margin-left: 0; margin-left: 0;
} }
.tiled_header { .tiled-header {
font-size: 14px; font-size: 14px;
margin: 0 0 3.5% 0; margin: 0 0 3.5% 0;
} }
.tiled_grid div h4 { .panorama h4 {
font-size: 14px; font-size: 14px;
padding: 15px 5px; 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 { #previous_photo, #next_photo {
display: none; display: none;
} }

View File

@ -15,6 +15,7 @@ class AlbumIndex extends Template
const TILE_WIDTH = 400; const TILE_WIDTH = 400;
const TILE_HEIGHT = 300; 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) public function __construct(array $albums, $show_edit_buttons = false, $show_labels = true)
{ {
@ -26,57 +27,56 @@ class AlbumIndex extends Template
public function html_main() public function html_main()
{ {
echo ' echo '
<div class="tiled_grid clearfix">'; <div class="container album-index">
<div class="row g-5">';
foreach (array_chunk($this->albums, 3) as $photos) foreach ($this->albums as $album)
{ $this->renderAlbum($album);
echo '
<div class="tiled_row">';
foreach ($photos as $album)
{
echo '
<div class="landscape">';
if ($this->show_edit_buttons)
echo '
<a class="edit" href="#">Edit</a>';
echo '
<a href="', $album['link'], '">';
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 '
<img src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
' srcset="' . $thumbs[2] . ' 2x"' : '') .
' alt="" style="width: ', static::TILE_WIDTH,
'px; height: ', static::TILE_HEIGHT, 'px">';
}
else
echo '
<img src="', BASEURL, '/images/nothumb.svg" alt="" style="width: ',
static::TILE_WIDTH, 'px; height: ', static::TILE_HEIGHT, 'px; object-fit: unset">';
if ($this->show_labels)
echo '
<h4>', $album['caption'], '</h4>';
echo '
</a>
</div>';
}
echo '
</div>';
}
echo ' echo '
</div>
</div>'; </div>';
} }
private function renderAlbum(array $album)
{
echo '
<div class="col-md-6 col-xl-4">
<div class="polaroid landscape">';
if ($this->show_edit_buttons)
echo '
<a class="edit" href="#">Edit</a>';
echo '
<a href="', $album['link'], '">';
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 '
<img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
' srcset="' . $thumbs[2] . ' 2x"' : '') .
' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
}
else
{
echo '
<img alt="" src="', BASEURL, '/images/nothumb.svg"',
' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
}
if ($this->show_labels)
echo '
<h4>', $album['caption'], '</h4>';
echo '
</a>
</div>
</div>';
}
} }

View File

@ -45,13 +45,13 @@ class PhotosIndex extends Template
public function html_main() public function html_main()
{ {
echo ' echo '
<div class="tiled_grid clearfix">'; <div class="container photo-index">';
for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--) for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--)
{ {
list($photos, $what) = $row; list($photos, $what) = $row;
$this->header($photos); $this->header($photos);
$this->$what($photos); $this->$what($photos, $i % 2);
} }
echo ' echo '
@ -74,9 +74,9 @@ class PhotosIndex extends Template
$name = str_replace(' ', '', strtolower($header)); $name = str_replace(' ', '', strtolower($header));
echo ' echo '
<h4 class="tiled_header" id="', $name, '"> <h4 class="tiled-header" id="', $name, '">
<a href="#', $name, '">', $header, '</a> <a href="#', $name, '">', $header, '</a>
</h4>'; </h4>';
$this->previous_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) protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true)
{ {
echo ' echo '
<div class="', $className, '">'; <div class="polaroid ', $className, '">';
if ($this->show_edit_buttons) if ($this->show_edit_buttons)
echo ' echo '
@ -100,7 +100,10 @@ class PhotosIndex extends Template
else else
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"'; 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) if ($this->show_labels)
echo ' echo '
@ -112,100 +115,158 @@ class PhotosIndex extends Template
</div>'; </div>';
} }
protected function panorama(array $photos) protected function panorama(array $photos, $altLayout)
{ {
foreach ($photos as $image) foreach ($photos as $image)
{
echo '
<div class="row mb-5 tile-panorama">
<div class="col">';
$this->photo($image, 'panorama', static::PANORAMA_WIDTH, static::PANORAMA_HEIGHT, false, false); $this->photo($image, 'panorama', static::PANORAMA_WIDTH, static::PANORAMA_HEIGHT, false, false);
echo '
</div>
</div>';
}
} }
protected function portrait(array $photos) protected function portrait(array $photos, $altLayout)
{ {
$image = array_shift($photos); $image = array_shift($photos);
echo ' echo '
<div class="tiled_row"> <div class="row g-5 mb-5 tile-feat-portrait',
<div class="column_portrait">'; $altLayout ? ' flex-row-reverse' : '', '">
<div class="col-md-4">';
$this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, 'centre'); $this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, 'centre');
echo ' echo '
</div> </div>
<div class="column_tiles_four">'; <div class="col-md-8">
<div class="row g-5">';
foreach ($photos as $image) foreach ($photos as $image)
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'centre'); {
echo '
<div class="col-md-6">';
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top');
echo '
</div>';
}
echo ' echo '
</div>
</div> </div>
</div>'; </div>';
} }
protected function landscape(array $photos) protected function landscape(array $photos, $altLayout)
{ {
$image = array_shift($photos); $image = array_shift($photos);
echo ' echo '
<div class="tiled_row"> <div class="row g-5 mb-5 tile-feat-landscape',
<div class="column_landscape">'; $altLayout ? ' flex-row-reverse' : '', '">
<div class="col-md-8">';
$this->photo($image, 'landscape', static::LANDSCAPE_WIDTH, static::LANDSCAPE_HEIGHT, 'top'); $this->photo($image, 'landscape', static::LANDSCAPE_WIDTH, static::LANDSCAPE_HEIGHT, 'top');
echo ' echo '
</div> </div>
<div class="column_tiles_two">'; <div class="col-md-4">
<div class="row g-5">';
foreach ($photos as $image) foreach ($photos as $image)
{
echo '
<div>';
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top'); $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top');
echo '
</div>';
}
echo '
</div>
</div>
</div>';
}
protected function duo(array $photos, $altLayout)
{
echo '
<div class="row g-5 mb-5 tile-duo">';
foreach ($photos as $image)
{
echo '
<div class="col-md-6">';
$this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true);
echo '
</div>';
}
echo '
</div>';
}
protected function single(array $photos, $altLayout)
{
echo '
<div class="row g-5 mb-5 tile-single">
<div class="col-md-6">';
$image = array_shift($photos);
$this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top');
echo ' echo '
</div> </div>
</div>'; </div>';
} }
protected function duo(array $photos) protected function landscapes(array $photos, $altLayout)
{ {
echo ' echo '
<div class="tiled_row">'; <div class="row g-5 mb-5 tile-row-landscapes">';
foreach ($photos as $image) foreach ($photos as $image)
$this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true); {
echo '
<div class="col-md-4">';
echo '
</div>';
}
protected function single(array $photos)
{
echo '
<div class="tiled_row">';
$image = array_shift($photos);
$this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top');
echo '
</div>';
}
protected function row(array $photos)
{
echo '
<div class="tiled_row">';
foreach ($photos as $image)
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true); $this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true);
echo '
</div>';
}
echo ' echo '
</div>'; </div>';
} }
protected function portraits(array $photos) protected function portraits(array $photos, $altLayout)
{ {
echo ' echo '
<div class="tiled_row">'; <div class="row g-5 mb-5 tile-row-portraits">';
foreach ($photos as $image) foreach ($photos as $image)
{
echo '
<div class="col-md-4">';
$this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, true); $this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, true);
echo '
</div>';
}
echo ' echo '
</div>'; </div>';
} }