Merge branch 'feature/ISTWCMS-6012-m26lebla-correct-image-caption' into '1.0.x'

istwcms 6012 m26lebla correct image caption

See merge request !78

src/patterns/04-components/image/_image.scss

@@ -5,16 +5,31 @@
     width: 100%;
     img{
       display: block;
+      max-width: 100%;
+    }
+    &__figure{
+      display: table;
+      min-width: 15rem;
+    }
+    &__caption{
+      caption-side: bottom;
+      display: table-caption;
     }
     &__sized-image {
       &--center {
         align-self: center;
+        img {
+          margin: 0 auto;
+        }
       }
       &--left {
         align-self: flex-start;
       }
       &--right {
         align-self: flex-end;
+        img {
+          margin: 0 0 0 auto;
+        }
       }
     }
   }

src/patterns/04-components/image/_image.twig

+{% 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>