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

package/components/element/components/image.marko

@@ -9,11 +9,6 @@ $ 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

package/components/node/image.marko

@@ -1,26 +1,35 @@
-import { buildImgixUrl } from "@parameter1/base-cms-image";
-import { get } from "@parameter1/base-cms-object-path";
-import imageHeight from "./utils/image-height";
+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 (options.w) {
-  attrs.width = options.w;
-  attrs.height = options.h || (input.ar ? imageHeight(input.width, input.ar) : undefined);
+$ 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);
@@ -32,8 +41,6 @@ $ if (options.w) {
     attrs=attrs
     class=[element, input.class]
     lazyload=input.lazyload
-    width=input.width
-    height=input.height
   />
 </if>
 <else-if(input.usePlaceholder)>

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.11",
+  "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": "ab5824f00f04768be6729f66dfc62fa7b0b09c89"
+  "gitHead": "de7ed3f6665b430872553b8f5b51e4cf51db4066"
 }