feat: pass placeholder values, ratio data via web component props

Author: Daniel Morse

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

@@ -26,6 +26,14 @@ properties:
     enum:
       - true
       - false
+  placeholder_color:
+    type: string
+    description: A valid CSS background color property shown while image loads.
+    default: hsl(233, 33%, 97%)
+  placeholder_image:
+    type: string
+    description: Image path or image data shown while image loads.
+    default: data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
   srcset:
     type: string
     description: A comma seperated string of image urls and image widths, used for optimizing image loading performance.
@@ -40,13 +48,10 @@ properties:
     enum:
       - true
       - false
-  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
-    enum:
-      - true
-      - false
+  ratio:
+    type: string
+    description: Set the aspect ratio for the image via colon-separated width and height values, e.g. 4:3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio. Used only on the web component.
+    default: auto
   width:
     oneOf:
       - type: number

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

@@ -29,9 +29,11 @@ class BoltImage extends withLitHtml() {
     noLazy: props.boolean,
     srcset: props.string,
     sizes: props.string,
-    noRatio: props.boolean,
+    ratio: props.string,
     width: props.string,
     height: props.string,
+    placeholderColor: props.string,
+    placeholderImage: props.string,
     zoom: props.boolean,
   };
 
@@ -56,18 +58,6 @@ class BoltImage extends withLitHtml() {
     return modifiedSchema;
   }
 
