add width and height in <img>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- add width and height in the images editable via site-editor
+
 ## [3.175.1] - 2024-09-11
 
 ### Fixed

docs/InfoCard.md

@@ -32,7 +32,9 @@ The `info-card` component groups information on a single topic. It often include
       "blockClass": "info-card-example",
       "textAlignment": "center",
       "fetchpriority": "auto",
-      "preload": true
+      "preload": true,
+      "imageWidth": "100px",
+      "imageHeight": "80px",
     }
   },
 ```
@@ -50,6 +52,8 @@ The `info-card` component groups information on a single topic. It often include
 | `htmlId`                 | `string`            | ID of the container element.                                                                                               | `null`        |
 | `imageUrl`               | `string`            | Path to the image used on desktop devices.                                                                                 | `""`          |
 | `imageActionUrl`         | `string`            | Redirect URL used when the image component is clicked.                                                                     | `""`          |
+| `imageWidth`             | `string`            | Width set in the tag `<img>`                                                                                               | `""`          |
+| `imageHeight`            | `string`            | Height set in the tag `<img>`                                                                                              | `""`          |
 | `isFullModeStyle`        | `boolean`           | Style of the Info Card component. If `true`, the image component is used as the background, and text is displayed over it. | `false`       |
 | `linkTarget`             | `LinkTargetEnum`    | Where to display the linked URL when the Info Card component is clicked.                                                   | `"_self"`     |
 | `mobileImageUrl`         | `string`            | Path to the image used on mobile devices. If empty, the desktop image is used.                                             | `null`        |

messages/context.json

@@ -138,6 +138,10 @@
   "admin/editor.notification-bar.content.description": "Text of the bar",
   "admin/editor.blockClass.title": "CSS Block Class",
   "admin/editor.blockClass.description": "Adds an extra class name to ease styling",
+  "admin/editor.imageWidth.title": "Image Width",
+  "admin/editor.imageWidth.description": "Adds width in the tag <img>",
+  "admin/editor.imageHeight.title": "Image Height",
+  "admin/editor.imageHeight.description": "Adds height in the tag <img>",
   "admin/editor.image.title": "Image",
   "admin/editor.image.description": "Show any image",
   "admin/editor.image.src.title": "Image",

react/components/InfoCard/index.js

@@ -91,6 +91,8 @@ const InfoCard = ({
   textPosition,
   textAlignment,
   imageUrl,
+  imageWidth,
+  imageHeight,
   mobileImageUrl,
   imageActionUrl,
   intl,
@@ -244,6 +246,8 @@ const InfoCard = ({
                 style={{ objectFit: 'cover' }}
                 alt={formatIOMessage({ id: callToActionText, intl })}
                 data-testid="half-image"
+                width={imageWidth}
+                height={imageHeight}
                 fetchPriority={fetchpriority}
                 {...(preload
                   ? {
@@ -272,6 +276,8 @@ MemoizedInfoCard.propTypes = {
   callToActionText: string,
   callToActionUrl: string,
   imageUrl: string,
+  imageWidth: string,
+  imageHeight: string,
   mobileImageUrl: string,
   textAlignment: oneOf(getEnumValues(textAlignmentTypes)),
   imageActionUrl: string,
@@ -294,6 +300,8 @@ MemoizedInfoCard.defaultProps = {
   callToActionUrl: '',
   imageUrl: '',
   mobileImageUrl: '',
+  imageWidth: '',
+  imageHeight: '',
   textAlignment: textAlignmentTypes.TEXT_ALIGNMENT_LEFT.value,
   textMode: textModeTypes.TEXT_MODE_HTML.value,
   linkTarget: '_self',
@@ -356,6 +364,18 @@ MemoizedInfoCard.schema = {
       type: 'string',
       isLayout: true,
     },
+    imageWidth: {
+      title: 'admin/editor.imageWidth.title',
+      description: 'admin/editor.imageWidth.description',
+      type: 'string',
+      isLayout: true,
+    },
+    imageHeight: {
+      title: 'admin/editor.imageHeight.title',
+      description: 'admin/editor.imageHeight.description',
+      type: 'string',
+      isLayout: true,
+    },
   },
 }
 

store/contentSchemas.json

@@ -119,6 +119,18 @@
           "title": "admin/editor.blockClass.title",
           "description": "admin/editor.blockClass.description",
           "type": "string"
+        },
+        "imageWidth": {
+          "title": "admin/editor.imageWidth.title",
+          "description": "admin/editor.imageWidth.description",
+          "$ref": "app:vtex.native-types#/definitions/text",
+          "default": ""
+        },
+        "imageHeight": {
+          "title": "admin/editor.imageHeight.title",
+          "description": "admin/editor.imageHeight.description",
+          "$ref": "app:vtex.native-types#/definitions/text",
+          "default": ""
         }
       }
     },