updated responsiveImage include

updated readme

README.md

@@ -278,7 +278,7 @@ The layout template has a commented out header tag with that when enabled will m
 
 This uses an include to generate a picture element with multiple sources with webp falling back to jpeg. use this example code to add an image to any page
 
-if the image is empty uses a **fallback image** from **placeholder.com**  - this can be update on line 21 of `_includes/responsiveImage.twig`
+if the image is empty uses a **fallback image** from **placeholder.com**  - this can be update on line 5 of `_includes/responsiveImage.twig`
 
 ```twig
 {{ include('_includes/responsiveImage', {
@@ -317,6 +317,10 @@ if the image is empty uses a **fallback image** from **placeholder.com**  - this
       }
     },
   ],
+  figureClass: null,
+  figureStyle: null,
+  pictureClass: null,
+  caption: null,
   attributes: {
     alt: image.altText ?? image.title ?? null,
     class: '',

templates/_blocks/hero/standardHero.twig

@@ -36,6 +36,10 @@
         }
       },
     ],
+    figureClass: null,
+    figureStyle: null,
+    pictureClass: null,
+    caption: null,
     attributes: {
       alt: image.altText ?? image.title ?? null,
       class: 'object-cover z-0 w-full h-full lg:min-h-[450px] md:min-h-[375px] min-h-[300px]',
@@ -44,34 +48,6 @@
     },
   }, with_context = false) }}
 
-  {# {% set transforms = {
-    '(max-width: 767px)': {
-      width: 767,
-      height:300,
-      mode: 'crop',
-      quality: 80,
-    },
-    '(max-width: 1199px)': {
-      width: 1200,
-      height:375,
-      mode: 'crop',
-      quality: 80,
-    },
-    '(min-width: 1200px)': {
-      width: 1920,
-      height:450,
-      mode: 'crop',
-      quality: 80,
-    },
-  } %}
-  {% set attributes = {
-      class: [
-          'object-cover z-0 w-full h-full lg:min-h-[450px] md:min-h-[375px] min-h-[300px]',
-      ],
-      loading:'lazy',
-      alt: heroImage.altText ?? heroImage.title ?? null,
-  } %}
-  {{ craft.images.pictureMedia(heroImage, transforms, null, attributes) }} #}
 
   {# hero content #}
   <div class="absolute top-0 left-0 z-10 w-full h-full py-8">

templates/_includes/news-listing-article.twig

@@ -50,6 +50,10 @@
             }
           },
         ],
+        figureClass: null,
+        figureStyle: null,
+        pictureClass: null,
+        caption:null,
         attributes: {
           alt: image.altText ?? image.title ?? null,
           class: '',

templates/_includes/responsiveImage.twig

@@ -1,55 +1,55 @@
-{#
-// set some default transforms that can be overridden in the template - this isn't done yet
-
-{%- set transforms = transforms|default([]) -%}
-{%- set srcset = transformedImages|map(image => "#{image.getUrl()} #{image.width}w") -%}
-{%- set attributes = attributes ?? {} -%}
-#}
-
-
-<picture>
-
-
-  {#
-    use the final crop in the transforms array
-    as the default
-  #}
-  {% set defaultCrop = transforms|last %}
-  {% set defaultCrop = defaultCrop.crop %}
-
-  {# set fallBack image for when the field is empty #}
-  {% set fallbackImage = 'https://placehold.co/' ~ defaultCrop.width ~ 'x' ~ defaultCrop.height ~ '/dfe4f7/bababa' %}
-
-
-  {% for transform in transforms %}
-    {# jpeg source #}
-    {% set crop = transform.crop %}
-    <source
-      media="{{ transform.mq }}"
-      srcset="{{ image.url(crop) ?? fallbackImage }}"
-      width="{{ transform.crop.width ?? null }}"
-      height="{{ transform.crop.height ?? null }}"
-      type="image/jpeg"
-    >
-    {# webp source #}
-    {% set cropWebp = transform.crop|merge({
-      'format': 'webp' }) %}
-    <source
-      media="{{ transform.mq }}"
-      srcset="{{ image.url(cropWebp) ?? fallbackImage }}"
-      width="{{ transform.crop.width ?? null }}"
-      height="{{ transform.crop.height ?? null }}"
-      type="image/webp"
-    >
-  {% endfor %}
-
-
-  <img
-    src="{{ image.url(defaultCrop) ?? fallbackImage }}"
-    alt="{{ attributes.alt }}"
-    class="{{ attributes.class }}"
-    width="{{ defaultCrop.width }}"
-    height="{{ defaultCrop.height }}"
-    loading="{{ attributes.loading }}"
-    {{ attributes.dataAttributes|raw }}/>
-</picture>
+{% set defaultCrop = transforms|last %}
+{% set defaultCrop = defaultCrop.crop %}
+
+{# set fallBack image for when the field is empty #}
+{% set fallbackImage = 'https://placehold.co/' ~ defaultCrop.width ~ 'x' ~ defaultCrop.height ~ '/dfe4f7/bababa' %}
+
+
+<figure class="{{ figureClass ?? null }}" style="{{ figureStyle ?? null }}">
+  <picture class="{{ pictureClass ?? null }}">
+    {% for transform in transforms %}
+      {# jpeg source #}
+      {% set crop = transform.crop %}
+      <source
+        media="{{ transform.mq }}"
+        srcset="{{ image.url(crop)  ?? fallbackImage }}"
+        width="{{ transform.crop.width ?? null }}"
+        height="{{ transform.crop.height ?? null }}"
+        type="image/jpeg"
+      >
+      {# webp source #}
+      {% set cropWebp = transform.crop|merge({
+        'format': 'webp' }) %}
+      <source
+        media="{{ transform.mq }}"
+        srcset="{{ image.url(cropWebp) ?? fallbackImage }}"
+        width="{{ transform.crop.width ?? null }}"
+        height="{{ transform.crop.height ?? null }}"
+        type="image/webp"
+      >
+    {% endfor %}
+
+    {#
+      use the final crop in the transforms array
+      as the default
+    #}
+    {% set defaultCrop = transforms|last %}
+    {% set defaultCrop = defaultCrop.crop %}
+    <img
+      src="{{ image.url(defaultCrop) ?? fallbackImage }}"
+      alt="{{ attributes.alt|striptags }}"
+      class="{{ attributes.class }}"
+      width="{{ defaultCrop.width ?? null }}"
+      height="{{ defaultCrop.height ?? null }}"
+      loading="{{ attributes.loading }}"
+      style="{{ attributes.style ?? null }}"
+      {{ attributes.dataAttributes|raw }}/>
+  </picture>
+
+  {# image caption #}
+  {% if caption is defined and caption != null%}
+    <figcaption class="block px-4 py-2 italic border-b text-14 text-grayBrand border-text-grayBrand-light">
+        {{ caption }}
+    </figcaption>
+  {% endif %}
+</figure>