diff --git a/frontend/src/components/dialog/image-dialog/index.css b/frontend/src/components/dialog/image-dialog/index.css
index 330bf35619f..b160242c800 100644
--- a/frontend/src/components/dialog/image-dialog/index.css
+++ b/frontend/src/components/dialog/image-dialog/index.css
@@ -24,7 +24,7 @@
   border-left: 1px solid #666;
 }
 
-.lightbox-side-panel-button-container {
+.lightbox-side-panel .side-panel-controller {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -43,7 +43,7 @@
   cursor: pointer;
 }
 
-.lightbox-side-panel-button-container .switch-button {
+.lightbox-side-panel .side-panel-controller .expand-button {
   width: 32px;
   height: 32px;
   transform: scale(0.6875);
@@ -51,7 +51,7 @@
   border: none;
 }
 
-.lightbox-side-panel-button-container:hover .switch-button {
+.lightbox-side-panel .side-panel-controller:hover .expand-button {
   opacity: 1;
 }
 
diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
index 046bf781782..0f97dcf26c8 100644
--- a/frontend/src/components/dialog/image-dialog/index.js
+++ b/frontend/src/components/dialog/image-dialog/index.js
@@ -4,13 +4,13 @@ import { gettext } from '../../../utils/constants';
 import Lightbox from '@seafile/react-image-lightbox';
 import { useMetadataAIOperations } from '../../../hooks/metadata-ai-operation';
 import { SYSTEM_FOLDERS } from '../../../constants';
-import { Dirent } from '../../../models';
-import DirentDetails from '../../dirent-detail/dirent-details';
+import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
+import { Utils } from '../../../utils/utils';
 
 import '@seafile/react-image-lightbox/style.css';
 import './index.css';
 
-const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isShared }) => {
+const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
   const downloadImage = useCallback((url) => {
@@ -23,7 +23,6 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
 
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
-  const id = imageItems[imageIndex].id;
   const name = imageItems[imageIndex].name;
   const mainImg = imageItems[imageIndex];
   const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
@@ -43,19 +42,22 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
   }
 
   const renderSidePanel = () => {
-    const dirent = new Dirent({ id, name, type: 'file' });
+    const dirent = { name, type: 'file' };
+    const path = Utils.joinPath(mainImg.parentDir, name);
 
     return (
-      <DirentDetails
+      <EmbeddedFileDetails
         repoID={repoID}
-        currentRepoInfo={repoInfo}
-        path={mainImg.parentDir}
+        repoInfo={repoInfo}
+        path={path}
         dirent={dirent}
         onClose={() => {}}
-        repoTags={[]}
-        fileTags={[]}
-        onFileTagChanged={() => {}}
-        withinPreviewer={true}
+        component={{
+          headerComponent: {
+            isShowControl: false,
+          }
+        }}
+        withinImageDialog={true}
       />
     );
   };
@@ -85,15 +87,11 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
       onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       onOCR={onOCR}
       OCRLabel={gettext('OCR')}
-      onRenderSidePanel={!isShared ? renderSidePanel : null}
+      onRenderSidePanel={!isCustomPermission ? renderSidePanel : null}
     />
   );
 };
 
-ImageDialog.defaultProps = {
-  isShared: false,
-};
-
 ImageDialog.propTypes = {
   repoID: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
@@ -105,11 +103,12 @@ ImageDialog.propTypes = {
   onDeleteImage: PropTypes.func,
   onRotateImage: PropTypes.func,
   enableRotate: PropTypes.bool,
-  isShared: PropTypes.bool,
+  isCustomPermission: PropTypes.bool,
 };
 
 ImageDialog.defaultProps = {
   enableRotate: true,
+  isCustomPermission: false,
 };
 
 export default ImageDialog;
diff --git a/frontend/src/components/dir-view-mode/dir-files.js b/frontend/src/components/dir-view-mode/dir-files.js
index 6a565ea0695..7c747de594c 100644
--- a/frontend/src/components/dir-view-mode/dir-files.js
+++ b/frontend/src/components/dir-view-mode/dir-files.js
@@ -257,7 +257,6 @@ class DirFiles extends React.Component {
         thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
       }
       return {
-        id: item.object.id,
         name,
         parentDir: node.parentNode.path,
         src,
@@ -363,8 +362,9 @@ class DirFiles extends React.Component {
   };
 
   render() {
-    const { repoID, currentRepoInfo } = this.props;
+    const { repoID, currentRepoInfo, userPerm } = this.props;
     const repoEncrypted = currentRepoInfo.encrypted;
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
     return (
       <>
         <TreeSection
@@ -460,6 +460,7 @@ class DirFiles extends React.Component {
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
               enableRotate={!repoEncrypted}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}
diff --git a/frontend/src/components/dirent-detail/detail/detail/index.js b/frontend/src/components/dirent-detail/detail/detail/index.js
index cb7763ff795..7804ceedf0a 100644
--- a/frontend/src/components/dirent-detail/detail/detail/index.js
+++ b/frontend/src/components/dirent-detail/detail/detail/index.js
@@ -6,7 +6,7 @@ import { DRAG_HANDLER_HEIGHT } from '../../../resize-bar/constants';
 
 import './index.css';
 
-const Detail = ({ children, className, withinPreviewer }) => {
+const Detail = ({ children, className }) => {
   const [width, setWidth] = useState(300);
   const [isResizing, setResizing] = useState(false);
   const resizeBarRef = useRef(null);
@@ -57,16 +57,14 @@ const Detail = ({ children, className, withinPreviewer }) => {
       style={{ width }}
     >
       {children}
-      {!withinPreviewer && (
-        <ResizeBar
-          resizeBarRef={resizeBarRef}
-          dragHandlerRef={dragHandlerRef}
-          resizeBarStyle={{ left: -1 }}
-          dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
-          onResizeMouseDown={onResizeMouseDown}
-          onResizeMouseOver={onResizeMouseOver}
-        />
-      )}
+      <ResizeBar
+        resizeBarRef={resizeBarRef}
+        dragHandlerRef={dragHandlerRef}
+        resizeBarStyle={{ left: -1 }}
+        dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
+        onResizeMouseDown={onResizeMouseDown}
+        onResizeMouseOver={onResizeMouseOver}
+      />
     </div>
   );
 
@@ -75,7 +73,6 @@ const Detail = ({ children, className, withinPreviewer }) => {
 Detail.propTypes = {
   className: PropTypes.string,
   children: PropTypes.any,
-  withinPreviewer: PropTypes.bool,
 };
 
 export default Detail;
diff --git a/frontend/src/components/dirent-detail/detail/header/index.js b/frontend/src/components/dirent-detail/detail/header/index.js
index 07913442bfb..bb360399491 100644
--- a/frontend/src/components/dirent-detail/detail/header/index.js
+++ b/frontend/src/components/dirent-detail/detail/header/index.js
@@ -5,12 +5,12 @@ import Title from './title';
 
 import './index.css';
 
-const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}, withinPreviewer = false }) => {
-  const { closeIcon } = component;
+const Header = ({ title, icon, iconSize = 32, onClose, children, component = {} }) => {
+  const { isShowControl, closeIcon } = component;
   return (
     <div className="detail-header">
       <Title title={title} icon={icon} iconSize={iconSize} />
-      {!withinPreviewer && (
+      {isShowControl && (
         <div className="detail-control-container">
           {children}
           <div className="detail-control" onClick={onClose}>
@@ -22,6 +22,12 @@ const Header = ({ title, icon, iconSize = 32, onClose, children, component = {},
   );
 };
 
+Header.defaultProps = {
+  component: {
+    isShowControl: true,
+  }
+};
+
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
@@ -29,7 +35,7 @@ Header.propTypes = {
   component: PropTypes.object,
   children: PropTypes.any,
   onClose: PropTypes.func.isRequired,
-  withinPreviewer: PropTypes.bool,
+  isShowControl: PropTypes.bool,
 };
 
 export default Header;
diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js
index e02af0e47d3..079793c8cfd 100644
--- a/frontend/src/components/dirent-detail/dirent-details/index.js
+++ b/frontend/src/components/dirent-detail/dirent-details/index.js
@@ -104,7 +104,7 @@ class DirentDetails extends React.Component {
 
   render() {
     const { dirent, direntDetail } = this.state;
-    const { repoID, fileTags, withinPreviewer } = this.props;
+    const { repoID, fileTags } = this.props;
 
     if (!dirent || !direntDetail) {
       return (
@@ -131,13 +131,13 @@ class DirentDetails extends React.Component {
         direntDetail={direntDetail}
         direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
       >
-        <Detail withinPreviewer={withinPreviewer}>
-          <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={this.props.onClose} withinPreviewer={withinPreviewer} >
+        <Detail>
+          <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={this.props.onClose} >
             <AI />
             <Settings />
           </Header>
           <Body>
-            {!withinPreviewer && this.renderImage()}
+            {this.renderImage()}
             {dirent && direntDetail && (
               <div className="detail-content">
                 {dirent.type !== 'file' ? (
@@ -162,10 +162,6 @@ class DirentDetails extends React.Component {
   }
 }
 
-DirentDetails.defaultProps = {
-  withinPreviewer: false,
-};
-
 DirentDetails.propTypes = {
   repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object,
@@ -175,7 +171,6 @@ DirentDetails.propTypes = {
   onFileTagChanged: PropTypes.func.isRequired,
   repoTags: PropTypes.array,
   fileTags: PropTypes.array,
-  withinPreviewer: PropTypes.bool,
 };
 
 export default DirentDetails;
diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
index 26dcdc6d4fd..df243dd7aa7 100644
--- a/frontend/src/components/dirent-detail/embedded-file-details/index.js
+++ b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -12,21 +12,25 @@ import { AI, Settings } from '../../../metadata/components/metadata-details';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {}, withinImageDialog }) => {
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
   useEffect(() => {
-    // init context
-    const context = new MetadataContext();
-    window.sfMetadataContext = context;
-    window.sfMetadataContext.init({ repoID, repoInfo });
     seafileAPI.getFileInfo(repoID, path).then(res => {
       setDirentDetail(res.data);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
+  }, [repoID, path]);
+
+  useEffect(() => {
+    if (withinImageDialog) return;
+    // init context
+    const context = new MetadataContext();
+    window.sfMetadataContext = context;
+    window.sfMetadataContext.init({ repoID, repoInfo });
 
     return () => {
       if (window.sfMetadataContext) {
@@ -45,6 +49,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
       dirent={dirent}
       direntDetail={direntDetail}
       direntType="file"
+      withinImageDialog={withinImageDialog}
     >
       <div
         className={classnames('cur-view-detail', className, {
@@ -69,6 +74,10 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   );
 };
 
+EmbeddedFileDetails.defaultProps = {
+  withinImageDialog: false,
+};
+
 EmbeddedFileDetails.propTypes = {
   repoID: PropTypes.string.isRequired,
   dirent: PropTypes.object,
@@ -76,6 +85,7 @@ EmbeddedFileDetails.propTypes = {
   repoInfo: PropTypes.object.isRequired,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
+  withinImageDialog: PropTypes.bool,
 };
 
 export default EmbeddedFileDetails;
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index 08a49ea68c3..71f0949eec2 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -608,7 +608,6 @@ class DirentGridView extends React.Component {
     }
 
     return {
-      id: item.id,
       name,
       thumbnail,
       src,
@@ -844,9 +843,10 @@ class DirentGridView extends React.Component {
   };
 
   render() {
-    let { direntList, selectedDirentList, path } = this.props;
+    let { direntList, selectedDirentList, path, userPerm } = this.props;
     let dirent = this.state.activeDirent ? this.state.activeDirent : '';
     let direntPath = Utils.joinPath(path, dirent.name);
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
 
     if (this.props.isDirentListLoading) {
       return (<Loading />);
@@ -1029,6 +1029,7 @@ class DirentGridView extends React.Component {
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
               enableRotate={!repoEncrypted}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index ee65aea8b8c..4b5ee312d15 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -205,7 +205,6 @@ class DirentListView extends React.Component {
     }
 
     return {
-      id: item.id,
       name,
       thumbnail,
       src,
@@ -750,10 +749,11 @@ class DirentListView extends React.Component {
   };
 
   render() {
-    const { direntList } = this.props;
+    const { direntList, userPerm } = this.props;
 
     const isDesktop = Utils.isDesktop();
     const repoEncrypted = this.props.currentRepoInfo.encrypted;
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
 
     return (
       <div
@@ -860,6 +860,7 @@ class DirentListView extends React.Component {
                 onDeleteImage={this.deleteImage}
                 onRotateImage={this.rotateImage}
                 enableRotate={!repoEncrypted}
+                isCustomPermission={isCustomPermission}
               />
             </ModalPortal>
           )}
diff --git a/frontend/src/metadata/components/metadata-details/index.js b/frontend/src/metadata/components/metadata-details/index.js
index a7ca98a91a8..6a2e967bea5 100644
--- a/frontend/src/metadata/components/metadata-details/index.js
+++ b/frontend/src/metadata/components/metadata-details/index.js
@@ -15,7 +15,7 @@ import Settings from './settings';
 import './index.css';
 
 const MetadataDetails = () => {
-  const { isLoading, canModifyRecord, record, columns, onChange, modifyColumnData, updateFileTags } = useMetadataDetails();
+  const { isLoading, canModifyRecord, record, columns, onChange, modifyColumnData, updateFileTags, isShowLocation } = useMetadataDetails();
 
   const displayColumns = useMemo(() => columns.filter(c => c.shown), [columns]);
 
@@ -31,8 +31,11 @@ const MetadataDetails = () => {
     <>
       {displayColumns.map(field => {
         const value = getCellValueByColumn(record, field);
-        if (field.key === PRIVATE_COLUMN_KEY.LOCATION && isImage && value) {
-          return (<Location key={field.key} position={value} />);
+        if (field.key === PRIVATE_COLUMN_KEY.LOCATION) {
+          if (!isShowLocation) return null;
+          if (isImage && value) {
+            return <Location key={field.key} position={value} />;
+          }
         }
 
         let canEdit = canModifyRecord && field.editable;
diff --git a/frontend/src/metadata/hooks/metadata-details.js b/frontend/src/metadata/hooks/metadata-details.js
index e86c256f28e..3e847a3eb27 100644
--- a/frontend/src/metadata/hooks/metadata-details.js
+++ b/frontend/src/metadata/hooks/metadata-details.js
@@ -15,7 +15,7 @@ import { NOT_DISPLAY_COLUMN_KEYS } from '../components/metadata-details/constant
 
 const MetadataDetailsContext = React.createContext(null);
 
-export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, direntDetail, direntType, children }) => {
+export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, direntDetail, direntType, withinImageDialog, children }) => {
   const { enableMetadata, detailsSettings, modifyDetailsSettings } = useMetadataStatus();
 
   const [isLoading, setLoading] = useState(true);
@@ -24,6 +24,7 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
 
   const canModifyRecord = useMemo(() => repoInfo.permission !== 'admin' && repoInfo.permission !== 'rw' ? false : true, [repoInfo]);
   const canModifyDetails = useMemo(() => repoInfo.is_admin, [repoInfo]);
+  const isShowLocation = useMemo(() => !withinImageDialog, [withinImageDialog]);
 
   const allColumnsRef = useRef([]);
   const direntRef = useRef(null);
@@ -204,6 +205,7 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
         isLoading,
         canModifyRecord,
         canModifyDetails,
+        isShowLocation,
         record,
         columns,
         onChange,
diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js
index 566fdca1627..b9f1aa66935 100644
--- a/frontend/src/shared-dir-view.js
+++ b/frontend/src/shared-dir-view.js
@@ -603,7 +603,7 @@ class SharedDirView extends React.Component {
             moveToPrevImage={this.moveToPrevImage}
             moveToNextImage={this.moveToNextImage}
             enableRotate={false}
-            isShared={true}
+            isCustomPermission={true}
           />
         </ModalPortal>
         }