Merge pull request #1110 from City-of-Helsinki/UHF-10239

UHF-10239 Image gallery paragraph

hdbt.theme

@@ -1907,3 +1907,44 @@ function hdbt_set_legacy_privacy_policy_url(array &$variables): void {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hdbt_preprocess_paragraph__image_gallery_item(array &$variables): void {
+  // Handle image caption preprocessing.
+  _hdbt_preprocess_image_caption(
+    $variables,
+    'paragraph',
+    'field_gallery_image',
+    'field_gallery_image_description',
+  );
+
+  $paragraph = $variables['paragraph'];
+  $parent = $paragraph->getParentEntity();
+
+  if ($parent->hasField('field_image_gallery_ratio') && !$parent->get('field_image_gallery_ratio')->isEmpty()) {
+    $ratio = $parent->field_image_gallery_ratio->value;
+
+    if ($paragraph->hasField('field_gallery_image') && !$paragraph->get('field_gallery_image')->isEmpty()) {
+      if ($ratio == 'ratio_2_3') {
+        $image_style = 'image_gallery_2_3';
+      }
+      elseif ($ratio == 'ratio_3_2') {
+        $image_style = 'image_gallery_3_2';
+      }
+      else {
+        $image_style = 'image_gallery_1_1';
+      }
+
+      _hdbt_set_image_style(
+        $variables,
+        'paragraph',
+        'field_gallery_image',
+        $image_style
+      );
+    }
+
+  }
+
+}

src/scss/06_components/paragraphs/__index.scss

@@ -10,6 +10,7 @@
 @import 'event-list';
 @import 'hearings';
 @import 'hero';
+@import 'image-gallery';
 @import 'image';
 @import 'liftup-with-image';
 @import 'list-of-links';

src/scss/06_components/paragraphs/_image-gallery.scss

@@ -0,0 +1,39 @@
+.image-gallery {
+  display: grid;
+  gap: $spacing-double;
+  grid-template-columns: repeat(1, 1fr);
+
+  @include breakpoint($breakpoint-s) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include breakpoint($breakpoint-l) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.node--type-page,
+.service--full,
+.unit--full,
+.node--type-district,
+.node--type-news-article {
+  .components--upper .image-gallery{
+    @include breakpoint($breakpoint-s) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+.image-gallery__item-image {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  img {
+    @include image-defaults($height: 100%, $width: 100%, $max-width: null);
+  }
+}
+
+.image-gallery__item-meta {
+  margin-top: $spacing-half;
+}

templates/paragraphs/paragraph--image-gallery-item.html.twig

@@ -0,0 +1,10 @@
+{% block paragraph %}
+  <div class="image-gallery__item">
+    <div class="image-gallery__item-image">
+      {{content.field_gallery_image}}
+    </div>
+    <div class="image-gallery__item-meta">
+      {{ gallery_image_description }}
+    </div>
+  </div>
+{% endblock paragraph %}

templates/paragraphs/paragraph--image-gallery.html.twig

@@ -0,0 +1,20 @@
+{% set ratio = content.field_image_gallery_ratio[0]['#markup']|replace({":": "-"}) %}
+
+{% block paragraph %}
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [ 'component--image-gallery' ],
+      component_title: content.field_image_gallery_title,
+      component_description: content.field_image_gallery_description,
+      component_content_class: [
+        'image-gallery',
+        'image-gallery--' ~ ratio],
+    }
+  %}
+    {% block component_content %}
+
+      {{ content.field_gallery_item }}
+
+    {% endblock component_content %}
+  {% endembed %}
+{% endblock paragraph %}