Galerie (gallery)

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%;
}