University of Derby

Image Group: 3 images 

<section class="image-group image-group-3-images">
    <figure class="image-group-image-fig">
        <img class="image-group-image-img" src="../../images/image-group-demo/_56A0980.jpg" srcset="../../images/image-group-demo/_56A0980,w_320.jpg 320w, ../../images/image-group-demo/_56A0980,w_400.jpg 400w, ../../images/image-group-demo/_56A0980,w_650.jpg 650w, ../../images/image-group-demo/_56A0980,w_900.jpg 900w, ../../images/image-group-demo/_56A0980.jpg"
            alt="Creative drawing" />
    </figure>
    <figure class="image-group-image-fig">
        <img class="image-group-image-img" src="../../images/image-group-demo/chairs-uod.jpg" srcset="../../images/image-group-demo/chairs-uod,w_320.jpg 320w, ../../images/image-group-demo/chairs-uod,w_400.jpg 400w, ../../images/image-group-demo/chairs-uod,w_650.jpg 650w, ../../images/image-group-demo/chairs-uod,w_900.jpg 900w, ../../images/image-group-demo/chairs-uod.jpg"
            alt="Designer chairs" />
    </figure>
    <figure class="image-group-image-fig">
        <img class="image-group-image-img" src="../../images/image-group-demo/UG19Prosp-Keyvis-398.jpg" srcset="../../images/image-group-demo/UG19Prosp-Keyvis-398,w_320.jpg 320w, ../../images/image-group-demo/UG19Prosp-Keyvis-398,w_400.jpg 400w, ../../images/image-group-demo/UG19Prosp-Keyvis-398,w_650.jpg 650w, ../../images/image-group-demo/UG19Prosp-Keyvis-398,w_900.jpg 900w, ../../images/image-group-demo/UG19Prosp-Keyvis-398.jpg"
            alt="Student relaxing with a coffee" />
    </figure>
</section>
 
<section class="image-group image-group-{{ images|length }}-images">
    {% for image in images %}
    <figure class="image-group-image-fig">
        <img class="image-group-image-img" src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />
    </figure>
    {% endfor %}
</section>
 
{
  "images": [
    {
      "path": "/images/image-group-demo/_56A0980.jpg",
      "alt": "Creative drawing",
      "srcset": [
        {
          "path": "/images/image-group-demo/_56A0980,w_320.jpg",
          "width": 320
        },
        {
          "path": "/images/image-group-demo/_56A0980,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/image-group-demo/_56A0980,w_650.jpg",
          "width": 650
        },
        {
          "path": "/images/image-group-demo/_56A0980,w_900.jpg",
          "width": 900
        }
      ]
    },
    {
      "path": "/images/image-group-demo/chairs-uod.jpg",
      "alt": "Designer chairs",
      "srcset": [
        {
          "path": "/images/image-group-demo/chairs-uod,w_320.jpg",
          "width": 320
        },
        {
          "path": "/images/image-group-demo/chairs-uod,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/image-group-demo/chairs-uod,w_650.jpg",
          "width": 650
        },
        {
          "path": "/images/image-group-demo/chairs-uod,w_900.jpg",
          "width": 900
        }
      ]
    },
    {
      "path": "/images/image-group-demo/UG19Prosp-Keyvis-398.jpg",
      "alt": "Student relaxing with a coffee",
      "srcset": [
        {
          "path": "/images/image-group-demo/UG19Prosp-Keyvis-398,w_320.jpg",
          "width": 320
        },
        {
          "path": "/images/image-group-demo/UG19Prosp-Keyvis-398,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/image-group-demo/UG19Prosp-Keyvis-398,w_650.jpg",
          "width": 650
        },
        {
          "path": "/images/image-group-demo/UG19Prosp-Keyvis-398,w_900.jpg",
          "width": 900
        }
      ]
    }
  ]
}
  • Content: 
    .image-group{
    lost-column: 8/8 0;
    position: relative;
    // start: set default intra-component spacing (units are responsive and based on em values)
    @include margin-medium;
    
    @include for-tablet-portrait-up {
        @include margin-large;
    }
    // end: set default intra-component spacing (units are responsive and based on em values)

    //if the image group has 2 images we need to add some extra padding as to compensate for image 2 being absolutely positioned
    &-2-images {

        @include for-tablet-portrait-up {
            padding-bottom: 40px;
        }

        @include for-tablet-landscape-up {
            padding-bottom: 60px;
        }
    }

    &-image-fig {
        margin: 0;
        lost-column: 7/8 0;

        @include clearfix;

        @include for-tablet-portrait-up {
            lost-column: 9/16 0;
        }

        @include for-tablet-landscape-up {
            lost-column: 8/16 0;
            lost-offset: 1/16;
        }

        &:nth-child(2) {
            lost-offset: 1/8;
            margin-top: -20px;

            @include for-tablet-portrait-up {
                lost-offset: 7/16;
                position: absolute;
                margin-top: 0;
                top: 40px;
            }

            @include for-tablet-landscape-up {
                lost-offset: 7/16;
                top: 60px;
            }
        }

        &:nth-child(3){
            margin-top: -20px;
            position: relative;
         
            @include for-tablet-portrait-up {
                lost-offset: 2/16;
                margin-top: -40px;
            }

            @include for-tablet-landscape-up {
                lost-offset: 3/16;
                margin-top: -60px;
            }
        }
    }

    &-image-img {
        display: block;
        max-width: 100%;
    }
}

/* When an image group follows a text block adjust the margins... */
.center-align > .text-block:not(.text-block-course-page-heading) + .image-group,
.center-align > .text-block:not(.text-block-course-page-heading) + .image-group + .text-block:not(.text-block-course-page-heading) {
    @include margin-medium-offset;

    @include for-tablet-portrait-up {
        @include margin-large-offset;
    }
}

/* When an image embed follows an image embed... */
.center-align > .image-group + .image-group {
    @include margin-medium-offset;
}
  • URL: /components/raw/image-group/image-group.scss
  • Filesystem Path: components/components/image-group/image-group.scss
  • Size: 2.4 KB

Images must be portrait.

Image Group

An image group is way of images within page content. The aspect ratio of images can vary, but images used must be landscape.

Key features

  • Can display 2 or 3 images
  • Optional srcset support

Properties

  • Images [required, Array of Image]

Image

  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]

ResponsiveImage

  • image [required, string(path)]
  • width [required, number]