Use Bootstrap for album/photo grid #31
@ -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'];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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,7 +74,7 @@ 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>';
|
||||||
|
|
||||||
@ -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,104 +115,162 @@ 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 '
|
echo '
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
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 '
|
echo '
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
echo '
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>';
|
</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
protected function duo(array $photos)
|
protected function duo(array $photos, $altLayout)
|
||||||
{
|
{
|
||||||
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 '
|
echo '
|
||||||
</div>';
|
</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
protected function single(array $photos)
|
echo '
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
protected function single(array $photos, $altLayout)
|
||||||
{
|
{
|
||||||
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 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)
|
||||||
|
{
|
||||||
|
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 '
|
echo '
|
||||||
</div>';
|
</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
protected function portraits(array $photos)
|
echo '
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
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 '
|
echo '
|
||||||
</div>';
|
</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
echo '
|
||||||
|
</div>';
|
||||||
|
}
|
||||||
|
|
||||||
public function setUrlSuffix($suffix)
|
public function setUrlSuffix($suffix)
|
||||||
{
|
{
|
||||||
$this->url_suffix = $suffix;
|
$this->url_suffix = $suffix;
|
||||||
|
Loading…
Reference in New Issue
Block a user