Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

AlbumIndex: rewrite to use Bootstrap grid for tiles

Browse Source
This commit is contained in:
Aaron van Geffen 2023-04-01 14:02:58 +02:00
parent a260f4ff88
commit b05015e76e
2 changed files with 70 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/css/default.css
View File

@ -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);

96
templates/AlbumIndex.php
View File

@ -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 '
<div class="tiled_grid clearfix">';
<div class="container album-index">
<div class="row g-5">';
foreach (array_chunk($this->albums, 3) as $photos)
{
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>';
}
foreach ($this->albums as $album)
$this->renderAlbum($album);
echo '
</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>';
}
}