electricdusk/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects 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 grid
---------------*/ ---------------*/
.tiled_header { .tiled_header {
@ -199,23 +206,29 @@ i.space-invader.alt-7::before {
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
div.polaroid,
.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama, .tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama,
.tiled_grid div.duo, .tiled_grid div.single { .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; /*float: left;*/
line-height: 0; line-height: 0;
margin: 0 3.5% 3.5% 0; /* margin: 0 3.5% 3.5% 0;*/
overflow: hidden; /* overflow: hidden;*/
position: relative; position: relative;
width: 31%; /*width: 31%;*/
} }
div.polaroid img,
.tiled_grid div img { .tiled_grid div 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%;
} }
div.polaroid h4,
.tiled_grid div h4 { .tiled_grid div h4 {
color: #000; color: #000;
margin: 0; margin: 0;
@ -226,9 +239,14 @@ i.space-invader.alt-7::before {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
div.polaroid a,
.tiled_grid div a { .tiled_grid div a {
display: block;
text-decoration: none; text-decoration: none;
} }
div.polaroid:hover,
.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama: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 { .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);

42
templates/AlbumIndex.php
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,17 +27,22 @@ 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>
</div>';
}
private function renderAlbum(array $album)
{ {
echo ' echo '
<div class="tiled_row">'; <div class="col-md-6 col-xl-4">
<div class="polaroid landscape">';
foreach ($photos as $album)
{
echo '
<div class="landscape">';
if ($this->show_edit_buttons) if ($this->show_edit_buttons)
echo ' echo '
@ -53,15 +59,16 @@ class AlbumIndex extends Template
static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true); static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
echo ' echo '
<img src="', $thumbs[1], '"' . (isset($thumbs[2]) ? <img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
' srcset="' . $thumbs[2] . ' 2x"' : '') . ' srcset="' . $thumbs[2] . ' 2x"' : '') .
' alt="" style="width: ', static::TILE_WIDTH, ' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
'px; height: ', static::TILE_HEIGHT, 'px">';
} }
else else
{
echo ' echo '
<img src="', BASEURL, '/images/nothumb.svg" alt="" style="width: ', <img alt="" src="', BASEURL, '/images/nothumb.svg"',
static::TILE_WIDTH, 'px; height: ', static::TILE_HEIGHT, 'px; object-fit: unset">'; ' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
}
if ($this->show_labels) if ($this->show_labels)
echo ' echo '
@ -69,14 +76,7 @@ class AlbumIndex extends Template
echo ' echo '
</a> </a>
</div>'; </div>
}
echo '
</div>';
}
echo '
</div>'; </div>';
} }
} }