add width and height in <img>

CHANGELOG.md

@@ -7,6 +7,14 @@ 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
+
+### Fixed
+
+- Arabic, Bulgarian, German, English, Spanish, French, Indonesian, Italian, Japanese, Korean, Dutch, Norwegian, Portuguese, Romanian and Thai translations
+
 ## [3.172.2] - 2024-03-06
 
 ### Fixed

messages/context.json

@@ -136,6 +136,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

@@ -89,6 +89,8 @@ const InfoCard = ({
   textPosition,
   textAlignment,
   imageUrl,
+  imageWidth,
+  imageHeight,
   mobileImageUrl,
   imageActionUrl,
   intl,
@@ -226,6 +228,8 @@ const InfoCard = ({
                 style={{ objectFit: 'cover' }}
                 alt={formatIOMessage({ id: callToActionText, intl })}
                 data-testid="half-image"
+                width={imageWidth}
+                height={imageHeight}
               />
             </LinkWrapper>
           </div>
@@ -247,6 +251,8 @@ MemoizedInfoCard.propTypes = {
   callToActionText: string,
   callToActionUrl: string,
   imageUrl: string,
+  imageWidth: string,
+  imageHeight: string,
   mobileImageUrl: string,
   textAlignment: oneOf(getEnumValues(textAlignmentTypes)),
   imageActionUrl: string,
@@ -268,6 +274,8 @@ MemoizedInfoCard.defaultProps = {
   callToActionUrl: '',
   imageUrl: '',
   mobileImageUrl: '',
+  imageWidth: '',
+  imageHeight: '',
   textAlignment: textAlignmentTypes.TEXT_ALIGNMENT_LEFT.value,
   textMode: textModeTypes.TEXT_MODE_HTML.value,
   linkTarget: '_self',
@@ -328,6 +336,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

@@ -113,6 +113,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.info-card.imageHeight.description",
+          "$ref": "app:vtex.native-types#/definitions/text",
+          "default": ""
         }
       }
     },