@parameter1/base-cms-marko-web 3.7.7 → 3.7.11

package/components/element/components/image.marko

@@ -1,4 +1,5 @@
-import { getAsArray } from "@parameter1/base-cms-object-path";
+import { getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
+import imageHeight from "../../node/utils/image-height";
 
 $ const { config } = out.global;
 $ const { src, alt } = input;
@@ -7,10 +8,16 @@ $ const srcset = getAsArray(input.srcset).join(", ") || null;
 
 $ const classNames = [input.class];
 $ if (lazyload) classNames.push("lazyload");
+$ const attrs = getAsObject(input.attrs);
+$ if (input.width && input.width > 0 && !attrs.width && !attrs.height) {
+  attrs.width = input.width;
+  const height = input.height || imageHeight(input.width, input.ar) || undefined;
+  if (height) attrs.height = height;
+};
 
 <if(lazyload)>
   <img
-    ...input.attrs
+    ...attrs
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     srcset=null
     data-src=src
@@ -21,7 +28,7 @@ $ if (lazyload) classNames.push("lazyload");
 </if>
 <else>
   <img
-    ...input.attrs
+    ...attrs
     src=src
     srcset=srcset
     class=classNames

package/components/element/marko.json

@@ -63,7 +63,10 @@
     },
     "@class": "string",
     "@attrs": "object",
-    "@link": "object"
+    "@link": "object",
+    "@width": "number",
+    "@height": "number",
+    "@ar": "string"
   },
   "<marko-web-link>": {
     "template": "./link.marko",
@@ -175,7 +178,10 @@
       },
       "@class": "string",
       "@attrs": "object",
-      "@link": "object"
+      "@link": "object",
+      "@width": "string",
+      "@height": "string",
+      "@ar": "string"
     },
     "<link>": {
       "<before>": {},
@@ -195,7 +201,10 @@
       "@srcset": {
         "type": "array",
         "required": true
-      }
+      },
+      "@width": "number",
+      "@height": "number",
+      "@ar": "string"
     }
   }
 }

package/components/element/picture.marko

@@ -28,6 +28,8 @@ $ const hasImage = Boolean(image.src);
           srcset=srcset
           data-srcset=dataSrcset
           media=s.media
+          width=s.width
+          height=s.height
         >
       </for>
       <image ...image />

package/components/node/image.marko

@@ -1,5 +1,6 @@
 import { buildImgixUrl } from "@parameter1/base-cms-image";
 import { get } from "@parameter1/base-cms-object-path";
+import imageHeight from "./utils/image-height";
 
 $ const element = "node__image";
 $ const hasImage = Boolean(input.src);
@@ -14,6 +15,11 @@ $ const options = {
   ...input.options,
 }
 
+$ if (options.w) {
+  attrs.width = options.w;
+  attrs.height = options.h || (input.ar ? imageHeight(input.width, input.ar) : undefined);
+}
+
 <!-- @todo add modifiers -->
 
 <if(hasImage)>
@@ -26,6 +32,8 @@ $ const options = {
     attrs=attrs
     class=[element, input.class]
     lazyload=input.lazyload
+    width=input.width
+    height=input.height
   />
 </if>
 <else-if(input.usePlaceholder)>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parameter1/base-cms-marko-web",
-  "version": "3.7.7",
+  "version": "3.7.11",
   "description": "Core Marko+Express components for BaseCMS websites",
   "author": "Jacob Bare <jacob@parameter1.com>",
   "main": "index.js",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edb1abe156385d8be587881f240a305376551472"
+  "gitHead": "ab5824f00f04768be6729f66dfc62fa7b0b09c89"
 }