@griddo/cx 1.75.33 → 1.75.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/cx",
   "description": "Griddo SSG based on Gatsby",
-  "version": "1.75.33",
+  "version": "1.75.34",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -65,7 +65,7 @@
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
-    "@griddo/eslint-config-back": "^1.75.33",
+    "@griddo/eslint-config-back": "^1.75.34",
     "eslint": "^7.5.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8fd3e9c38978faee9d3860c4f2613423bc59e117"
+  "gitHead": "cadffc9497096901e309b5b897f168759e09df92"
 }

package/src/components/template.js

@@ -11,7 +11,7 @@ import parse from 'html-react-parser';
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { composeAnalytics } from '../utils/dataLayer';
-import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
+import { formatImage, cleanCommaSeparated } from '../utils/helpers';
 
 //
 // Gatsby Head API, almost deprecate Helmet.
@@ -72,11 +72,11 @@ export const Head = ({ pageContext }) => {
   } = fixedAnalyticsCode;
 
   // Resize favicon
-  // If favicon is a Griddo DAM url, returns a griddo image url with params,
-  // else (Cloudinary or unkonwn) returns the original favicon url.
-  const faviconResized = addGriddoDamParams(
+  const faviconResized = formatImage(
     siteMetadata?.favicon,
-    'f/png/w/32/h/32'
+    32,
+    32,
+    'png'
   );
 
   // Validate options

package/src/utils/helpers.js

@@ -24,9 +24,23 @@ const log = (state, message, data) => {
     );
 };
 
+// Format image
+const formatImage = (image, width, height, format = 'jpg') => {
+  const url = image?.url || image;
+  if (!url) return null;
+  return url.split('/')[2].includes('cloudinary.com')
+  ? addCloudinaryParams(url, `c_fill,w_${width},h_${height}`)
+  : addGriddoDamParams(url, `f/${format}/c/fill/w/${width}/h/${height}`);
+};
+
+// Format Griddo DAM image
+const addGriddoDamParams = (image, params) => {
+  const splittedUrl = image.split('/');
+  return `${splittedUrl.slice(0,-1).join('/')}/${params}/${splittedUrl.slice(-1)[0]}`;
+};
+
 // Take a cloudinary url and add query params
 const addCloudinaryParams = (socialImage, params) => {
-  if (!socialImage) return null;
   const plainUrl = socialImage.url.replace('https://', '');
   const head = plainUrl.split('/').slice(0, 4).join('/');
   const fullId = plainUrl.replace(head, '');
@@ -82,8 +96,8 @@ const getOpenGraph = ({
   type: 'website',
   title: socialTitle || title,
   description: socialDescription,
-  image: addCloudinaryParams(socialImage, 'c_fill,w_1024,h_512'),
-  twitterImage: addCloudinaryParams(socialImage, 'c_fill,w_1024,h_512'),
+  image: formatImage(socialImage, 1280,768),
+  twitterImage: formatImage(socialImage, 1280, 768),
 });
 
 const getMultiPageElements = distributorTemplate =>
@@ -117,20 +131,9 @@ const cleanCommaSeparated = x =>
     .filter(item => !!item)
     .join(',');
 
-const isGriddoDamImage = url => !url?.includes('/res.cloudinary.com');
-
-const addGriddoDamParams = (url, params) => {
-  if (!url) return url;
-  if (!isGriddoDamImage(url)) return url;
-  // eslint-disable-next-line no-unused-vars
-  const [_, id] = url.split('//')[1].split('/');
-  const head = url.split(id)[0];
-  return `${head}${params}/${id}`;
-};
-
 exports.getOpenGraph = getOpenGraph;
 exports.getPageMetaData = getPageMetaData;
 exports.log = log;
 exports.getMultiPageElements = getMultiPageElements;
 exports.cleanCommaSeparated = cleanCommaSeparated;
-exports.addGriddoDamParams = addGriddoDamParams;
+exports.formatImage = formatImage;