pics/templates/PhotosIndex.php

285 lines
6.0 KiB
PHP
Raw Normal View History

<?php
/*****************************************************************************
* PhotosIndex.php
* Contains the project index template.
*
* Kabuki CMS (C) 2013-2015, Aaron van Geffen
*****************************************************************************/
class PhotosIndex extends Template
{
protected $mosaic;
protected $show_edit_buttons;
protected $show_headers;
protected $show_labels;
protected $row_limit = 1000;
protected $previous_header = '';
2016-09-04 16:00:39 +02:00
protected $url_suffix;
const PANORAMA_WIDTH = 1280;
const PANORAMA_HEIGHT = null;
const PORTRAIT_WIDTH = 400;
const PORTRAIT_HEIGHT = 645;
const LANDSCAPE_WIDTH = 850;
const LANDSCAPE_HEIGHT = 640;
const DUO_WIDTH = 618;
const DUO_HEIGHT = 412;
const SINGLE_WIDTH = 618;
const SINGLE_HEIGHT = 412;
const TILE_WIDTH = 400;
const TILE_HEIGHT = 300;
public function __construct(PhotoMosaic $mosaic, $show_edit_buttons = false, $show_labels = false, $show_headers = true)
{
$this->mosaic = $mosaic;
$this->show_edit_buttons = $show_edit_buttons;
$this->show_headers = $show_headers;
$this->show_labels = $show_labels;
}
public function html_main()
{
echo '
<div class="container photo-index">';
for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--)
{
list($photos, $what) = $row;
$this->header($photos);
$this->$what($photos, $i % 2);
}
echo '
</div>
<script type="text/javascript" src="', BASEURL, '/js/albumnav.js"></script>';
}
protected function header($photos)
{
if (!$this->show_headers)
return;
$date = $photos[0]->getDateCaptured();
if (!$date)
return;
$header = $date->format('F Y');
if ($header === $this->previous_header)
return;
$name = str_replace(' ', '', strtolower($header));
echo '
<h4 class="tiled-header" id="', $name, '">
<a href="#', $name, '">', $header, '</a>
</h4>';
$this->previous_header = $header;
}
protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true)
{
// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio();
echo '
<div class="polaroid ', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
if ($this->show_edit_buttons)
echo '
<a class="edit" href="', BASEURL, '/editasset/?id=', $image->getId(), '">Edit</a>';
echo '
<a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame">';
foreach (['normal-photo', 'blur-photo'] as $className)
{
echo '
<img src="', $image->getThumbnailUrl($width, $height, $crop, $fit), '"';
// Can we offer double-density thumbs?
if ($image->width() >= $width * 2 && $image->height() >= $height * 2)
echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"';
else
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
echo ' alt="" title="', $image->getTitle(), '" class="', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
}
if ($this->show_labels)
echo '
<h4>', $image->getTitle(), '</h4>';
echo '
</a>
</div>';
}
protected function panorama(array $photos, $altLayout)
{
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);
echo '
</div>
</div>';
}
}
protected function portrait(array $photos, $altLayout)
{
$image = array_shift($photos);
echo '
<div class="row g-5 mb-5 tile-feat-portrait',
$altLayout ? ' flex-row-reverse' : '', '">
<div class="col-md-4">';
$this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, 'centre');
echo '
</div>
<div class="col-md-8">
<div class="row g-5">';
foreach ($photos as $image)
{
echo '
<div class="col-md-6">';
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top');
echo '
</div>';
}
echo '
</div>
</div>
</div>';
}
protected function landscape(array $photos, $altLayout)
{
$image = array_shift($photos);
echo '
<div class="row g-5 mb-5 tile-feat-landscape',
$altLayout ? ' flex-row-reverse' : '', '">
<div class="col-md-8">';
$this->photo($image, 'landscape', static::LANDSCAPE_WIDTH, static::LANDSCAPE_HEIGHT, 'top');
echo '
</div>
<div class="col-md-4">
<div class="row g-5">';
foreach ($photos as $image)
{
echo '
<div>';
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top');
echo '
</div>';
}
echo '
</div>
</div>
</div>';
}
protected function duo(array $photos, $altLayout)
{
echo '
<div class="row g-5 mb-5 tile-duo">';
foreach ($photos as $image)
{
echo '
<div class="col-md-6">';
$this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true);
echo '
</div>';
}
echo '
</div>';
}
protected function single(array $photos, $altLayout)
{
echo '
<div class="row g-5 mb-5 tile-single">
<div class="col-md-6">';
$image = array_shift($photos);
$this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top');
echo '
</div>
</div>';
}
protected function landscapes(array $photos, $altLayout)
{
echo '
<div class="row g-5 mb-5 tile-row-landscapes">';
foreach ($photos as $image)
{
echo '
<div class="col-md-4">';
$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true);
echo '
</div>';
}
echo '
</div>';
}
protected function portraits(array $photos, $altLayout)
{
echo '
<div class="row g-5 mb-5 tile-row-portraits">';
foreach ($photos as $image)
{
echo '
<div class="col-md-4">';
$this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, true);
echo '
</div>';
}
echo '
</div>';
}
2016-09-04 16:00:39 +02:00
public function setUrlSuffix($suffix)
{
$this->url_suffix = $suffix;
}
}