@griddo/ax 1.66.2 → 1.66.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.66.2",
+  "version": "1.66.3",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -221,5 +221,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1fd99e840b247960ef05a70b4fb3bc3ec40261fa"
+  "gitHead": "c5cf3e9fcc40893cc5a92140dd3a4c50f42a2cfe"
 }

package/src/components/Image/index.tsx

@@ -1,18 +1,26 @@
 import React from "react";
 import { GriddoImage } from "@griddo/core";
+import { createCloudinaryUrl, isCloudinary } from "./utils";
 
-const Image = (props: IProps) => {
-  const DEFAULTS = {
-    quality: 75,
-    crop: "cover",
-    loading: "lazy",
-    formats: ["webp"],
-  };
+const DAM_DEFAULTS = {
+  quality: 75,
+  crop: "cover",
+  loading: "lazy",
+  formats: ["webp"],
+};
+
+const Image = (props: IProps): React.ReactElement => {
+  const { url } = props;
 
-  return <GriddoImage {...DEFAULTS} {...props} />;
+  if (isCloudinary(url)) {
+    const cloudinaryUrl = createCloudinaryUrl({ props });
+    return <img src={cloudinaryUrl} alt="Griddo site thumbnail" />;
+  } else {
+    return <GriddoImage {...DAM_DEFAULTS} {...props} />;
+  }
 };
 
-interface IProps {
+export interface IProps {
   width: number;
   height?: number;
   url: string;

package/src/components/Image/utils.ts

@@ -0,0 +1,55 @@
+import { IProps } from "./index";
+
+// The string to split up the cloudinary url
+const CLOUDINARY_SEPARATOR = "image/upload";
+// The string to know if the url is a cloudinary url
+const CLOUDINARY_HEAD_URL = "https://res.cloudinary.com";
+
+function isCloudinary(url: string): boolean {
+  // TODO: Write a better check, probabily parsing the API props from a UrlField
+  return url.startsWith(CLOUDINARY_HEAD_URL);
+}
+
+function createCloudinaryUrl({ props, retina = true }: ICreateCloudinaryUrl): string {
+  // Split the cloudinary url to be able to insert the concat params between them
+  const [head, tail] = props.url.split(CLOUDINARY_SEPARATOR);
+
+  // Concat props in a cloudinary url format
+  // w_100 for width: 100, etc..
+  // * 2 = full retina
+  const cloudinaryParms = concatCloudinaryParams({
+    w: props.width * (retina ? 2 : 1),
+    h: props.height && props.height * (retina ? 2 : 1),
+    q: props.quality,
+    c: "fill",
+    f: "jpg",
+  });
+
+  return `${head}${cloudinaryParms}${tail}`;
+}
+
+function concatCloudinaryParams(params: ICloudinaryParams) {
+  const cloudinaryParms = Object.keys(params)
+    .map((key) => (params[key] ? `${key}_${params[key]}` : ""))
+    .join(",");
+
+  // This split cleans up the string url with extra commas (,)
+  // w_100,,q_10  -->  w_100,q_10 ->
+  return cloudinaryParms.split(",").filter(Boolean).join(",");
+}
+
+interface ICloudinaryParams {
+  w: number;
+  h?: number;
+  q?: number;
+  c: "fill" | "fit";
+  f: "webp" | "jpg";
+  [key: string]: unknown;
+}
+
+interface ICreateCloudinaryUrl {
+  props: IProps;
+  retina?: boolean;
+}
+
+export { createCloudinaryUrl, isCloudinary };