---
isPage: true
draft: false
title: Gallery
description: Add image gallery in grid
icon: grid-3x2-gap
hero:
  surtitle: Blocks
  title: Block gallery
  text: Add image gallery in grid (with Tobii JS library).
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/gallery/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-site/refs/heads/main/content/docs/gallery.md
      blank: true
    - text: Tobii JS library
      url: https://midzer.github.io/tobii
      blank: true
blocks:
  - type: gallery
    column: 6
    background: false
    heading:
      title: Lorem ipsum dolor sit amet.
      text: Mauris lobortis pulvinar lectus at semper.
    gallery:
      - src: /images/uploads/lopez-robin-nbpp7pzpsh8-unsplash.jpg
      - src: /images/uploads/lea-maruani-um-shmjr_no-unsplash.jpg
      - src: /images/uploads/robin-goutard-couufh79uzq-unsplash.jpg
      - src: /images/uploads/sebastien-jermer-ty9wjiijyj0-unsplash.jpg
      - credit: Photo by [Olga
          Serjantu](https://unsplash.com/@olgaserjantu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
          on
          [Unsplash](https://unsplash.com/collections/87604549/les-landes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        alt: ''
        src: /images/uploads/olga-serjantu-jbjd2kbi55s-unsplash.jpg
        legend: Lorem
      - src: /images/uploads/louis-mornaud-yugpd0evcgi-unsplash.jpg
  - type: gallery
    column: 5
    background: false
    heading:
      title: Lorem ipsum dolor sit amet.
      text: Mauris lobortis pulvinar lectus at semper.
    gallery:
      - src: /images/uploads/bertrand-bouchez-lrd26nd-awu-unsplash.jpg
      - src: /images/uploads/robin-goutard-couufh79uzq-unsplash.jpg
      - src: /images/uploads/sebastien-jermer-ty9wjiijyj0-unsplash.jpg
      - src: /images/uploads/lea-maruani-um-shmjr_no-unsplash.jpg
      - credit: Photo by [Olga
          Serjantu](https://unsplash.com/@olgaserjantu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
          on
          [Unsplash](https://unsplash.com/collections/87604549/les-landes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        alt: ''
        src: /images/uploads/olga-serjantu-jbjd2kbi55s-unsplash.jpg
        legend: Lorem
      - src: /images/uploads/louis-mornaud-yugpd0evcgi-unsplash.jpg
  - type: gallery
    column: 4
    background: false
    heading:
      surtitle: dolor sit amet.
      title: Lorem ipsum dolor sit amet.
      text: Mauris lobortis pulvinar lectus at semper.
    gallery:
      - src: /images/uploads/lopez-robin-nbpp7pzpsh8-unsplash.jpg
      - src: /images/uploads/lea-maruani-um-shmjr_no-unsplash.jpg
      - src: /images/uploads/robin-goutard-couufh79uzq-unsplash.jpg
      - src: /images/uploads/sebastien-jermer-ty9wjiijyj0-unsplash.jpg
      - credit: Photo by [Olga
          Serjantu](https://unsplash.com/@olgaserjantu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
          on
          [Unsplash](https://unsplash.com/collections/87604549/les-landes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        alt: ''
        src: /images/uploads/olga-serjantu-jbjd2kbi55s-unsplash.jpg
        legend: Lorem
      - src: /images/uploads/louis-mornaud-yugpd0evcgi-unsplash.jpg
  - type: gallery
    column: 3
    background: false
    heading:
      title: Lorem ipsum dolor sit amet.
      text: Mauris lobortis pulvinar lectus at semper.
    gallery:
      - src: /images/uploads/lopez-robin-nbpp7pzpsh8-unsplash.jpg
      - src: /images/uploads/lea-maruani-um-shmjr_no-unsplash.jpg
      - src: /images/uploads/robin-goutard-couufh79uzq-unsplash.jpg
      - src: /images/uploads/sebastien-jermer-ty9wjiijyj0-unsplash.jpg
      - credit: Photo by [Olga
          Serjantu](https://unsplash.com/@olgaserjantu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
          on
          [Unsplash](https://unsplash.com/collections/87604549/les-landes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        alt: ''
        src: /images/uploads/olga-serjantu-jbjd2kbi55s-unsplash.jpg
        legend: Lorem
      - src: /images/uploads/louis-mornaud-yugpd0evcgi-unsplash.jpg
  - type: gallery
    column: 2
    background: false
    heading:
      title: Lorem ipsum dolor sit amet.
      text: Mauris lobortis pulvinar lectus at semper.
    gallery:
      - src: /images/uploads/lopez-robin-nbpp7pzpsh8-unsplash.jpg
      - src: /images/uploads/lea-maruani-um-shmjr_no-unsplash.jpg
      - src: /images/uploads/robin-goutard-couufh79uzq-unsplash.jpg
      - src: /images/uploads/sebastien-jermer-ty9wjiijyj0-unsplash.jpg
      - credit: Photo by [Olga
          Serjantu](https://unsplash.com/@olgaserjantu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
          on
          [Unsplash](https://unsplash.com/collections/87604549/les-landes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        alt: ''
        src: /images/uploads/olga-serjantu-jbjd2kbi55s-unsplash.jpg
        legend: Lorem
      - src: /images/uploads/louis-mornaud-yugpd0evcgi-unsplash.jpg
---