feat: rename noUseAspectRatio to no_ratio, update logic

packages/components/bolt-image/image.schema.yml

@@ -40,7 +40,7 @@ properties:
     enum:
       - true
       - false
-  noUseAspectRatio:
+  no_ratio:
     type: boolean
     description: Override the default useAspectRatio behavior. Used only on the web component, where the presence of a boolean property always equates to `true`.
     default: false

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

@@ -29,7 +29,7 @@ class BoltImage extends withLitHtml() {
     noLazy: props.boolean,
     srcset: props.string,
     sizes: props.string,
-    noUseAspectRatio: props.boolean,
+    noRatio: props.boolean,
     width: props.string,
     height: props.string,
     zoom: props.boolean,
@@ -93,15 +93,15 @@ class BoltImage extends withLitHtml() {
       noLazy,
       srcset,
       sizes,
-      noUseAspectRatio,
+      noRatio,
       width,
       height,
       zoom,
     } = this.validateProps(this.props);
 
     // negate and rename variables for readability
     const lazyload = !noLazy;
-    const useAspectRatio = !noUseAspectRatio;
+    const useAspectRatio = !noRatio;
 
     const imageExt = path.extname(src);
     const imageData = this.getImageData(src);

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

@@ -22,7 +22,7 @@
 
 {% set alt = alt ? alt : null %}
 
-{% if ratio is defined and ratio == false %}
+{% if (ratio is defined and ratio == false) or no_ratio %}
   {% set useAspectRatio = false %}
 {% endif %}
 {% set useAspectRatio = useAspectRatio ?? true %}
@@ -94,7 +94,7 @@
   {% if sizes %}sizes="{{ sizes }}"{% endif %}
   {% if width %}width="{{ width }}"{% endif %}
   {% if height %}height="{{ height }}"{% endif %}
-  {% if useAspectRatio %}use-aspect-ratio{% endif %}
+  {% if not useAspectRatio %}no-ratio{% endif %}
   {% if zoom %}zoom{% endif %}
   {% if not lazyload %}no-lazy{% endif %}
   {% if placeholder_color and ext == "jpg" %} style="background-color: {{ placeholder_color }};" {% endif %}