diff --git a/src/patterns/04-components/image-gallery/_image-gallery.twig b/src/patterns/04-components/image-gallery/_image-gallery.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ca8b3d397cd62b6b3a1b4a7e42d25d81f3a417a5
--- /dev/null
+++ b/src/patterns/04-components/image-gallery/_image-gallery.twig
@@ -0,0 +1,143 @@
+{% set modifier_classes = 'uw-ig--' ~ type %}
+
+<div id="uw-ig-{{ images.id }}" class="uw-ig {{ modifier_classes }}" data-id="{{ images.id }}" data-images-num="{{ display_images }}" data-nav="{{ nav }}">
+ <div class="uw-ig__wrapper">
+ {% if type == NULL or type == 'slider' %}
+
+ {% embed '@layouts/carousel/carousel.twig' %}
+
+ {% block content %}
+ {% for index, image in images.images %}
+ <div class="uw-ig__item">
+ <div class="uw_ig__image">
+ <a class="uw-lightbox__open" href="#uw-lightbox-{{ images.id }}-{{ index }}">
+
+ {% include '@components/responsive-image/responsive-image.twig' with {
+ 'sources': image.image.sources,
+ 'img_element': image.image.img_element['#uri'],
+ 'alt': image.image.alt
+ } %}
+
+ </a>
+ </div>
+ {% if image.caption %}
+ <div class="uw_ig__caption">
+ {% include '@components/caption/caption.twig' with {
+ 'caption': image.caption
+ } %}
+ </div>
+ {% endif %}
+ </div>
+
+ {% endfor %}
+
+ {% endblock %}
+
+ {% endembed %}
+ {# lightbox #}
+
+ {% for index, image in images.images %}
+ <div class="uw-lightbox" id="uw-lightbox-{{ images.id }}-{{ index }}">
+ <div class="uw-lightbox__content">
+
+ <img src="{{ image.original }}" alt="{{ image.image.alt }}">
+
+ <div class="uw-lightbox__title">
+
+ <div class="uw-lightbox__count">
+ <span>{{ loop.index }} / {{ loop.length }}</span>
+ </div>
+
+ {% if image.caption %}
+ <div class="uw-lightbox__caption">{{ image.caption }}</div>
+ {% endif %}
+ </div>
+
+ <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>
+
+ {% set numItems = loop.length - "1" %}
+ {% if index == 0 %}
+ {% set prevIndex = numItems %}
+ {% set nextIndex = index + "1" %}
+ {% elseif index == numItems %}
+ {% set nextIndex = 0 %}
+ {% set prevIndex = index - "1" %}
+ {% else %}
+ {% set prevIndex = index - "1" %}
+ {% set nextIndex = index + "1" %}
+ {% endif %}
+
+ <div class="uw-lightbox__prev-next">
+ <a class="uw-lightbox__prev" href="#uw-lightbox-{{ images.id }}-{{ prevIndex }}"></a>
+ <a class="uw-lightbox__next" href="#uw-lightbox-{{ images.id }}-{{ nextIndex }}"></a>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+
+ {% else %}
+
+ {% for images in image_gallery.images %}
+
+ {% for index, image in images %}
+ <div class="uw-ig__item">
+ <div class="uw-ig__image">
+ <a class="uw-lightbox__open" href="#uw-lightbox-{{image_gallery.images.id }}-{{ index }}">
+ <img src="{{ image.image.thumbnail }}" alt="{{ image.image.alt }}" />
+ </a>
+
+ {% if image.caption %}
+ <div class="uw_ig__caption">
+ {% include '@components/caption/caption.twig' with {
+ 'caption': image.caption
+ } %}
+ </div>
+ {% endif %}
+
+ </div>
+ </div>
+ {% endfor %}
+ {% endfor %}
+
+ {# lightbox #}
+ {% for images in image_gallery.images %}
+
+ {% for index, image in images %}
+ <div class="uw-lightbox" id="uw-lightbox-{{ image_gallery.images.id }}-{{ index }}">
+ <div class="uw-lightbox__content">
+ <img src="{{ image.image.original }}" alt="{{ image.alt }}">
+
+ <div class="uw-lightbox__title">
+ <div class="uw-lightbox__count">
+ <span>{{ loop.index }} / {{ loop.length }}</span>
+ </div>
+ {% if image.caption %}
+ <div class="uw-lightbox__caption">{{ image.caption }}</div>
+ {% endif %}
+ </div>
+
+ <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>
+
+ {% set numItems = loop.length - "1" %}
+ {% if index == 0 %}
+ {% set prevIndex = numItems %}
+ {% set nextIndex = index + "1" %}
+ {% elseif index == numItems %}
+ {% set nextIndex = 0 %}
+ {% set prevIndex = index - "1" %}
+ {% else %}
+ {% set prevIndex = index - "1" %}
+ {% set nextIndex = index + "1" %}
+ {% endif %}
+
+ <div class="uw-lightbox__prev-next">
+ <a class="uw-lightbox__prev" href="#uw-lightbox-{{ image_gallery.images.id }}-{{ prevIndex }}"></a>
+ <a class="uw-lightbox__next" href="#uw-lightbox-{{image_gallery.images.id }}-{{ nextIndex }}"></a>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ {% endfor %}
+ {% endif %}
+ </div>
+</div>
diff --git a/src/patterns/04-components/image-gallery/image-gallery.twig b/src/patterns/04-components/image-gallery/image-gallery.twig
index 706dee82d1d3f945a742c7ddcef59098b0ea5ed7..92a253da024ba9773f3c51e891e4101ec1668ede 100644
--- a/src/patterns/04-components/image-gallery/image-gallery.twig
+++ b/src/patterns/04-components/image-gallery/image-gallery.twig
@@ -1,150 +1,11 @@
-{% set modifier_classes = 'uw-ig--' ~ type %}
-
- <div id="uw-ig-{{ images.id }}" class="uw-ig {{ modifier_classes }}" data-id="{{ images.id }}" data-images-num="{{ display_images }}" data-nav="{{ nav }}">
- <div class="uw-ig__wrapper">
- {% if type == NULL or type == 'slider' %}
-
- {% embed '@layouts/carousel/carousel.twig' %}
-
- {% block content %}
- {% for index, image in images.images %}
- <div class="uw-ig__item">
- <div class="uw_ig__image">
- <a class="uw-lightbox__open" href="#uw-lightbox-{{ images.id }}-{{ index }}">
-
- {% include '@components/responsive-image/responsive-image.twig' with {
- 'sources': image.image.sources,
- 'img_element': image.image.img_element['#uri'],
- 'alt': image.image.alt
- } %}
-
- </a>
- </div>
- {% if image.caption %}
- <div class="uw_ig__caption">
- {% include '@components/caption/caption.twig' with {
- 'caption': image.caption
- } %}
- </div>
- {% endif %}
- </div>
-
- {% endfor %}
-
- {% endblock %}
-
- {% endembed %}
- {# lightbox #}
-
- {% for index, image in images.images %}
- <div class="uw-lightbox" id="uw-lightbox-{{ images.id }}-{{ index }}">
- <div class="uw-lightbox__content">
-
- <img src="{{ image.original }}" alt="{{ image.image.alt }}">
-
- <div class="uw-lightbox__title">
-
- <div class="uw-lightbox__count">
- <span>{{ loop.index }} / {{ loop.length }}</span>
- </div>
-
- {% if image.caption %}
- <div class="uw-lightbox__caption">{{ image.caption }}</div>
- {% endif %}
- </div>
-
- <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>
-
- {% set numItems = loop.length - "1" %}
- {% if index == 0 %}
- {% set prevIndex = numItems %}
- {% set nextIndex = index + "1" %}
- {% elseif index == numItems %}
- {% set nextIndex = 0 %}
- {% set prevIndex = index - "1" %}
- {% else %}
- {% set prevIndex = index - "1" %}
- {% set nextIndex = index + "1" %}
- {% endif %}
-
- <div class="uw-lightbox__prev-next">
- <a class="uw-lightbox__prev" href="#uw-lightbox-{{ images.id }}-{{ prevIndex }}"></a>
- <a class="uw-lightbox__next" href="#uw-lightbox-{{ images.id }}-{{ nextIndex }}"></a>
- </div>
- </div>
- </div>
- {% endfor %}
-
- {% else %}
-
- {% for images in image_gallery.images %}
-
- {% for index, image in images %}
- <div class="uw-ig__item">
- <div class="uw-ig__image">
- <a class="uw-lightbox__open" href="#uw-lightbox-{{image_gallery.images.id }}-{{ index }}">
- <img src="{{ image.image.thumbnail }}" alt="{{ image.image.alt }}" />
- </a>
-
- {% if image.caption %}
- <div class="uw_ig__caption">
- {% include '@components/caption/caption.twig' with {
- 'caption': image.caption
- } %}
- </div>
- {% endif %}
-
- </div>
- </div>
- {% endfor %}
- {% endfor %}
-
- {# lightbox #}
- {% for images in image_gallery.images %}
-
- {% for index, image in images %}
- <div class="uw-lightbox" id="uw-lightbox-{{ image_gallery.images.id }}-{{ index }}">
- <div class="uw-lightbox__content">
- <img src="{{ image.image.original }}" alt="{{ image.alt }}">
-
- <div class="uw-lightbox__title">
- <div class="uw-lightbox__count">
- <span>{{ loop.index }} / {{ loop.length }}</span>
- </div>
- {% if image.caption %}
- <div class="uw-lightbox__caption">{{ image.caption }}</div>
- {% endif %}
- </div>
-
- <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>
-
- {% set numItems = loop.length - "1" %}
- {% if index == 0 %}
- {% set prevIndex = numItems %}
- {% set nextIndex = index + "1" %}
- {% elseif index == numItems %}
- {% set nextIndex = 0 %}
- {% set prevIndex = index - "1" %}
- {% else %}
- {% set prevIndex = index - "1" %}
- {% set nextIndex = index + "1" %}
- {% endif %}
-
- <div class="uw-lightbox__prev-next">
- <a class="uw-lightbox__prev" href="#uw-lightbox-{{ image_gallery.images.id }}-{{ prevIndex }}"></a>
- <a class="uw-lightbox__next" href="#uw-lightbox-{{image_gallery.images.id }}-{{ nextIndex }}"></a>
- </div>
- </div>
- </div>
- {% endfor %}
- {% endfor %}
- </div>
- {% endif %}
-
- </div>
- </div>
-
-
-
-
-
+<h2>Slider</h2>
+{% include '@components/image-gallery/_image-gallery.twig' with {
+ type: 'slider',
+ images: images
+} %}
+
+<h2>Grid</h2>
+{% include '@components/image-gallery/_image-gallery.twig' with {
+ type: 'grid',
+ image_gallery: image_gallery
+} %}
diff --git a/src/patterns/04-components/image-gallery/image-gallery.yml b/src/patterns/04-components/image-gallery/image-gallery.yml
index 2ff830f91ac036bf701d89e790cd3673205af6f4..0449cb65a81d1f5c676e252f3c64adc9b9855c55 100644
--- a/src/patterns/04-components/image-gallery/image-gallery.yml
+++ b/src/patterns/04-components/image-gallery/image-gallery.yml
@@ -1,5 +1,5 @@
images:
- id: 'someid'
+ id: 'slider'
images:
- image:
sources:
@@ -78,3 +78,43 @@ images:
img_element: '../../images/Montreal.jpg'
alt: 'Alternative text'
caption: 'Montreal'
+image_gallery:
+ images:
+ id: 'grid'
+ images:
+ -
+ image:
+ thumbnail: '../../images/Toronto_Thumbnail.jpg'
+ original: '../../images/Toronto.jpg'
+ alt: 'Alternative text'
+ caption: 'Toronto'
+ -
+ image:
+ thumbnail: '../../images/Vancouver_Thumbnail.jpg'
+ original: '../../images/Vancouver.jpg'
+ alt: 'Alternative text'
+ caption: Vancouver'
+ -
+ image:
+ thumbnail: '../../images/Montreal_Thumbnail.jpg'
+ original: '../../images/Montreal.jpg'
+ alt: 'Alternative text'
+ caption: 'Montreal'
+ -
+ image:
+ thumbnail: '../../images/Montreal_Thumbnail.jpg'
+ original: '../../images/Montreal.jpg'
+ alt: 'Alternative text'
+ caption: 'Montreal'
+ -
+ image:
+ thumbnail: '../../images/Toronto_Thumbnail.jpg'
+ original: '../../images/Toronto.jpg'
+ alt: 'Alternative text'
+ caption: 'Toronto'
+ -
+ image:
+ thumbnail: '../../images/Vancouver_Thumbnail.jpg'
+ original: '../../images/Vancouver.jpg'
+ alt: 'Alternative text'
+ caption: Vancouver'
diff --git a/src/patterns/04-components/uw-images/cities/Montreal_Thumbnail.jpg b/src/patterns/04-components/uw-images/cities/Montreal_Thumbnail.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2c849c3330d347de2e56f2fe92d4587a30b8589a
Binary files /dev/null and b/src/patterns/04-components/uw-images/cities/Montreal_Thumbnail.jpg differ
diff --git a/src/patterns/04-components/uw-images/cities/Toronto.jpg b/src/patterns/04-components/uw-images/cities/Toronto.jpg
index 8adfe644b70ab3c182678ef429ea7360ccb52bb9..3b806838671507fe871d422619d47d200b58bba8 100644
Binary files a/src/patterns/04-components/uw-images/cities/Toronto.jpg and b/src/patterns/04-components/uw-images/cities/Toronto.jpg differ
diff --git a/src/patterns/04-components/uw-images/cities/Toronto_Thumbnail.jpg b/src/patterns/04-components/uw-images/cities/Toronto_Thumbnail.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5d2d5b677518d8233889267e4bbd8903aa94cfce
Binary files /dev/null and b/src/patterns/04-components/uw-images/cities/Toronto_Thumbnail.jpg differ
diff --git a/src/patterns/04-components/uw-images/cities/Vancouver.jpg b/src/patterns/04-components/uw-images/cities/Vancouver.jpg
index 851dcae9178c35d0796d7b225b75a96bef125697..d0c74681c5e5de59a2fe3dbd54ec8da8faa1aa1e 100644
Binary files a/src/patterns/04-components/uw-images/cities/Vancouver.jpg and b/src/patterns/04-components/uw-images/cities/Vancouver.jpg differ
diff --git a/src/patterns/04-components/uw-images/cities/Vancouver_Thumbnail.jpg b/src/patterns/04-components/uw-images/cities/Vancouver_Thumbnail.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..44661deb60719ff7572da2ae73f1d3810aab2970
Binary files /dev/null and b/src/patterns/04-components/uw-images/cities/Vancouver_Thumbnail.jpg differ