feat: fully support "ratio" prop in image Twig template

Author: Daniel Morse

packages/components/bolt-image/src/image.twig

@@ -28,15 +28,20 @@
 
 {% set is_jpg = src|split('.')|last == "jpg" %}
 
-{# Currently 'ratio' can be string or boolean, boolean is DEPRECATED #}
-{% if ratio is iterable %}
-  {% set ratio_string = ratio %}
-{% elseif ratio is sameas(false) or ratio is sameas(true) %}
+{# 'ratio' should be a string, but boolean was previously supported. Boolean is now DEPRECATED. #}
+{% if ratio is sameas(false) or ratio is sameas(true) %}
   {% set ratio_bool = ratio %}
+{% else %}
+  {% set ratio_string = ratio %}
+  {% set ratio_split = ratio_string|split("/") %}
+  {% if ratio_split|length == 2 %}
+    {% set width = ratio_split[0] %}
+    {% set height = ratio_split[1] %}
+  {% endif %}
 {% endif %}
 
-{% set useAspectRatio = useAspectRatio or ratio_bool ?? true %}
-{% set can_use_ratio = width > 0 and height > 0 and useAspectRatio is sameas(true) and not cover %}
+{% set use_ratio = useAspectRatio or ratio_bool ?? true %}
+{% set can_use_ratio = use_ratio is sameas(true) and ratio_string != "none" and width > 0 and height > 0 and not cover %}
 {# Only JPGs allowed, PNGs can have transparency and may not look right layered over placeholder #}
 {% set can_use_placeholder = can_use_ratio or cover %}
 
@@ -109,7 +114,7 @@
   {% if srcset %}srcset="{{ srcset }}"{% endif %}
   {% if alt %}alt="{{ alt }}"{% endif %}
   {% if sizes %}sizes="{{ sizes }}"{% endif %}
-  {% if ratio_string %}ratio="{{ ratio_string }}"{% elseif not useAspectRatio %}ratio="none"{% elseif can_use_ratio %}ratio="{{ width }}/{{ height }}"{% endif %}
+  {% if ratio_string %}ratio="{{ ratio_string }}"{% elseif not use_ratio %}ratio="none"{% elseif can_use_ratio %}ratio="{{ width }}/{{ height }}"{% endif %}
   {% if placeholder_color %}placeholder-color="{{ placeholder_color }}"{% endif %}
   {% if placeholder_image %}placeholder-image="{{ placeholder_image }}"{% endif %}
   {% if zoom %}zoom{% endif %}