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

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,11 @@ $ const srcset = getAsArray(input.srcset).join(", ") || null;
 
 $ const classNames = [input.class];
 $ if (lazyload) classNames.push("lazyload");
+$ const attrs = getAsObject(input.attrs);
 
 <if(lazyload)>
   <img
-    ...input.attrs
+    ...attrs
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     srcset=null
     data-src=src
@@ -21,7 +23,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,20 +1,35 @@
-import { buildImgixUrl } from "@parameter1/base-cms-image";
-import { get } from "@parameter1/base-cms-object-path";
+import { buildImgixUrl, getRelativeAspectRatioHeight, getRelativeAspectRatioWidth } from "@parameter1/base-cms-image";
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
 
 $ const element = "node__image";
 $ const hasImage = Boolean(input.src);
 
-$ const style = [];
-$ if (input.width) style.push(`width: ${input.width}px;`);
-$ if (input.height) style.push(`height: ${input.height}px;`);
-$ const attrs = { ...input.attrs, style };
+<!--
+1. If either width or height input is set, use them as the options.w and options.h
+2. Using options.w and options.h, determine relative w and h when not present
+3. Finally, using options, set the image width and height attrs
+-->
 
-$ const options = {
-  fit: get(input, "options.w") && get(input, "options.h") ? "crop" : undefined,
-  ...input.options,
+$ const { width, height } = input;
+$ const options = getAsObject(input, "options");
+
+$ if (width || height) {
+  options.w = width || undefined;
+  options.h = height || undefined;
 }
+$ if (input.ar) options.ar = input.ar;
+
+$ const {
+  w,
+  h,
+  ar,
+  fit,
+} = options;
+$ if (w && !h) options.h = ar ? getRelativeAspectRatioHeight(w, ar) : undefined;
+$ if (h && !w) options.w = ar ? getRelativeAspectRatioWidth(h, ar) : undefined;
+$ if (!fit) options.fit = options.w && options.h ? "crop" : undefined;
 
-<!-- @todo add modifiers -->
+$ const attrs = { ...input.attrs, width: options.w, height: options.h };
 
 <if(hasImage)>
   $ const src = buildImgixUrl(input.src, options, input.defaultOptions, input.isLogo);

package/components/node/marko.json

@@ -172,6 +172,7 @@
     "template": "./image.marko",
     "@src": "string",
     "@alt": "string",
+    "@ar": "string",
     "@width": "number",
     "@height": "number",
     "@options": "object",

package/components/node/utils/image-height.js

@@ -1,5 +1,3 @@
-module.exports = (width, ar) => {
-  const [x, y] = ar.split(':');
-  const r = x / y;
-  return Math.round(width / r);
-};
+const { getRelativeAspectRatioHeight } = require('@parameter1/base-cms-image');
+
+module.exports = getRelativeAspectRatioHeight;

package/components/node/utils/image-values.js

@@ -1,12 +1,17 @@
 const imageHeight = require('./image-height');
 
-module.exports = ({ fluid, ar, width = 320 }) => {
+module.exports = ({
+  fluid,
+  ar,
+  width = 320,
+  delimiter = ':',
+}) => {
   if (fluid === true) {
-    if (ar) return { modifier: `fluid-${ar.replace(':', 'by')}` };
+    if (ar) return { modifier: `fluid-${ar.replace(delimiter, 'by')}` };
     return { modifier: 'fluid' };
   }
   if (ar) {
-    return { width, height: imageHeight(width, ar) };
+    return { width, height: imageHeight(width, ar, delimiter) };
   }
   return { width };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parameter1/base-cms-marko-web",
-  "version": "3.7.7",
+  "version": "3.8.0",
   "description": "Core Marko+Express components for BaseCMS websites",
   "author": "Jacob Bare <jacob@parameter1.com>",
   "main": "index.js",
@@ -16,10 +16,10 @@
   "dependencies": {
     "@godaddy/terminus": "^4.9.0",
     "@parameter1/base-cms-apollo-ssr": "^3.0.0",
-    "@parameter1/base-cms-embedded-media": "^3.0.0",
+    "@parameter1/base-cms-embedded-media": "^3.8.0",
     "@parameter1/base-cms-express-apollo": "^3.0.0",
     "@parameter1/base-cms-graphql-fragment-types": "^3.0.0",
-    "@parameter1/base-cms-image": "^3.0.0",
+    "@parameter1/base-cms-image": "^3.8.0",
     "@parameter1/base-cms-inflector": "^3.0.0",
     "@parameter1/base-cms-marko-node-require": "^3.0.0",
     "@parameter1/base-cms-object-path": "^3.0.0",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edb1abe156385d8be587881f240a305376551472"
+  "gitHead": "de7ed3f6665b430872553b8f5b51e4cf51db4066"
 }