From ec6e22613069102fb912ca9d52d3186768cf7acb Mon Sep 17 00:00:00 2001
From: Vijaykant Yadav <vjy239@gmail.com>
Date: Thu, 3 Apr 2025 14:36:07 +0530
Subject: [PATCH] fix: image alignment

---
 .../src/AppBuilder/WidgetManager/widgets/image.js   | 13 +++++++++++--
 frontend/src/Editor/Components/Image/Image.jsx      |  1 +
 frontend/src/Editor/WidgetManager/configs/image.js  | 10 ++++++++++
 .../modules/apps/services/widget-config/image.js    | 13 +++++++++++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/image.js b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
index c4bd7b6147..b962c270a5 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
@@ -143,6 +143,15 @@ export const imageConfig = {
       },
       accordian: 'Image',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
     backgroundColor: {
       type: 'color',
       displayName: 'Background',
@@ -179,11 +188,11 @@ export const imageConfig = {
     padding: {
       type: 'switch',
       displayName: 'Padding',
-      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       options: [
         { displayName: 'Default', value: 'default' },
         { displayName: 'Custom', value: 'custom' },
       ],
+      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       accordian: 'Container',
       isFxNotRequired: true,
     },
@@ -244,7 +253,6 @@ export const imageConfig = {
       loadingState: { value: '{{false}}' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      visible: { value: '{{true}}' },
     },
     events: [],
     styles: {
@@ -256,6 +264,7 @@ export const imageConfig = {
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
       customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
     },
   },
 };
diff --git a/frontend/src/Editor/Components/Image/Image.jsx b/frontend/src/Editor/Components/Image/Image.jsx
index 03b4daefda..6df6bd047e 100644
--- a/frontend/src/Editor/Components/Image/Image.jsx
+++ b/frontend/src/Editor/Components/Image/Image.jsx
@@ -177,6 +177,7 @@ export const Image = function Image({
         border: '1px solid',
         borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`,
         borderColor: borderColor ? borderColor : 'transparent',
+        objectPosition: alignment,
       }}
       height={height}
       onClick={() => fireEvent('onClick')}
diff --git a/frontend/src/Editor/WidgetManager/configs/image.js b/frontend/src/Editor/WidgetManager/configs/image.js
index 453d9b4ed6..b962c270a5 100644
--- a/frontend/src/Editor/WidgetManager/configs/image.js
+++ b/frontend/src/Editor/WidgetManager/configs/image.js
@@ -143,6 +143,15 @@ export const imageConfig = {
       },
       accordian: 'Image',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
     backgroundColor: {
       type: 'color',
       displayName: 'Background',
@@ -255,6 +264,7 @@ export const imageConfig = {
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
       customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
     },
   },
 };
diff --git a/server/src/modules/apps/services/widget-config/image.js b/server/src/modules/apps/services/widget-config/image.js
index c4bd7b6147..b962c270a5 100644
--- a/server/src/modules/apps/services/widget-config/image.js
+++ b/server/src/modules/apps/services/widget-config/image.js
@@ -143,6 +143,15 @@ export const imageConfig = {
       },
       accordian: 'Image',
     },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
     backgroundColor: {
       type: 'color',
       displayName: 'Background',
@@ -179,11 +188,11 @@ export const imageConfig = {
     padding: {
       type: 'switch',
       displayName: 'Padding',
-      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       options: [
         { displayName: 'Default', value: 'default' },
         { displayName: 'Custom', value: 'custom' },
       ],
+      validation: { schema: { type: 'string' }, defaultValue: 'default' },
       accordian: 'Container',
       isFxNotRequired: true,
     },
@@ -244,7 +253,6 @@ export const imageConfig = {
       loadingState: { value: '{{false}}' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      visible: { value: '{{true}}' },
     },
     events: [],
     styles: {
@@ -256,6 +264,7 @@ export const imageConfig = {
       boxShadow: { value: '0px 0px 0px 0px #00000090' },
       padding: { value: 'default' },
       customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
     },
   },
 };