Image Gallery

Dynamic image gallery

Component Properties

Section Properties

Text / Background Color Theme [COLOR_THEME]

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

Section Modifier [MODIFIER]

Optionally add an overall modifier class to the component.

Section Vertical Spacing [SPACING]

Optional: Adds top and bottom padding to section.

none
No spacing applied to element
.sec-spacing
Adds top and bottom spacing to section
.sec-spacing-sm
Adds a small amount top and bottom spacing to section
.sec-spacing-lg
Adds a large amount top and bottom spacing to section

Container Modifier [CONTAINER]

Use .container-fluid for a full width container, spanning the entire width of the viewport

.container
Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl
Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid
Full width section contrainer. Container runs from edge to egde of the viewport

Gallery Properties

Image Aspect Ratio [IMAGE_ASPECT]

Sets the aspect ratio for the image within the gallery grid.

none
Image takes up one grid space
.item-tall
Image will span two vertical grid spaces
.item-wide
Image will span two horizontal grid spaces

Gallery Name [GALLERY_NAME]

Groups gallery images together if there are multiple galleries on a page.

<a ... data-group="[GALLERY_NAME]">
Unique name

Lightbox Image [LARGE_IMAGE_PATH]

<a ... href="[LARGE_IMAGE_PATH]">
Path to lightbox large image to show when thumbnail is clicked.

Gallery Text [GALLERY_TEXT]

Groups gallery images together if there are multiple galleries on a page.

<img ... alt="[GALLERY_TEXT]">
Text to show when large gallery image is shown.
Image Gallery template
<section class="gal-sec [COLOR_THEME] [SPACING] [MODIFIER]">
  <div class="[CONTAINER]">
    <div class="row">
      <!-- Optional section heading -->
      <div class="col-12 sec-heading">
        <[HEADING_LVL]>
          [HEADONG_TEXT]
        </[HEADING_LVL]>
      </div>
      <!-- Image Gallery -->
      <div class="col-12">
        <div class="img-gallery [MODIFIER]">
          <!-- Each Image in gallery -->
          <a href="[LARGE_IMAGE_PATH]" class="kb-lightbox gallery-item [IMAGE_ASPECT]" data-group="[GALLERY_NAME]">
            <img
              srcset="xs_image@xs.jpg 480w, md_image@md.jpg 720w,"
              sizes="(max-width: 576px) 480px, (max-width: 768px) 720px,"
              src="md_image@md.jpg"
              alt="[GALLERY_TEXT]"
              class="gallery-img">
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Gallery with Heading

Click on image to open lightbox.

View in new window
<section class="gal-sec text-bg-light sec-spacing">
  <div class="container-xxl">
    <div class="row">
      <div class="col-12 sec-heading">
        <h2>
          Section Heading
        </h2>
      </div>
      <div class="col">
        <div class="img-gallery" style=" --kb-galrow-md: 4; --kb-galrow-xl: 3;">
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;110" class="kb-lightbox gallery-item item-tall" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 1"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;111" class="kb-lightbox gallery-item item-wide" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 2"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;112" class="kb-lightbox gallery-item" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 3"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;113" class="kb-lightbox gallery-item item-tall" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 4"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;114" class="kb-lightbox gallery-item" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 5"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;115" class="kb-lightbox gallery-item" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 6"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;116" class="kb-lightbox gallery-item" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 7"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;117" class="kb-lightbox gallery-item item-wide" data-group="exampleGallery">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 8"
              class="gallery-img"
            >
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Fluid Gallery

Click on image to open lightbox.

View in new window
<section class="gal-sec text-bg-light sec-spacing-sm">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="img-gallery" style=" --kb-galrow-md: 4; --kb-galrow-xl: 4;">
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;210" class="kb-lightbox gallery-item item-tall" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 1"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;211" class="kb-lightbox gallery-item item-wide" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 2"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;212" class="kb-lightbox gallery-item" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 3"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;213" class="kb-lightbox gallery-item item-tall" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 4"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;214" class="kb-lightbox gallery-item" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 5"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;215" class="kb-lightbox gallery-item" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 6"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;216" class="kb-lightbox gallery-item" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 7"
              class="gallery-img"
            >
          </a>
          <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;217" class="kb-lightbox gallery-item item-wide" data-group="fluidExample">
            <img
              srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                      ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
              sizes="(max-width: 576px) 480px,
                     (max-width: 768px) 720px,"
              src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
              alt="Image 8"
              class="gallery-img"
            >
          </a>
        </div>
      </div>
    </div>
  </div>
</section>