@kiva/kv-components 3.83.1 → 3.83.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.83.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.1...@kiva/kv-components@3.83.2) (2024-06-25)
+
+
+### Bug Fixes
+
+* max dimensions on kvContentfulImg ([#419](https://github.com/kiva/kv-ui-elements/issues/419)) ([4496979](https://github.com/kiva/kv-ui-elements/commit/4496979544fa7d9d941111bff234aae58aa5ca16))
+
+
+
+
+
 ## [3.83.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.0...@kiva/kv-components@3.83.1) (2024-06-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.83.1",
+  "version": "3.83.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "fd9613c908f4eeaddb1a8395e864c5c0448c53af"
+  "gitHead": "b24be12d68662bf99ee0d17a1ed6f4b788ae0ce5"
 }

package/vue/KvContentfulImg.vue

@@ -213,9 +213,22 @@ export default {
 
 		const buildUrl = (image = null, multiplier = 1) => {
 			let src = image && image.url ? `${image.url}?` : `${contentfulSrc.value}?`;
-			const imgWidth = image ? image.width : width.value;
-			const imgHeight = image ? image.height : height.value;
-
+			let imgWidth = image ? image.width : width.value;
+			let imgHeight = image ? image.height : height.value;
+			// The max contentful image size is 4000px so we have to
+			// impose a limit of 2000px here for both height and width
+			// so when we request the retina x2 image we don't go over the 4000px limit
+			let newMultiplier;
+			if (imgWidth >= 2000) {
+				newMultiplier = imgWidth / 1999;
+				imgWidth = 1999;
+				imgHeight = Math.round(imgHeight / newMultiplier);
+			}
+			if (imgHeight >= 2000) {
+				newMultiplier = imgHeight / 1999;
+				imgHeight = 1999;
+				imgWidth = Math.round(imgWidth / newMultiplier);
+			}
 			if (imgWidth) {
 				src += `w=${imgWidth * multiplier}`;
 			}

package/vue/stories/KvContentfulImg.stories.js

@@ -4,7 +4,7 @@ export default {
 	title: 'KvContentfulImg',
 	component: KvContentfulImg,
 	args: {
-		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/2TWV32iioxapwjn26ZpigZ/84ac39a1396d6be9eea472cf8791faa7/Cynthia.png',
+		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/35lkLRfbLxzFPlDVgA4aKI/c435630d811f9ad35ddfc88eaea22b08/Blog-import-1082518_us_shawn_16.jpg',
 		fallbackFormat: 'jpg',
 		width: 200,
 		height: null,
@@ -77,6 +77,7 @@ export const ResponsiveImageSet = (args, { argTypes }) => ({
 		/>
 	`,
 });
+
 ResponsiveImageSet.args = {
 	fit: 'fill',
 	focus: 'face',
@@ -168,3 +169,28 @@ export const WithCaption = (args, { argTypes }) => ({
 		/>
 	`,
 });
+
+export const GiantImage = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvContentfulImg,
+	},
+	template: `
+		<kv-contentful-img
+			:contentful-src="contentfulSrc"
+			:fallback-format="fallbackFormat"
+			:width="width"
+			:height="height"
+			alt="Descriptive alt text"
+			:loading="loading"
+			:fit="fit"
+			:focus="focus"
+		/>
+	`,
+});
+
+GiantImage.args = {
+	contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7dVINOyAxRaXM8p6aq7p5s/9213f63ff10dec57c5f740c056afe8a8/gradient-hero-bg__1_.jpg',
+	width: 4000,
+	height: 2000,
+};