feat: add possibility to fetch fallback image size

Author: eugeneshulga869

apps/csk-marketing-site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-marketing-site",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",

apps/csk-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-storybook",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "description": "CSK vNext Storybook is an interactive Storybook build showcasing components from the CSK vNext component starter kit. It provides detailed documentation, live previews, and testing capabilities for easy integration into your projects.",
   "main": "index.js",
   "scripts": {

apps/csk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/component-starter-kit",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "csk-packages",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "private": true,
   "scripts": {
     "build": "turbo build",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-cli",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "description": "Command-line interface (CLI) tool designed to streamline the development workflow within Uniform projects. It provides commands for pulling additional data and generating components based on Canvas data",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

packages/csk-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-components",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "description": "Components Starter Kit that provides a set of basic components for building websites within a Uniform project",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -70,16 +70,18 @@
     "next-themes": "^0.4.4",
     "ora": "^8.1.1",
     "prettier": "3.5.2",
+    "probe-image-size": "^7.2.3",
     "react-player": "^2.16.0",
     "react-responsive-masonry": "^2.7.0",
     "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
-    "@uniformdev/assets": "^20.20.3",
-    "@uniformdev/canvas": "^20.20.3",
-    "@uniformdev/canvas-next-rsc": "^20.20.3",
+    "@types/probe-image-size": "^7.2.5",
+    "@uniformdev/assets": "^20.20.0",
+    "@uniformdev/canvas": "^20.20.0",
+    "@uniformdev/canvas-next-rsc": "^20.20.0",
     "next": "^15.3.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

packages/csk-components/package.json

@@ -1,11 +1,12 @@
 import { FC } from 'react';
+import probe from 'probe-image-size';
 import { imageFrom } from '@uniformdev/assets';
 import BaseImage from '@/components/ui/Image';
 import { resolveAsset } from '@/utils/assets';
 import { ImageProps } from '.';
 import { ImagePlaceholder } from './placeholder';
 
-export const Image: FC<ImageProps> = ({
+export const Image: FC<ImageProps> = async ({
   image,
   objectFit,
   width,
@@ -28,6 +29,14 @@ export const Image: FC<ImageProps> = ({
 
   const { focalPoint, title = '' } = resolvedImage;
 
+  const imageWidth = width || resolvedImage.width;
+  const imageHeight = height || resolvedImage.height;
+
+  const fallbackSize =
+    (!imageWidth || !imageHeight) && resolvedImage.url
+      ? await probe(resolvedImage.url).catch(() => ({ width: undefined, height: undefined }))
+      : { width: undefined, height: undefined };
+
   const imageUrl = imageFrom(resolvedImage?.url)
     .transform({
       width: width,
@@ -39,7 +48,10 @@ export const Image: FC<ImageProps> = ({
 
   const variantBasedProps = isBackground
     ? { fill: true }
-    : { width: width || resolvedImage.width, height: height || resolvedImage.height };
+    : {
+        width: imageWidth || fallbackSize.width,
+        height: imageHeight || fallbackSize.height,
+      };
 
   return (
     <BaseImage

packages/csk-components/src/components/canvas/Image/image.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-recipes",
-  "version": "6.0.86",
+  "version": "6.0.87",
   "description": "command-line interface (CLI) and utility functions to help you work with recipes in a CSK project. It simplifies project initialization by allowing you to choose templates and include specific recipes",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {