'plugin__gallery_' . $this->options->galleryID,
'class' => 'plugin-gallery',
];
switch ($this->options->align) {
case Options::ALIGN_FULL:
$attr['class'] .= ' align-full';
break;
case Options::ALIGN_LEFT:
$attr['class'] .= ' align-left';
break;
case Options::ALIGN_RIGHT:
$attr['class'] .= ' align-right';
break;
case Options::ALIGN_CENTER:
$attr['class'] .= ' align-center';
break;
}
$this->renderer->doc .= '
';
$images = $gallery->getImages();
$pages = $this->paginate($images);
foreach ($pages as $page => $images) {
$this->renderPage($images, $page);
}
$this->renderPageSelector($pages);
$this->renderer->doc .= '
';
}
/**
* Render the page selector
*
* @param $pages
* @return void
*/
protected function renderPageSelector($pages)
{
if (count($pages) <= 1) return;
$plugin = plugin_load('syntax', 'gallery_main');
$this->renderer->doc .= '';
$this->renderer->doc .= '
' . $plugin->getLang('pages') . ' ';
foreach (array_keys($pages) as $pid) {
$this->renderer->doc .= sprintf(
'
%d ',
$this->options->galleryID,
$pid,
$pid + 1
);
}
$this->renderer->doc .= '
';
}
/**
* Render the given images into a gallery page
*
* @param Image[] $images
* @param int $page The page number
* @return void
*/
protected function renderPage($images, int $page)
{
$attr = [
'class' => 'gallery-page',
'id' => 'gallery__' . $this->options->galleryID . '_' . $page,
];
// define the grid
$colwidth = $this->options->thumbnailWidth . 'px';
if ($this->options->columns) {
$cols = $this->options->columns;
if ($this->options->align === Options::ALIGN_FULL) {
$colwidth = '1fr';
} else {
// calculate the max width for each column
$maxwidth = '(100% / ' . $this->options->columns . ') - 1em';
$colwidth = 'min(' . $colwidth . ', ' . $maxwidth . ')';
}
} else {
$cols = 'auto-fill';
$colwidth = 'minmax(' . $colwidth . ', 1fr)';
}
$attr['style'] = 'grid-template-columns: repeat(' . $cols . ', ' . $colwidth . ')';
$this->renderer->doc .= '';
foreach ($images as $image) {
$this->renderImage($image);
}
$this->renderer->doc .= '
';
}
/** @inheritdoc */
protected function renderImage(Image $image)
{
global $ID;
// thumbnail image properties
[$w, $h] = $this->getThumbnailSize($image, 2);
$img = [];
$img['width'] = $w;
$img['height'] = $h;
$img['src'] = ml($image->getSrc(), ['w' => $w, 'h' => $h], true, '&');
$img['alt'] = $image->getFilename();
$img['loading'] = 'lazy';
// link properties
$a = [];
$a['href'] = $this->getDetailLink($image);
$a['title'] = $image->getTitle();
if ($this->options->lightbox) {
// double escape for lightbox:
$a['data-caption'] = implode(' – ', array_filter([
'