client/scss/asset-preview/_asset-preview.scss

@@ -9,3 +9,12 @@
   background-color: #ffffff;
   width: calc(100% - 12px - 12px - 2px);
 }
+
+h6.list-title {
+  margin: 0;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow: hidden;
+  line-height: 1em;
+  max-height: 2em;
+}

client/src/components/AssetPreview/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail } }) => {
+const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail, title } }) => {
   const embedUrl = `/${claimId}/${name}.${fileExt}`;
   const showUrl = `/${claimId}/${name}`;
   return (
@@ -13,19 +13,25 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
           case 'image/png':
           case 'image/gif':
             return (
-              <img
+              <div>
-                className={'asset-preview-image'}
+                <h6 class='list-title'>{title}</h6>
-                src={embedUrl}
+                <img
-                alt={name}
+                  className={'asset-preview-image'}
-              />
+                  src={embedUrl}
+                  alt={name}
+                />
+              </div>
             );
           case 'video/mp4':
             return (
-              <img
+              <div>
-                className={'asset-preview-video'}
+                <h6 class='list-title'>{title}</h6>
-                src={thumbnail || defaultThumbnail}
+                <img
-                alt={name}
+                  className={'asset-preview-video'}
-              />
+                  src={thumbnail || defaultThumbnail}
+                  alt={name}
+                />
+              </div>
             );
           default:
             return (