From ca04d6c766d07d57caba485e9b6b740a2323b511 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 17 Jan 2023 15:50:35 -0500
Subject: [PATCH] ISTWCMS-6012: Correct image caption alignment
---
src/patterns/04-components/image/_image.scss | 14 ++++++++++
src/patterns/04-components/image/_image.twig | 29 ++++++++++++++------
2 files changed, 34 insertions(+), 9 deletions(-)
diff --git a/src/patterns/04-components/image/_image.scss b/src/patterns/04-components/image/_image.scss
index 7c84734a..278002de 100644
--- a/src/patterns/04-components/image/_image.scss
+++ b/src/patterns/04-components/image/_image.scss
@@ -5,8 +5,22 @@
width: 100%;
img{
display: block;
+ max-width: 100%;
+ }
+ &__figure{
+ display: table;
+ min-width: 15rem;
+ }
+ &__caption{
+ caption-side: bottom;
+ display: table-caption;
}
&__sized-image {
+ &--original{
+ img {
+ margin: 0 auto;
+ }
+ }
&--center {
align-self: center;
}
diff --git a/src/patterns/04-components/image/_image.twig b/src/patterns/04-components/image/_image.twig
index e2410e60..654f4ce8 100644
--- a/src/patterns/04-components/image/_image.twig
+++ b/src/patterns/04-components/image/_image.twig
@@ -1,14 +1,25 @@
+{% set image_class = ['uw-image__figure'] %}
{% if image.type == 'full' %}
- {% set image_class = 'uw-image__full-width' %}
+ {% set image_class = image_class | merge (['uw-image__full-width']) %}
{% else %}
- {% set image_class = 'uw-image__sized-image uw-image__sized-image--' ~ image.alignment %}
+ {% if image.sized_type %}
+ {% set image_class = image_class | merge (
+ ['uw-image__sized-image',
+ 'uw-image__sized-image--' ~ image.alignment,
+ 'uw-image__sized-image--' ~ image.sized_type,
+ ]
+ )%}
+{% else %}
+ {% set image_class = image_class | merge (
+ ['uw-image__sized-image',
+ 'uw-image__sized-image--' ~ image.alignment,
+ ]
+ ) %}
+{% endif %}
{% endif %}
-
<div class="uw-image">
- <div class="uw-image__wrapper {{ image_class }}">
-
+ <figure {{ attributes.addClass(image_class) }}>
{% if image.type == 'full' %}
-
{% include '@components/responsive-image/responsive-image.twig' with {
'sources': image.image.sources,
'img_element': image.image.img_element['#uri'],
@@ -18,11 +29,11 @@
<img src="{{ image.image.url }}" width="{{ image.image.width }}" height="{{ image.image.height }}" alt="{{ image.alt }}" />
{% endif %}
{% if image.caption %}
- <div class="uw-image__caption" {% if image.image.width %} style="width:{{ image.image.width }}px;"{% endif %}>
+ <figcaption class="uw-image__caption" {% if image.image.width %} style="width:{{ image.image.width }}px;"{% endif %}>
{% include '@components/caption/caption.twig' with {
'caption': image.caption
} %}
- </div>
+ </figcaption>
{% endif %}
- </div>
+ </figure>
</div>
--
GitLab