gatsby-core-theme 40.0.8 → 40.0.9

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [40.0.9](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.8...v40.0.9) (2024-10-22)
+
+
+### Bug Fixes
+
+* content images ([83fa09e](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/83fa09e6f23a53d4b8efe1d52f3c073ea4735490))
+* images ([ff0c59e](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/ff0c59e88cbdb26c9cc1cde35b7a588c7520a814))
+
+
+* Merge branch 'tm-4346-content-images' into 'master' ([dadb989](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/dadb989a7181c2e368c732dee2801ac9314bde8b))
+
 ## [40.0.8](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.7...v40.0.8) (2024-10-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "40.0.8",
+  "version": "40.0.9",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/helpers/processImageNode.js

@@ -26,20 +26,25 @@ const processImageNode = (node, moduleWidth = 960, loading) => {
     stylesClass = 'alignRight';
   }
 
-  const imgWidthData = node?.attribs?.width?.replace('px', '')
-  || node?.attribs?.['data-width']?.replace('px', '')
-  || getValueFromStyle(node?.attribs?.style, 'width')
-  || '';
-
-const imgWidth = parseFloat(imgWidthData) > moduleWidth ? moduleWidth : imgWidthData;
-
-const imgHeightData = node?.attribs?.height 
-  || node?.attribs?.['data-height'] 
-  || getValueFromStyle(node?.attribs?.style, 'height') 
-  || '';
-
-const imgHeight = imgHeightData === 'auto' ? '298' : imgHeightData.replace('px', '')
-
+  const imgWidthData = node?.attribs?.width
+    || node?.attribs?.['data-width']
+    || getValueFromStyle(node?.attribs?.style, 'width')
+    || '';
+
+  const imgHeightData = node?.attribs?.height
+    || node?.attribs?.['data-height']
+    || getValueFromStyle(node?.attribs?.style, 'height')
+    || '';
+
+  // Parse the width and height as numbers
+  const originalWidth = parseFloat(imgWidthData);
+  const originalHeight = (imgHeightData === 'auto') ? 298 : parseFloat(imgHeightData);
+
+  // If width is greater than moduleWidth, adjust the width to moduleWidth and scale height accordingly
+  const imgWidth = originalWidth > moduleWidth ? moduleWidth : originalWidth || '';
+  const imgHeight = originalWidth > moduleWidth
+    ? Math.round((originalHeight / originalWidth) * moduleWidth)
+    : originalHeight || '';
 
   const lazyProps = {
     src: parseContentImageUrl(node.attribs.src, imgWidth, imgHeight),

package/src/helpers/replaceMedia.test.js

@@ -23,8 +23,8 @@ describe('replaceMedia function', () => {
     expect(transformedNode.props.src).toBe(
       'https://cdn.images.com/fit-in/300x200/image.jpg'
     )
-    expect(transformedNode.props.width).toBe('300')
-    expect(transformedNode.props.height).toBe('200')
+    expect(transformedNode.props.width).toBe(300)
+    expect(transformedNode.props.height).toBe(200)
     expect(transformedNode.props.alt).toBe('Alt text')
     expect(transformedNode.props.className).toBe('alignCenter')
   })
@@ -116,7 +116,7 @@ describe('replaceMedia function', () => {
       'https://cdn.images.com/fit-in/100x50/1718708348/springbok-casino-bonus.jpg'
     )
     expect(imageNode.props.alt).toBe('Alt text')
-    expect(imageNode.props.width).toBe('100')
-    expect(imageNode.props.height).toBe('50')
+    expect(imageNode.props.width).toBe(100)
+    expect(imageNode.props.height).toBe(50)
   })
 })