For images show a preview picture instead of the symbol

assets/css/app.css

@@ -54,7 +54,7 @@ body {
         top: 60px;
         bottom: 0;
         left: 0;
-        z-index: 1000;
+        /* z-index: 1000;*/
         /* padding: 20px; */
         padding-left: 15px;
         /* padding-top: 15px; */
@@ -81,7 +81,7 @@ body {
         right: 0;
         left: 0;
         background-color: inherit;
-        z-index: 1000;
+        /* z-index: 1000; */
         width: inherit;
         overflow-x: hidden;
         overflow-y: auto;
@@ -327,6 +327,12 @@ btn-xs
     display: block;
     margin-left: auto;
     margin-right: auto;
+
+}
+
+.hoverpic:hover {
+    transform: scale(5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 .thumbnail-sm {

templates/helper.twig

@@ -14,7 +14,7 @@
     {% elseif ext in ['txt', 'md', 'rtf'] %} {# Text files #}
         fa-file-alt
     {% elseif ext in ['csv'] %} {# CSV files #}
-            fa-file-csv
+        fa-file-csv
     {% elseif ext in ['doc', 'docx', 'odt'] %} {# Documents #}
         fa-file-word
     {% elseif ext in ['zip', 'rar', 'bz2', 'tar', '7z', 'gz'] %}
@@ -37,7 +37,11 @@
 {% macro attachment_icon(attachment, attachment_helper, class = "fa-fw fas fa-3x", link = true) %}
     {% if not attachment_helper or attachment_helper.fileExisting(attachment) %}
         <a target="_blank"  data-no-ajax href="{% if link %}{{ attachment|entityURL('file_view') }}{% endif %}">
-         <i class="text-dark {{ class }} {{ _self.file_extension_to_fa_icon(attachment.extension) }}"></i>
+            {% if attachment.picture %}
+                <img class="hoverpic" src="{{ attachment|entityURL('file_view') }}">
+            {% else %}
+                <i class="text-dark {{ class }} {{ _self.file_extension_to_fa_icon(attachment.extension) }}"></i>
+            {% endif %}
         </a>
     {% elseif not attachment_helper.fileExisting(attachment) %}
         <i class="{{ class }} fa-exclamation-triangle text-danger"></i>