-  getImageData(imagePath) {
-    // TODO: Get real image data
-    return {
-      height: 480,
-      width: 640,
-      base64:
-        'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
-      color: 'hsl(233, 33%, 97%)',
-      isAbsolute: false,
-    };
-  }
-
   lazyloadImage(image) {
     // console.log('@lazyloadImage');
     if (!this.isLoaded) {
@@ -93,23 +83,43 @@ class BoltImage extends withLitHtml() {
       noLazy,
       srcset,
       sizes,
-      noRatio,
+      ratio,
       width,
       height,
+      placeholderColor,
+      placeholderImage,
       zoom,
     } = this.validateProps(this.props);
 
     // negate and rename variables for readability
     const lazyload = !noLazy;
-    const useAspectRatio = !noRatio;
+
+    // use ratio by default, still depends upon width and height being set
+    let useRatio = true;
+    let ratioW;
+    let ratioH;
+
+    if (ratio) {
+      switch (ratio) {
+        case 'none':
+          useRatio = false;
+          break;
+        case 'auto':
+          useRatio = true;
+          break;
+        default:
+          useRatio = true;
+          if (ratio.indexOf(':') > -1) {
+            const ratioArr = ratio.split(':');
+            ratioW = ratioArr[0];
+            ratioH = ratioArr[1];
+          }
+      }
+    }
+
+    const canUseRatio = ratioW > 0 && ratioH > 0 && useRatio;
 
     const imageExt = path.extname(src);
-    const imageData = this.getImageData(src);
-    const placeholderColor = imageData.color;
-    const placeholderSrc = imageData.base64;
-    const imageWidth = width || imageData.width;
-    const imageHeight = height || imageData.height;
-    const canUseAspectRatio = imageWidth && imageHeight && useAspectRatio;
 
     const classes = cx('c-bolt-image__image', {
       'c-bolt-image__lazyload': lazyload,
@@ -123,7 +133,7 @@ class BoltImage extends withLitHtml() {
         return html`
           <img
             class="${classes}"
-            src="${lazyload ? placeholderSrc : src}"
+            src="${lazyload ? placeholderImage : src}"
             alt="${ifDefined(alt ? alt : undefined)}"
             srcset="${ifDefined(
               !lazyload || this.isLoaded ? srcset || src : undefined,
@@ -138,11 +148,11 @@ class BoltImage extends withLitHtml() {
     };
 
     const placeholderImageElement = () => {
-      if (useAspectRatio && imageExt === '.jpg') {
+      if (canUseRatio && imageExt === '.jpg') {
         return html`
           <img
             class="${cx('c-bolt-image__image-placeholder')}"
-            src="${placeholderSrc}"
+            src="${placeholderImage}"
             alt="${ifDefined(alt ? alt : undefined)}"
           />
         `;
@@ -173,16 +183,15 @@ class BoltImage extends withLitHtml() {
     const ratioTemplate = children => {
       return html`
         <bolt-ratio
-          attributes=""
-          aspect-ratio-width="${imageWidth * 1}"
-          aspect-ratio-height="${imageHeight * 1}"
+          aspect-ratio-width="${ratioW * 1}"
+          aspect-ratio-height="${ratioH * 1}"
         >
           ${children}
         </bolt-ratio>
       `;
     };
 
-    if (placeholderColor && canUseAspectRatio && imageExt === '.jpg') {
+    if (canUseRatio && imageExt === '.jpg' && placeholderColor) {
       this.style.backgroundColor = placeholderColor;
     }
 

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

@@ -8,24 +8,26 @@
 {% set image_data_twig = getImageData(src)  %} {# Data from processing image file #}
 
 {% set ext = src|split('.')|last %}
+{% set display = display in display_options ? display : schema.properties.display.default %}
 {% set height = height|default(image_data_twig.height) %}
 {% set width = width|default(image_data_twig.width) %}
 {% set lazyload = lazyload ?? true %}
-{% set placeholder_dummy_src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" %}
-{% set placeholder_color = image_data_twig.color|default('hsl(233, 33%, 97%)') %}
-{% set placeholder_image = image_data_twig.base64|default(placeholder_dummy_src) %}
-{% set sizes = sizes | default("auto") %}
+{% set sizes = sizes|default("auto") %}
 {% set srcset = srcset|default(src) %}
+
 {% if image_data_bolt.srcset %}
   {% set srcset = image_data_bolt.srcset %}
 {% endif %}
 
+{# Set alt to null if missing, prevents empty alt tags #}
 {% set alt = alt ? alt : null %}
 
-{% if (ratio is defined and ratio == false) or no_ratio %}
-  {% set useAspectRatio = false %}
-{% endif %}
+{# Temp: prefix "ph" to preserve original value for web component, better pattern in the works #}
+{% set ph_color = placeholder_color|default(image_data_twig.color|default(schema.properties.placeholder_color.default)) %}
+{% set ph_image = placeholder_image|default(image_data_twig.base64|default(schema.properties.placeholder_image.default)) %}
+
 {% set useAspectRatio = useAspectRatio ?? true %}
+{% set can_use_ratio = width > 0 and height > 0 and useAspectRatio is sameas(true) %}
 
 {#--------------------#}
 {# STOP!!!!!!!!!#}
@@ -66,7 +68,6 @@
   .setAttribute(srcset ? "srcset" : "", srcset ? srcset : null)
 %}
 
-
 {% set image_tag %}
   <img {{ image_attributes }} />
 
@@ -82,7 +83,7 @@
   .removeAttribute("src")
   .removeAttribute("data-sizes")
   .removeAttribute("srcset")
-  .setAttribute("src", placeholder_image)
+  .setAttribute("src", ph_image)
   }} />
 {% endset %}
 
@@ -94,13 +95,15 @@
   {% if sizes %}sizes="{{ sizes }}"{% endif %}
   {% if width %}width="{{ width }}"{% endif %}
   {% if height %}height="{{ height }}"{% endif %}
-  {% if not useAspectRatio %}no-ratio{% endif %}
+  {% if not useAspectRatio %}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 %}
   {% if not lazyload %}no-lazy{% endif %}
-  {% if placeholder_color and ext == "jpg" %} style="background-color: {{ placeholder_color }};" {% endif %}
+  {% if can_use_ratio and ext == "jpg" %} style="background-color: {{ ph_color }};" {% endif %}
   >
   {% block image_content %}
-    {% if width > 0 and height > 0 and useAspectRatio == true %}
+    {% if can_use_ratio %}
       {% include "@bolt-components-ratio/ratio.twig" with {
         attributes: attributes,
         aspectRatioHeight: height * 1,
@@ -111,7 +114,6 @@
         ] | join("")
       } only %}
     {% else %}
-      {{ ext == "jpg" ? image_placeholder : "" }}
       {{ image_tag }}
     {% endif %}
   {% endblock %}