<div class="product-gallery" data-gallery-wrapper>
   <div class="product-photo-main">
      <div class="row">
         <div class="{$css_class} gallery-item">
            <div {if $body.product.image}data-href="{get_photo photo=$body.product.image size=0}" data-rel="gallery"{/if} data-main-image-link>
               <img src="{get_photo photo=$body.product.image size=$image_type}"
                    width="{$cfg.Photo.types[$image_type].size[0]}" height="{$cfg.Photo.types[$image_type].size[1]}"
                    alt="{$body.product.image.descr|default:$body.product.title}" class="img-responsive" data-main-image>
            </div>
         </div>

         {if $body.product.photos}
            {$hidden_photos = $body.product.photos|count - $visible_photos}

            {foreach $body.product.photos as $photo}
               {if $photo@iteration > $visible_photos}
                  {$photo_src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='}
               {else}
                  {$photo_src = {get_photo photo=$photo size=$image_type}}
               {/if}
               {if $photo@iteration == ($visible_photos + 1)}
                  <button data-href="{get_photo photo=$photo size=0}" data-rel="gallery" class="btn btn-white gallery-more-photos" data-image-id="{$photo.id}">
                     <img src="{$photo_src}" data-src="{get_photo photo=$photo size=$image_type}" alt="{$photo.descr|default:$body.product.title}" class="img-responsive">
                     <span class="fc icons_photo"></span>
                     <span class="count count-desktop">+{$hidden_photos}&nbsp;{t plural="další" plural5="dalších" count=$hidden_photos}další{/t}</span>
                     <span class="count count-tablet">+{$hidden_photos+2}&nbsp;{t plural="další" plural5="dalších" count=$hidden_photos+2}další{/t}</span>
                  </button>
               {else}
                  <div class="{$css_class} gallery-item{if $photo@iteration > $visible_photos} gallery-item-hidden{/if}">
                     <div data-href="{get_photo photo=$photo size=0}" data-rel="gallery" data-image-id="{$photo.id}">
                        <img src="{$photo_src}" data-src="{get_photo photo=$photo size=$image_type}"
                             alt="{$photo.descr|default:$body.product.title}"
                             width="{$cfg.Photo.types[$image_type].size[0]}" height="{$cfg.Photo.types[$image_type].size[1]}"
                             class="img-responsive">
                     </div>
                  </div>
               {/if}
            {/foreach}
         {/if}
      </div>
   </div>

   {if $body.product.photos}
      <div class="product-gallery-resp">
         <div class="product-gallery-resp-inner">
            {$photo_dimensions = $cfg.Photo.types["product_gallery"].size}
            {if $body.product.image}
               <div class="gallery-item-resp active">
                  <a href="{get_photo photo=$body.product.image size=0}" data-image-thumb="{get_photo photo=$body.product.image size=$image_type}">
                     <img src="{get_photo photo=$body.product.image size='product_gallery'}"
                          alt="{$body.product.image.descr|default:$body.product.title}"
                          width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}" loading="lazy"
                          class="img-fluid">
                  </a>
               </div>
            {/if}
            {foreach $body.product.photos as $photo}
               <div class="gallery-item-resp">
                  <a href="{get_photo photo=$photo size=0}" data-image-thumb="{get_photo photo=$photo size=$image_type}">
                     <img src="{get_photo photo=$photo size='product_gallery'}"
                          alt="{$photo.descr|default:$body.product.title}"
                          width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}" loading="lazy"
                          class="img-fluid">
                  </a>
               </div>
            {/foreach}
         </div>
      </div>
   {/if}
</div>

{* todo use picture for responsivity *}
