Copy environment

Gallery 

<div class="grid">
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-fancybox="gallery-123" data-caption="This is a caption" data-thumb="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="//via.placeholder.com/1920x1080" data-fancybox="gallery-123" data-caption="This is a caption" data-thumb="//via.placeholder.com/75x75">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x200">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
    <div class="grid__col">

        <figure class="image image--fluid image--full ">
            <a class="image__link" href="https://www.youtube.com/watch?v=z2X2HaTvkl8" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/150x75">

                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

            </a>
        </figure>
    </div>
</div>
 
<div class="grid">
    {% if data.items %}
        {% for item in data.items %}
            <div class="grid__col">
                {% include '@lightbox' with {
                    imageSize: '100x100',
                    imageModifier: 'image--full',
                    data: {
                        galleryId: data.galleryId,
                        image: item.image,
                        caption: item.caption
                    },
                } %}
            </div>
        {% endfor %}
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "galleryId": "gallery-123",
    "items": [
      {
        "caption": "This is a caption",
        "image": {
          "src": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
          "alt": "image title",
          "url": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        }
      },
      {
        "image": {
          "src": "//via.placeholder.com/75x75",
          "alt": "image title",
          "url": "//via.placeholder.com/1080x1920",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        }
      },
      {
        "image": {
          "src": "//via.placeholder.com/75x75",
          "alt": "image title",
          "url": "//via.placeholder.com/1920x1080",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        },
        "caption": "This is a caption"
      },
      {
        "image": {
          "src": "//via.placeholder.com/75x75",
          "alt": "image title",
          "url": "//via.placeholder.com/1080x1920",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        }
      },
      {
        "image": {
          "src": "//via.placeholder.com/75x75",
          "alt": "image title",
          "url": "//via.placeholder.com/1080x1920",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        }
      },
      {
        "image": {
          "src": "//via.placeholder.com/75x200",
          "alt": "image title",
          "url": "//via.placeholder.com/1080x1920",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        }
      },
      {
        "image": {
          "src": "//via.placeholder.com/150x75",
          "alt": "image title",
          "url": "https://www.youtube.com/watch?v=z2X2HaTvkl8",
          "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg"
        }
      }
    ]
  }
}
  • Handle: @gallery--default
  • Filesystem Path: src/patterns/components/gallery/gallery.twig
  • References (1): @lightbox
  • Referenced by (1): @view-single-detail