Latte / Html
Integrovaná verze
{* Gallery *}
{var $photos = ($page|flattenPhotos)}
{default $trigger = "photos"}
{default $maxShow = 3}
{default $class = ""}
{default $video = $page['supplements']['Video']??''}
{* If there is no video attached and only one image left, image is directly added to gallery *}
{if !$video && ($maxShow + 1) === count($photos)}
{php $maxShow = $maxShow + 1}
{/if}
{var $photoCount = count($photos) - $maxShow}
{var $showMore = count($photos) > $maxShow}
{var $button = $web['NEXT_PHOTOS']}
{php $button = str_replace("{count}", $photoCount, $button)}
<div class="gallery --flex --flex-centre-y {$class}" n:if="$photos">
{* Gallery | List *}
<div class="gallery__list --row">
{if $showMore}
{foreach $photos as $photo}
{if $iterations < $maxShow}
<div class="gallery__column --column">
{$photo|makePhoto:$page|noescape}
</div>
{else}
<div class="--hide">
{$photo|makePhoto:$page|noescape}
</div>
{/if}
{/foreach}
{else}
{foreach $photos as $photo}
<div class="gallery__column --column">
{$photo|makePhoto:$page|noescape}
</div>
{/foreach}
{/if}
<div class="gallery__column --column" n:if="$showMore">
<a class="gallery__link --flex --flex-column --flex-centre"
data-fancybox-index="{$maxShow + 1}"
data-fancybox-trigger="group_{$trigger}"
href="javascript:;">
<div class="gallery__icon gallery__icon--photos --flex --flex-centre">{$photoCount}</div>
{$button}
</a>
</div>
<div class="gallery__column --column" n:if="$video">
<a class="gallery__link --flex --flex-column --flex-centre"
data-src="#video-content"
data-fancybox="group{$trigger}"
href="javascript:;">
<img src="/img/icon-play.svg" alt="play" class="gallery__icon">
Video
</a>
</div>
</div>
<div class="gallery__video --hide" id="video-content" n:if="$video">
{$video|noescape}
</div>
</div>
Neintegrovaná verze
<div class="gallery --flex --flex-centre-y">
{* Gallery | List *}
<div class="gallery__list --row">
<div class="gallery__column --column">
<a href="#" class="gallery__link">
<img class="gallery__img"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkAAACpCAMAAABAgDvcAAAAWlBMVEXh5urDzdba3+LFz9nf5+rEz9HBy8/S3d/CytHJztHBzNLL19ji6e3R193g5enCzNbGys7O1t7Z4OPa4ejS2t/J0tXV3eXU2dze5u3N0tXa5O69yNHZ4+XF0dKFwnRbAAAC4klEQVR4nO3c63KqMBRAYYLIQY3BCy1yaN//NQ83EQjqHi/TM93r+9GZxtYZ1wRMwDYIAAAAAAAAAAAAAAAAAAAAAAAAADzKRe/ifvqlvVi4fJfwp1/ai4XmXShFKUrdRikpSklRSopSUpSSopTUoFSaPC/VUSp8no5Sixc83YJSQpSSopQUpWa5wAZRVH25oNSVXy52cbwrwksrSs3al93ywvRXgik1w636dWayO3SDlPJZM1hlmqQbpZTHZokZltq2w4pLuWD+FZ8WwylVza9TM6y51CE+zo6no1LGtD+luJRdrhdz9ziP5TiUyZphxaWytTEfkT9+8Eo1iyrFperzdrzxx4/lJJXqOVXtVvbNI0lup49Fy/W4VHuIKi3VH2PpzjtV2c2oVLpQ/t636t/gpqmcG6+nui5aS+WXGitvVmXlYJ3QLTy1lnKDFOU+mJyrbH4+8tKkOA8qLVUMVpdpkgfjaeWCo0nqSZeaz35QZ6mveLxh+fTeAIMwL4p8mERnqY/JOsD42xrv5KWyVG48p7tPp6+UC06JFyrd+8ffhL5Sl0u/Q+vNzA5wRGGpMPVDVamyO0+nsNRqLtRlLe5x7QPqStlsdkrVZq/rBce0XaWrKxUmV0v525pKkZQ6S0Wba52qbc102eXs32pY6Zw6LK+XMmUxXiu4bTP/dJa60alONdrWhKZdTqgslfmLzqHUHPpUUXY+o2ksdbx6Nj9bdgtQ+/XdjyksZYu7peLmbo2z2TLWXCq8few1mm2N2w+TKiwlCFVvayYfTFBYKpveRr+S6jseD+grtZV0qlNNvqeUFKUo1aGUFKWkKCVFKSlKSfmlRAtPj74reXa7fsxW3acXD5vHtH/loKiUs49q7kQoKvUkSklRSopSUipKpeXqeYNPyf7eUq9GKUpR6jZKSVFKilJSlJKilBSlpML4XX5bKffnXX7bf/0GAAAAAAAAAAAAAAAAAAAAAAAA8D/6B0YsNs6SxFarAAAAAElFTkSuQmCC"
alt="Popisek">
</a>
</div>
<div class="gallery__column --column">
<a href="#" class="gallery__link">
<img class="gallery__img"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkAAACpCAMAAABAgDvcAAAAWlBMVEXh5urDzdba3+LFz9nf5+rEz9HBy8/S3d/CytHJztHBzNLL19ji6e3R193g5enCzNbGys7O1t7Z4OPa4ejS2t/J0tXV3eXU2dze5u3N0tXa5O69yNHZ4+XF0dKFwnRbAAAC4klEQVR4nO3c63KqMBRAYYLIQY3BCy1yaN//NQ83EQjqHi/TM93r+9GZxtYZ1wRMwDYIAAAAAAAAAAAAAAAAAAAAAAAAADzKRe/ifvqlvVi4fJfwp1/ai4XmXShFKUrdRikpSklRSopSUpSSopTUoFSaPC/VUSp8no5Sixc83YJSQpSSopQUpWa5wAZRVH25oNSVXy52cbwrwksrSs3al93ywvRXgik1w636dWayO3SDlPJZM1hlmqQbpZTHZokZltq2w4pLuWD+FZ8WwylVza9TM6y51CE+zo6no1LGtD+luJRdrhdz9ziP5TiUyZphxaWytTEfkT9+8Eo1iyrFperzdrzxx4/lJJXqOVXtVvbNI0lup49Fy/W4VHuIKi3VH2PpzjtV2c2oVLpQ/t636t/gpqmcG6+nui5aS+WXGitvVmXlYJ3QLTy1lnKDFOU+mJyrbH4+8tKkOA8qLVUMVpdpkgfjaeWCo0nqSZeaz35QZ6mveLxh+fTeAIMwL4p8mERnqY/JOsD42xrv5KWyVG48p7tPp6+UC06JFyrd+8ffhL5Sl0u/Q+vNzA5wRGGpMPVDVamyO0+nsNRqLtRlLe5x7QPqStlsdkrVZq/rBce0XaWrKxUmV0v525pKkZQ6S0Wba52qbc102eXs32pY6Zw6LK+XMmUxXiu4bTP/dJa60alONdrWhKZdTqgslfmLzqHUHPpUUXY+o2ksdbx6Nj9bdgtQ+/XdjyksZYu7peLmbo2z2TLWXCq8few1mm2N2w+TKiwlCFVvayYfTFBYKpveRr+S6jseD+grtZV0qlNNvqeUFKUo1aGUFKWkKCVFKSlKSfmlRAtPj74reXa7fsxW3acXD5vHtH/loKiUs49q7kQoKvUkSklRSopSUipKpeXqeYNPyf7eUq9GKUpR6jZKSVFKilJSlJKilBSlpML4XX5bKffnXX7bf/0GAAAAAAAAAAAAAAAAAAAAAAAA8D/6B0YsNs6SxFarAAAAAElFTkSuQmCC"
alt="Popisek">
</a>
</div>
<div class="gallery__column --column">
<a href="#" class="gallery__link">
<img class="gallery__img"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkAAACpCAMAAABAgDvcAAAAWlBMVEXh5urDzdba3+LFz9nf5+rEz9HBy8/S3d/CytHJztHBzNLL19ji6e3R193g5enCzNbGys7O1t7Z4OPa4ejS2t/J0tXV3eXU2dze5u3N0tXa5O69yNHZ4+XF0dKFwnRbAAAC4klEQVR4nO3c63KqMBRAYYLIQY3BCy1yaN//NQ83EQjqHi/TM93r+9GZxtYZ1wRMwDYIAAAAAAAAAAAAAAAAAAAAAAAAADzKRe/ifvqlvVi4fJfwp1/ai4XmXShFKUrdRikpSklRSopSUpSSopTUoFSaPC/VUSp8no5Sixc83YJSQpSSopQUpWa5wAZRVH25oNSVXy52cbwrwksrSs3al93ywvRXgik1w636dWayO3SDlPJZM1hlmqQbpZTHZokZltq2w4pLuWD+FZ8WwylVza9TM6y51CE+zo6no1LGtD+luJRdrhdz9ziP5TiUyZphxaWytTEfkT9+8Eo1iyrFperzdrzxx4/lJJXqOVXtVvbNI0lup49Fy/W4VHuIKi3VH2PpzjtV2c2oVLpQ/t636t/gpqmcG6+nui5aS+WXGitvVmXlYJ3QLTy1lnKDFOU+mJyrbH4+8tKkOA8qLVUMVpdpkgfjaeWCo0nqSZeaz35QZ6mveLxh+fTeAIMwL4p8mERnqY/JOsD42xrv5KWyVG48p7tPp6+UC06JFyrd+8ffhL5Sl0u/Q+vNzA5wRGGpMPVDVamyO0+nsNRqLtRlLe5x7QPqStlsdkrVZq/rBce0XaWrKxUmV0v525pKkZQ6S0Wba52qbc102eXs32pY6Zw6LK+XMmUxXiu4bTP/dJa60alONdrWhKZdTqgslfmLzqHUHPpUUXY+o2ksdbx6Nj9bdgtQ+/XdjyksZYu7peLmbo2z2TLWXCq8few1mm2N2w+TKiwlCFVvayYfTFBYKpveRr+S6jseD+grtZV0qlNNvqeUFKUo1aGUFKWkKCVFKSlKSfmlRAtPj74reXa7fsxW3acXD5vHtH/loKiUs49q7kQoKvUkSklRSopSUipKpeXqeYNPyf7eUq9GKUpR6jZKSVFKilJSlJKilBSlpML4XX5bKffnXX7bf/0GAAAAAAAAAAAAAAAAAAAAAAAA8D/6B0YsNs6SxFarAAAAAElFTkSuQmCC"
alt="Popisek">
</a>
</div>
<div class="gallery__column --column" n:if="$showMore">
<a class="gallery__link --flex --flex-column --flex-centre"
href="#">
<div class="gallery__icon gallery__icon--photos --flex --flex-centre">5</div>
dalších
</a>
</div>
<div class="gallery__column --column">
<a class="gallery__link --flex --flex-column --flex-centre"
href="#">
<img src="/img/icon-play.svg" alt="play" class="gallery__icon">
Video
</a>
</div>
</div>
<div class="gallery__video --hide" id="video-content">
</div>
</div>
CSS / SCSS
Popřípadě jde i přes display: grid
.gallery--photos{
margin: 30px 0;
}
.gallery__list {
}
.gallery__link {
width: 100%;
background: $color__gray;
color: $color__text;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
max-width: 220px;
margin: auto;
cursor: pointer;
&:hover, &:focus{
color: $color__text;
background: darken($color__gray, 5%);
}
.gallery--photos &{
margin-bottom: 16px;
}
.gallery--product &{
max-width: 120px;
height: 110px;
@include media($large){
height: 120px;
}
}
.gallery--page &{
max-width: 250px;
height: 150px;
@include media($medium){
max-width: none;
}
@include media($large){
height: 200px;
}
}
}
.gallery__video{
max-width: 100%;
iframe{
max-width: 100%;
aspect-ratio: 16/9;
height: auto;
}
}
.gallery__icon {
height: 32px;
width: 32px;
margin: 0 0 8px 0;
}
.gallery__column{
padding: 8px;
.gallery--product &{
flex: 0 1 122px;
@include media($large){
flex: 0 1 calc(100% / 5);
}
}
.gallery--photos &{
flex: 0 1 calc(100% / 3);
}
.gallery--page &{
flex: 0 1 100%;
@include media($tiny){
flex: 0 1 calc(100% / 2);
}
@include media($small){
flex: 0 1 calc(100% / 3);
}
@include media($medium){
flex: 0 1 calc(100% / 4);
}
}
}
.gallery__img{
max-width: 100%;
max-height: 100%;
.gallery--photos &, .gallery--page &{
width: 100%;
height: 100%;
object-fit:cover;
}
.gallery--product &{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.gallery__icon--photos {
background: $color__text;
color: #fff;
font-size: 1.7rem;
border-radius: 50%;
}