From 097493f1335c588181c209e25579f5086078dc7e Mon Sep 17 00:00:00 2001
From: Jason Mayo <jason@bymayo.co.uk>
Date: Tue, 25 Aug 2020 08:46:41 +0100
Subject: [PATCH] Added: Ratio container for picture component

---
 templates/_components/picture.twig | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/templates/_components/picture.twig b/templates/_components/picture.twig
index 054df408..7ffb8487 100644
--- a/templates/_components/picture.twig
+++ b/templates/_components/picture.twig
@@ -11,6 +11,7 @@
    @param {string} svgConvertClass
    @param {string} alt
    @param {bool} lazy
+   @param {bool} ratio
 
 #}
 
@@ -42,8 +43,9 @@
    {# All other image types #}
 
    {% set production = craft.app.config.env == 'production' ? true : false %}
-   {% set lazy = lazy ?? true %}
    {% set transform = transform ?? [] %}
+   {% set lazy = lazy ?? true %}
+   {% set ratio = ratio ?? true %}
    {% set webp = craft.imager.serverSupportsWebp() and production %}
 
    {% set pictureTransform = craft.imager.transformImage(
@@ -66,7 +68,14 @@
       webp
    %}
 
-      <picture{% if pictureClass is defined %} class="{{ pictureClass }}"{% endif %}>
+      {% if ratio is defined %}
+         <div 
+            class="relative overflow-hidden w-full h-full" 
+            style="padding-top: {{ (pictureTransform[0].height / pictureTransform[0].width) * 100 }}%;"
+         >
+      {% endif %}
+
+      <picture{% if pictureClass is defined or ratio is defined %} class="{{ ratio is defined ? 'absolute top-0 left-0 w-full h-full' }} {{ pictureClass is defined ? pictureClass }}"{% endif %}>
          {% if lazy %}
             {% if webp %}
                <source
@@ -101,6 +110,10 @@
          {% endif %}
       </picture>
 
+      {% if ratio is defined %}
+         </div>
+      {% endif %}
+
    {% endif %}
 
 {% endif %}