block.gallery.php

<?php

# Нет ни одного элемента
if (!isset($block['data']['list']) || !is_array($block['data']['list'])) return;

# Классы галереи (сетки)
$classNames = array('uk-grid');

$lightbox = false;
$slider = false;
$slideshow = false;

# Параметры галереи
if ($block['data']['grid-options']) foreach (is_array($block['data']['grid-options']) ? $block['data']['grid-options'] : explode('|', $block['data']['grid-options']) as $option) if ($option) {
    if (substr($option, 0, 3) === 'uk-') $classNames[] = $option;
    elseif ($option === 'lightbox') $lightbox = true;
    elseif ($option === 'slider') $slider = true;
    elseif ($option === 'slideshow') $slideshow = true;
}

# Миниатюры
$width = intval($block['data']['item-width']);
$height = intval($block['data']['item-height']);
if (!$width && !$height) {
    # По умолчанию: ширина 300
    if (!strlen($block['data']['item-width']) && !strlen($block['data']['item-height'])) $width = 300;
}
$width2x = $width * 2;
$height2x = $height * 2;
$resize = $block['data']['item-resize'];
$background = ltrim($block['data']['item-background'], '#');
# Трансформация изображения
$transform = $transform2x = null;
if ($width <= 1000 || $height <= 1000) $transform = 'r' . $resize . $width . 'x' . $height . ($resize && strlen($background) === 6 ? 'x' . $background : '');
if ($width2x <= 1000 || $height2x <= 1000) $transform2x = 'r' . $resize . $width2x . 'x' . $height2x . ($resize && strlen($background) === 6 ? 'x' . $background : '');
# Соотношение сторон контейнера изображения
if ($width && $height) $ratio = array($width, $height);
elseif ($ratio = $block['data']['item-ratio']) $ratio = explode(':', $ratio);
else $ratio = array(1, 1);
$stretch = false;
$caption = false;
# Параметры элемента
if ($block['data']['item-options']) foreach (is_array($block['data']['item-options']) ? $block['data']['item-options'] : explode('|', $block['data']['item-options']) as $option) if ($option) {
    if (false) {}
    elseif ($option === 'stretch') $stretch = true;
    elseif ($option === 'caption') $caption = true;
}

# Классы надписи
$captionClassNames = array('uk-width-1-1');
if ($block['data']['caption-options']) foreach (is_array($block['data']['caption-options']) ? $block['data']['caption-options'] : explode('|', $block['data']['caption-options']) as $option) if ($option) {
    if (substr($option, 0, 3) === 'uk-') $captionClassNames[] = $option;
}
$captionClassName = implode(' ', $captionClassNames);

ob_start();

$index = 0;
if (isset($block['data']['list']) && is_array($block['data']['list'])) foreach ($block['data']['list'] as $item) {
    if (!$src = isset($item['src']) ? $item['src'] : $item['name']) continue;
    # Исходное изображение
    $src = strpos($src, '%') !== false ? $src : str_replace('%2F', '/', rawurlencode($src));
    # Изображение с размером 1x или исходное изображение
    $src1x = $transform ? dirname($src) . '/thumb.' . basename($src) . '.' . $transform . '.jpg' : $src;
    # Изображение с размером 2x или исходное изображение
    $src2x = $transform2x ? dirname($src) . '/thumb.' . basename($src) . '.' . $transform2x . '.jpg' : $src;
    # Если 1x и 2x отличаются, то передадим оба
    $srcset = array();
    if ($src2x !== $src1x) {
        $srcset[] = $src2x . ' 2x';
        $srcset[] = $src1x;
    }
    $title = isset($item['title']) ? $item['title'] : $item['text'];
    print '<a href="' . $src . '" target="_blank"' . (strlen($title) ? ' data-caption="' . htmlspecialchars($title) . '"' : '') . ' class="uk-grid-margin" uk-slideshow-item="' . ($index ++) . '">';
    if ($stretch) {
        if ($caption) print '<div class="uk-height-1-1 uk-position-relative">';
        print '<div data-src="' . $src1x . '"' . ($srcset ? ' data-srcset="' . implode(', ', $srcset) . '"' : '') . ' class="' . ($resize === 'c' ? 'uk-background-cover' : 'uk-background-contain') . '" uk-img>';
        print '<canvas width="' . $ratio[0] . '" height="' . $ratio[1] . '" class="uk-display-block uk-width-1-1 uk-responsive-width"></canvas>';
        print '</div>';
        if ($caption && strlen($title)) print '<div' . ($captionClassName ? ' class="' . $captionClassName . '"' : '') . '>' . htmlspecialchars($title) . '</div>';
        if ($caption) print '</div>';
    } else {
        print '<div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-position-relative">';
        print '<img src="/images/x.gif" data-src="' . $src1x . '"' . ($srcset ? ' data-srcset="' . implode(', ', $srcset) . '"' : '') . ' alt="' . htmlspecialchars($title) . '" class="uk-responsive-width" uk-img>';
        if ($caption && strlen($title)) print '<div' . ($captionClassName ? ' class="' . $captionClassName . '"' : '') . '>' . htmlspecialchars($title) . '</div>';
        print '</div>';
    }
    print '</a>';
}

if (!$html = ob_get_clean()) return;

ob_start();

if ($slideshow) {
    $slider = true;
    $classNames[] = 'uk-slider-items';
    $classNames[] = 'uk-slideshow-nav';
    print '<div class="uk-slideshow uk-position-relative" uk-slideshow="ratio: ' . ($ratio[0] . ':' . $ratio[1]) . '">';
    print '<ul class="uk-slideshow-items"' . ($lightbox ? ' uk-lightbox' : '') . '>';
    if (isset($block['data']['list']) && is_array($block['data']['list'])) foreach ($block['data']['list'] as $item) {
        if (!$src = $item['src']) continue;
        $src = strpos($src, '%') !== false ? $src : str_replace('%2F', '/', rawurlencode($src));
        $title = $item['title'];
        print '<li>';
        if ($lightbox) print '<a href="' . $src . '" target="_blank"' . (strlen($title) ? ' data-caption="' . htmlspecialchars($title) . '"' : '') . ' class="uk-display-block uk-height-1-1">';
        print '<img src="/images/x.gif" data-src="' . $src . '" alt="' . htmlspecialchars($title) . '" uk-cover uk-img>';
        if ($lightbox) print '</a>';
        print '</li>';
    }
    print '</ul>';
    print '<div class="uk-slider" uk-slider>';
    print '<div class="' . implode(' ', $classNames) . '">';
    print $html;
    print '</div>';
    print '</div>';
    print '</div>';
} elseif ($slider) {
    $classNames[] = 'uk-slider-items';
    print '<div class="uk-slider" uk-slider>';
    print '<div class="' . implode(' ', $classNames) . '"' . ($lightbox ? ' uk-lightbox' : '') . '>';
    print $html;
    print '</div>';
    print '</div>';
} else {
    print '<div class="' . implode(' ', $classNames) . '"' . ($lightbox ? ' uk-lightbox' : '') . '>';
    print $html;
    print '</div>';
}

?>
<script>
cmsRequire(['uikit'], function() {
    <?php if ($lightbox) print "cmsRequire(['uikit/lightbox']);\n"; ?>
    <?php if ($slider) print "cmsRequire(['uikit/slider']);\n"; ?>
    <?php if ($slideshow) print "cmsRequire(['uikit/slideshow']);\n"; ?>
});
</script>
<?php

$html = ob_get_clean();

print $Main->callTemplate('block/block', 'block', $Page, array( 'block' => $block, 'html' => $html ));

?>