Image Gallery

Short Description:

The Image Gallery is a graphic composition of different images, which provides the user with a nice layout for inspiration purposes.

Marketing purpose:

The gallery is intended to be a stimulating compilation of different assets that liven up the site and inspire the user.

Content architecture:

The gallery is maintained directly on the page.

Opions

The Image Gallery has two styling options: Portrait and Landscape.

Schiffe

AOS (live)

Example Landscape

Properties
Markup
JSON


    

    
        sling:resourceType:
        aida-component-library/core/components/content/imageGallery
    

    
        displayStyle:
        landscape

    <div class="imageGallery">
  <div class="cmp-image-gallery" id="imageGallery-e69934b943">
    <div class="cmp-image-gallery-landscape is-mobile">
      <div class="item0 image cmp-image-0">
        <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85{.width}.jpeg/1682696643673/breakfast.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/breakfast.jpeg" id="mobile-0" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
          <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.jpeg/1682696643673/breakfast.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.320.jpeg/1682696643673/breakfast.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.480.jpeg/1682696643673/breakfast.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.600.jpeg/1682696643673/breakfast.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.800.jpeg/1682696643673/breakfast.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.1024.jpeg/1682696643673/breakfast.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.1200.jpeg/1682696643673/breakfast.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.1600.jpeg/1682696643673/breakfast.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1708" alt="Breakfast">
        </div>
      </div>
      <div class="container-1">
        <div class="item1 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85{.width}.jpeg/1682696658920/jacuzzi.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/jacuzzi.jpeg" id="mobile-1" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.jpeg/1682696658920/jacuzzi.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.320.jpeg/1682696658920/jacuzzi.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.480.jpeg/1682696658920/jacuzzi.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.600.jpeg/1682696658920/jacuzzi.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.800.jpeg/1682696658920/jacuzzi.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.1024.jpeg/1682696658920/jacuzzi.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.1200.jpeg/1682696658920/jacuzzi.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.1600.jpeg/1682696658920/jacuzzi.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1871" height="1243" alt="Jacuzzi">
          </div>
        </div>
        <div class="item2 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85{.width}.jpeg/1682696635481/mother-child.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/mother-child.jpeg" id="mobile-2" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.jpeg/1682696635481/mother-child.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.320.jpeg/1682696635481/mother-child.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.480.jpeg/1682696635481/mother-child.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.600.jpeg/1682696635481/mother-child.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.800.jpeg/1682696635481/mother-child.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.1024.jpeg/1682696635481/mother-child.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.1200.jpeg/1682696635481/mother-child.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.1600.jpeg/1682696635481/mother-child.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1918" alt="Mother child">
          </div>
        </div>
      </div>
      <div class="container-2">
        <div class="item3 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85{.width}.jpeg/1682696661127/playing.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/playing.jpeg" id="mobile-3" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.jpeg/1682696661127/playing.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.320.jpeg/1682696661127/playing.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.480.jpeg/1682696661127/playing.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.600.jpeg/1682696661127/playing.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.800.jpeg/1682696661127/playing.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.1024.jpeg/1682696661127/playing.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.1200.jpeg/1682696661127/playing.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.1600.jpeg/1682696661127/playing.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1707" alt="Playing">
          </div>
        </div>
        <div class="item4 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85{.width}.jpeg/1682696635985/restaurant.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/restaurant.jpeg" id="mobile-4" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.jpeg/1682696635985/restaurant.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.320.jpeg/1682696635985/restaurant.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.480.jpeg/1682696635985/restaurant.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.600.jpeg/1682696635985/restaurant.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.800.jpeg/1682696635985/restaurant.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.1024.jpeg/1682696635985/restaurant.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.1200.jpeg/1682696635985/restaurant.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.1600.jpeg/1682696635985/restaurant.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1871" height="1243" alt="Restaurant">
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-image-gallery-landscape is-desktop">
      <div class="container-1">
        <div class="item0 image cmp-image">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85{.width}.jpeg/1682696643673/breakfast.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/breakfast.jpeg" id="desktop-0" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.jpeg/1682696643673/breakfast.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.320.jpeg/1682696643673/breakfast.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.480.jpeg/1682696643673/breakfast.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.600.jpeg/1682696643673/breakfast.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.800.jpeg/1682696643673/breakfast.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.1024.jpeg/1682696643673/breakfast.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.1200.jpeg/1682696643673/breakfast.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item0.coreimg.85.1600.jpeg/1682696643673/breakfast.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1708" alt="Breakfast">
          </div>
        </div>
        <div class="item1 image cmp-image">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85{.width}.jpeg/1682696658920/jacuzzi.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/jacuzzi.jpeg" id="desktop-1" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.jpeg/1682696658920/jacuzzi.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.320.jpeg/1682696658920/jacuzzi.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.480.jpeg/1682696658920/jacuzzi.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.600.jpeg/1682696658920/jacuzzi.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.800.jpeg/1682696658920/jacuzzi.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.1024.jpeg/1682696658920/jacuzzi.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.1200.jpeg/1682696658920/jacuzzi.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item1.coreimg.85.1600.jpeg/1682696658920/jacuzzi.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1871" height="1243" alt="Jacuzzi">
          </div>
        </div>
      </div>
      <div class="container-2">
        <div class="item2 image cmp-image">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85{.width}.jpeg/1682696635481/mother-child.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/mother-child.jpeg" id="desktop-2" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.jpeg/1682696635481/mother-child.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.320.jpeg/1682696635481/mother-child.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.480.jpeg/1682696635481/mother-child.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.600.jpeg/1682696635481/mother-child.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.800.jpeg/1682696635481/mother-child.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.1024.jpeg/1682696635481/mother-child.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.1200.jpeg/1682696635481/mother-child.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item2.coreimg.85.1600.jpeg/1682696635481/mother-child.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1918" alt="Mother child">
          </div>
        </div>
        <div class="item3 image cmp-image">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85{.width}.jpeg/1682696661127/playing.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/playing.jpeg" id="desktop-3" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.jpeg/1682696661127/playing.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.320.jpeg/1682696661127/playing.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.480.jpeg/1682696661127/playing.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.600.jpeg/1682696661127/playing.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.800.jpeg/1682696661127/playing.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.1024.jpeg/1682696661127/playing.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.1200.jpeg/1682696661127/playing.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item3.coreimg.85.1600.jpeg/1682696661127/playing.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1707" alt="Playing">
          </div>
        </div>
        <div class="item4 image cmp-image">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85{.width}.jpeg/1682696635985/restaurant.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/restaurant.jpeg" id="desktop-4" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.jpeg/1682696635985/restaurant.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.320.jpeg/1682696635985/restaurant.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.480.jpeg/1682696635985/restaurant.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.600.jpeg/1682696635985/restaurant.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.800.jpeg/1682696635985/restaurant.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.1024.jpeg/1682696635985/restaurant.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.1200.jpeg/1682696635985/restaurant.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo/component/imagegallery_copy/images/item4.coreimg.85.1600.jpeg/1682696635985/restaurant.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1871" height="1243" alt="Restaurant">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example Portrait

