Use Bootstrap for album/photo grid #31
@ -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);
|
||||||
|
@ -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>';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user