Merge pull request #791 from City-of-Helsinki/UHF-8685

UHF-8685: Photographer information for the liftup with image paragraph
City-of-Helsinki · Oct 10, 2023 · ea84128 · ea84128
2 parents 34d158f + 0b5d59f
commit ea84128
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 13 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/hdbt.theme b/hdbt.theme
@@ -784,6 +784,32 @@ function hdbt_preprocess_paragraph__liftup_with_image(&$variables) {
       $image_style
     );
   }
+
+  // Add the photographer to the image caption.
+  if ($paragraph->hasField('field_liftup_with_image_image')) {
+
+    // Get translated photographer text if available.
+    if ($paragraph->field_liftup_with_image_image->entity->hasTranslation($variables['current_langcode'])) {
+      $photographer = $paragraph->field_liftup_with_image_image->entity->getTranslation($variables['current_langcode'])->field_photographer->value;
+    }
+    else {
+      $photographer = $paragraph->field_liftup_with_image_image->entity->field_photographer->value;
+    }
+
+    if (!$photographer) {
+      $caption = '';
+    }
+    else {
+      $caption = t(
+        'Photo: @photographer',
+        ['@photographer' => $photographer],
+        ['context' => 'Image photographer']
+      );
+    }
+
+    // Set image caption variable to render array for the template.
+    $variables['image_caption'] = $caption;
+  }
 }
 
 /**

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/scss/06_components/paragraphs/_liftup-with-image.scss b/src/scss/06_components/paragraphs/_liftup-with-image.scss
@@ -37,13 +37,31 @@ $breakpoint-design-image-on-left-right: 830px;
     }
   }
 
+  .image__caption {
+    color: $color-black;
+  }
+
+  &.component--liftup-with-image-img-on-right .liftup-with-image .image__caption,
+  &.component--liftup-with-image-img-on-left .liftup-with-image .image__caption {
+    @include breakpoint($breakpoint-design-image-on-left-right) {
+      bottom: $spacing;
+      position: absolute;
+    }
+  }
+
   &.component--liftup-with-image-img-on-right .liftup-with-image {
     --content-area: row2-start / col1-start / row2-end / col1-end;
     --image-area: row1-start / col2-start / row1-end / col2-end;
 
     [dir='rtl'] & {
       --content-margin-left: auto;
     }
+
+    .image__caption {
+      @include breakpoint($breakpoint-design-image-on-left-right) {
+        right: 0;
+      }
+    }
   }
 
   &.component--liftup-with-image-img-on-left .liftup-with-image {
@@ -248,6 +266,46 @@ $breakpoint-design-image-on-left-right: 830px;
   }
 }
 
+// Designs with overlapping image and text
+.component--liftup-with-image-img {
+  .image {
+    display: flex;
+    flex-direction: column;
+  }
+
+  picture {
+    order: 2;
+    padding-top: $spacing;
+
+    @include breakpoint($breakpoint-design-image-on-left-right) {
+      order: 1;
+      padding-top: 0;
+    }
+  }
+
+  .image__caption {
+    order: 1;
+    padding-top: 0;
+    text-align: right;
+
+    @include breakpoint($breakpoint-design-image-on-left-right) {
+      order: 2;
+      padding-top: $spacing;
+    }
+  }
+
+  &.has-image-caption .liftup-with-image {
+    @include breakpoint($breakpoint-design-image-on-left-right) {
+      // Same line-height as the one used in the caption.
+      --line-height: 1.5;
+      // Line-height of the caption + spacing above the caption + spacing under the caption.
+      padding-bottom: calc((var(--line-height) * 1rem) + $spacing + $spacing);
+      position: relative;
+    }
+  }
+}
+
+
 // Designs with image as background.
 .no-sidebar .components--upper > .component--liftup-with-image-bg.component--liftup-with-image-bg {
   padding-inline: 0;
@@ -273,19 +331,41 @@ $breakpoint-design-image-on-left-right: 830px;
     @include breakpoint($breakpoint-l) {
       min-height: 540px; // Minimum height determined with designers.
       position: relative;
+    }
 
-      // stylelint-disable-next-line max-nesting-depth
-      picture {
+    // stylelint-disable-next-line max-nesting-depth
+    picture {
+      @include breakpoint($breakpoint-l) {
         inset: 0;
         position: absolute;
       }
+    }
 
-      // stylelint-disable-next-line max-nesting-depth
-      img {
+    // stylelint-disable-next-line max-nesting-depth
+    img {
+      @include breakpoint($breakpoint-l) {
         @include image-defaults($height: 100%, $width: 100%, $max-width: null);
         object-fit: cover;
       }
     }
+
+    // stylelint-disable-next-line max-nesting-depth
+    .image__caption {
+      color: $color-black;
+      padding-left: $spacing;
+
+      @include breakpoint($breakpoint-m) {
+        padding-left: $spacing-double;
+      }
+
+      @include breakpoint($breakpoint-l) {
+        // Make the value negative * line-height of the caption + spacing above the caption.
+        bottom: calc(-1 * (var(--line-height) * 1rem + $spacing));
+        left: $spacing;
+        padding-left: 0;
+        position: absolute;
+      }
+    }
   }
 
   .liftup-with-image__container {
@@ -300,7 +380,7 @@ $breakpoint-design-image-on-left-right: 830px;
 
   .liftup-with-image__content {
     justify-self: end;
-    padding-block-start: $spacing-double;
+    padding-block-start: $spacing;
     padding-inline: 0;
     z-index: 1;
 
@@ -381,6 +461,16 @@ $breakpoint-design-image-on-left-right: 830px;
       text-decoration: underline;
     }
   }
+
+  &.has-image-caption .liftup-with-image {
+    @include breakpoint($breakpoint-l) {
+      // Same line-height as the one used in the caption.
+      --line-height: 1.5;
+      // Line-height of the caption + spacing above the caption + spacing under the caption.
+      padding-bottom: calc((var(--line-height) * 1rem) + $spacing + $spacing);
+      position: relative;
+    }
+  }
 }
 
 .component--liftup-with-image-bg.component--liftup-with-image-img-on-left  .liftup-with-image__container {

diff --git a/templates/paragraphs/paragraph--liftup-with-image.html.twig b/templates/paragraphs/paragraph--liftup-with-image.html.twig
@@ -16,12 +16,17 @@
   {% set design_class = null %} {# This should not happen #}
 {% endif %}
 
+{% if image_caption %}
+  {% set image_caption_class = 'has-image-caption' %}
+{% endif %}
+
 {% block paragraph %}
   {% embed "@hdbt/misc/component.twig" with
     {
       component_classes: [
         'component--liftup-with-image',
         design_class,
+        image_caption_class,
       ],
       component_content_class: 'liftup-with-image',
     }
@@ -30,7 +35,10 @@
 
       {% if content.field_liftup_with_image_image|render %}
         <div class="liftup-with-image__image">
-          {{ content.field_liftup_with_image_image }}
+          {% include '@hdbt/misc/image-with-caption.twig' with {
+            image: content.field_liftup_with_image_image,
+            image_caption: image_caption
+          } %}
         </div>
       {% endif %}
       <div class="liftup-with-image__container">