Properties
Markup
JSON


    

    
        sling:resourceType:
        aida-component-library/core/components/content/imageGallery
    

    
        displayStyle:
        portrait

    <div class="imageGallery">
  <div class="cmp-image-gallery" id="imageGallery-e4d4517bca">
    <div class="cmp-image-gallery-portrait">
      <div class="item0 image cmp-image-0">
        <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85{.width}.jpeg/1682696659124/room.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/room.jpeg" id="image-a96fc82c7f" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
          <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.jpeg/1682696659124/room.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.320.jpeg/1682696659124/room.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.480.jpeg/1682696659124/room.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.600.jpeg/1682696659124/room.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.800.jpeg/1682696659124/room.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.1024.jpeg/1682696659124/room.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.1200.jpeg/1682696659124/room.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item0.coreimg.85.1600.jpeg/1682696659124/room.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2043" height="1359" alt="Room">
        </div>
      </div>
      <div class="container-1">
        <div class="item1 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85{.width}.jpeg/1682696650282/running.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/running.jpeg" id="image-5c93d5639c" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.jpeg/1682696650282/running.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.320.jpeg/1682696650282/running.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.480.jpeg/1682696650282/running.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.600.jpeg/1682696650282/running.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.800.jpeg/1682696650282/running.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.1024.jpeg/1682696650282/running.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.1200.jpeg/1682696650282/running.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item1.coreimg.85.1600.jpeg/1682696650282/running.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1644" height="1096" alt="Running">
          </div>
        </div>
        <div class="item2 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85{.width}.jpeg/1682696648108/show.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/show.jpeg" id="image-7258941a09" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.jpeg/1682696648108/show.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.320.jpeg/1682696648108/show.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.480.jpeg/1682696648108/show.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.600.jpeg/1682696648108/show.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.800.jpeg/1682696648108/show.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.1024.jpeg/1682696648108/show.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.1200.jpeg/1682696648108/show.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item2.coreimg.85.1600.jpeg/1682696648108/show.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2043" height="1359" alt="Show">
          </div>
        </div>
      </div>
      <div class="container-2">
        <div class="item3 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85{.width}.jpeg/1682696653856/small-room.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/small-room.jpeg" id="image-3a0031c6c9" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.jpeg/1682696653856/small-room.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.320.jpeg/1682696653856/small-room.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.480.jpeg/1682696653856/small-room.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.600.jpeg/1682696653856/small-room.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.800.jpeg/1682696653856/small-room.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.1024.jpeg/1682696653856/small-room.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.1200.jpeg/1682696653856/small-room.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item3.coreimg.85.1600.jpeg/1682696653856/small-room.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2035" height="1290" alt="Small Room">
          </div>
        </div>
        <div class="item4 image cmp-image-N">
          <div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85{.width}.jpeg/1682696649710/table.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/table.jpeg" id="image-53cb5304c0" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
            <img src="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.jpeg/1682696649710/table.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.320.jpeg/1682696649710/table.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.480.jpeg/1682696649710/table.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.600.jpeg/1682696649710/table.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.800.jpeg/1682696649710/table.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.1024.jpeg/1682696649710/table.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.1200.jpeg/1682696649710/table.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-359-CP-Image-Gallery/_jcr_content/root/responsivegrid/demo_596206738/component/imagegallery_copy/images/item4.coreimg.85.1600.jpeg/1682696649710/table.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1706" alt="Table">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

myAIDA

Careers

Page Authoring

Navigation

Containers

Utilities