Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

PhotosIndex: rewrite to use Bootstrap grid for tiles

Browse Source
This commit is contained in:
Aaron van Geffen 2023-04-01 14:29:14 +02:00
parent b05015e76e
commit cfb5ab9d82
3 changed files with 86 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/css/admin.css
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;
} }

11
public/css/default.css
View File

@ -179,26 +179,25 @@ i.space-invader.alt-7::before {
/* Album index /* Album index
----------------*/ ----------------*/
.album-index { .album-index, .photo-index {
clear: both; clear: both;
} }
/* Tiled grid /* Tiled grid
---------------*/ ---------------*/
.tiled_header { .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 { .tiled_grid {

93
templates/PhotosIndex.php
View File

@ -45,7 +45,7 @@ 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--)
{ {
@ -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 '
@ -115,7 +118,17 @@ class PhotosIndex extends Template
protected function panorama(array $photos) protected function panorama(array $photos)
{ {
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)
@ -123,19 +136,29 @@ class PhotosIndex extends Template
$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">'; <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>';
} }
@ -145,19 +168,29 @@ class PhotosIndex extends Template
$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">'; <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 ' echo '
</div>
</div> </div>
</div>'; </div>';
} }
@ -165,11 +198,19 @@ class PhotosIndex extends Template
protected function duo(array $photos) protected function duo(array $photos)
{ {
echo ' echo '
<div class="tiled_row">'; <div class="row g-5 mb-5 tile-duo">';
foreach ($photos as $image) foreach ($photos as $image)
{
echo '
<div class="col-md-6">';
$this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true); $this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true);
echo '
</div>';
}
echo ' echo '
</div>'; </div>';
} }
@ -177,23 +218,33 @@ class PhotosIndex extends Template
protected function single(array $photos) protected function single(array $photos)
{ {
echo ' echo '
<div class="tiled_row">'; <div class="row g-5 mb-5 tile-single">
<div class="col-md-6">';
$image = array_shift($photos); $image = array_shift($photos);
$this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top'); $this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top');
echo ' echo '
</div>
</div>'; </div>';
} }
protected function row(array $photos) protected function row(array $photos)
{ {
echo ' echo '
<div class="tiled_row">'; <div class="row g-5 mb-5 tile-row-landscapes">';
foreach ($photos as $image) foreach ($photos as $image)
{
echo '
<div class="col-md-4">';
$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>';
} }
@ -201,11 +252,19 @@ class PhotosIndex extends Template
protected function portraits(array $photos) protected function portraits(array $photos)
{ {
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>';
} }