<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
}
]
}
]
}
.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 + .image-group,
.center-align > .text-block + .image-group + .text-block {
@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;
}
Images must be portrait.
An image group is way of images within page content. The aspect ratio of images can vary, but images used must be landscape.