Photogallery

Can be called from Content

Configuration options

These options can be changed by setting template variables before the component block.

Code

Latte

{if !isset($photos)}
    {var $photos = ($page|flattenPhotos)}
{/if}
{default $trigger = "photos"}
{default $maxShow = 3}
{default $class = ""}

{default $video = isset($page['supplements']['Video']) ? $page['supplements']['Video'] : null}

{* 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("{x}", $photoCount, $button)}

<div class="gallery --flex --flex-centre-y {$class}" n:if="$photos">

    <div n:class="'gallery__content', $class === 'gallery--big' ? '--content'">

        {* Gallery | List *}

        <div class="gallery__list --row --flex-stretch">
            {if $showMore}

                {foreach $photos as $photo}
                    {if $iterator->getCounter()-1 < $maxShow}
                        <div class="gallery__column --w-l-3 --w-m-4 --w-s-6 --w-12 --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 --w-l-3 --w-m-4 --w-s-6 --w-12 --column">
                        {$photo|makePhoto:$page|noescape}
                    </div>
                {/foreach}
            {/if}

            <div class="gallery__button-box --w-l-3 --w-m-4 --w-s-6 --w-12 --column" n:if="$showMore || $video">
                <a n:class="'gallery__button button button--brand --w-12', $video ?: 'gallery__button--solo'"
                        data-fancybox-index="{$maxShow}"
                        data-fancybox-trigger="group_{$trigger}"
                    href="javascript:void(0)" n:if="$showMore">
                    <svg class="gallery__icon">
                        <use xlink:href="/assets/front/sprite.svg#camera"></use>
                    </svg>
                    <div class="gallery__button-text">
                        {$button|noescape}
                    </div>
                </a>
                <a n:class="'gallery__button button button--brand --w-12', $showMore ?: 'gallery__button--solo'"
                    data-src="#video-content"
                        data-fancybox="group_{$trigger}_video"
                    href="javascript:void(0)" n:if="$video">
                    <div class="gallery__button-text">
                        Video
                    </div>
                    <svg class="gallery__icon">
                        <use xlink:href="/assets/front/sprite.svg#play"></use>
                    </svg>
                </a>
            </div>
        </div>
    </div>

    <div class="gallery__video --hide" id="video-content" n:if="$video">
        <div class="embed-responsive embed-responsive-16by9 --flex --flex-column">
            {$video|noescape}
        </div>
    </div>
</div>

SCSS

//{*gallery-small__figure-link > gallery-small__figure > gallery-small__img*}
//{*collumn > link > img*}

.gallery{
  padding-top: 58px;
  padding-bottom: 40px;
}

.gallery__content {
  width: 100%;
}

.gallery__list{
  row-gap: 16px;
}

.gallery__button-box{
  row-gap: 5px;
  justify-content: space-between;
}

.gallery__button{
  height: 142px;
  padding-top: 26px;
  padding-bottom: 26px;
  background: #E8EDFF;
  display: flex;
  flex-direction: row;
  border-radius: 0;
  gap: 10px;
  align-items: center;
  text-transform: unset;
  color: $color__text-dark !important;

  span {
    color: #94CD02;
  }

  .gallery--big &{
    padding-top: 15px;
    padding-bottom: 15px;

    @include media($small){
      padding-top: 25px;
      padding-bottom: 25px;
    }

    @include media($medium){
      padding-top: 40px;
      padding-bottom: 40px;
    }
  }
}

.gallery__icon {
  fill: $color__primary;
  height: 20px;
  width: 20px;
}

.gallery__button--solo {
  height: 100%;
}

.gallery__button-text{
  font-size: 14px;
  display: flex;
  align-items: center;

  &:before{
    margin-right: 8px;
    font-size: 2.3rem;
  }

  .gallery--big &{
    font-size: 1.8rem;

    &:before{
      margin-right: 10px;
      font-size: 3rem;
    }
  }
}

.gallery__link{
  width: 100%;
  max-height: 155px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .gallery--big &{
    max-height: 236px;
  }

}

.gallery__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: $ease;

  &:hover, &:focus{
    transform: scale(1.1);
    opacity: 0.92;
  }
}

.gallery__column {
  height: 128px;
}

.gallery_item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

Examples

{include ./gallery.latte}