diff --git a/packages/volto/news/6550.feature b/packages/volto/news/6550.feature
new file mode 100644
index 0000000000..2fb4c26212
--- /dev/null
+++ b/packages/volto/news/6550.feature
@@ -0,0 +1 @@
+Show preview image in folder contents view on title hover @iRohitSingh
\ No newline at end of file
diff --git a/packages/volto/src/components/manage/Contents/ContentsItem.jsx b/packages/volto/src/components/manage/Contents/ContentsItem.jsx
index 1db0a4da4b..d408a91564 100644
--- a/packages/volto/src/components/manage/Contents/ContentsItem.jsx
+++ b/packages/volto/src/components/manage/Contents/ContentsItem.jsx
@@ -4,7 +4,13 @@
*/
import React from 'react';
-import { Button, Table, Menu, Divider } from 'semantic-ui-react';
+import {
+ Button,
+ Table,
+ Menu,
+ Divider,
+ Popup as SemanticUiPopup,
+} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import map from 'lodash/map';
@@ -156,14 +162,41 @@ export const ContentsItemComponent = ({
to={`${item['@id']}${item.is_folderish ? '/contents' : ''}`}
>
-
{' '}
-
{item.title}
+ {item['@type'] === 'Image' ? (
+
+ {' '}
+ {item.title}
+
+ }
+ >
+
+
+
+
+
+
+ ) : (
+
+
+ {item.title}
+
+ )}
{item.ExpirationDate !== 'None' &&
new Date(item.ExpirationDate).getTime() <
@@ -382,6 +415,9 @@ const DragDropConnector = (props) => {
DragSource(
'item',
{
+ canDrag(props) {
+ return !props.dragDisabled;
+ },
beginDrag(props) {
return {
id: props.item['@id'],
diff --git a/packages/volto/theme/themes/pastanaga/extras/contents.less b/packages/volto/theme/themes/pastanaga/extras/contents.less
index 64a1383dfc..384a5f5b26 100644
--- a/packages/volto/theme/themes/pastanaga/extras/contents.less
+++ b/packages/volto/theme/themes/pastanaga/extras/contents.less
@@ -140,6 +140,17 @@
.ui.table .expire-align {
display: flex;
align-items: center;
+
+ .preview-image-container {
+ display: flex;
+ align-items: center;
+
+ .popup-image-icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 4px;
+ }
+ }
}
.ui.table .icon-margin {
@@ -153,6 +164,11 @@
color: white;
}
}
+/* Folder contents preview image on title hover */
+.popup-preview-image {
+ width: 100%;
+ height: 100%;
+}
.contents-pagination {
.ui.secondary.menu .item {