Show higher resolution thumbnail when hover over a table picture.

Also use thumbnails for attachment edit preview.

assets/ts_src/ajax_ui.ts

@@ -532,10 +532,12 @@ class AjaxUI {
                 //Set the correct title in the table.
                 let title = $('#part-card-header-src');
                 $('#part-card-header').html(title.html());
+                $(document).trigger('ajaxUI:dt_loaded');
 
                 //Attach event listener to update links after new page selection:
                 $('#dt').on('draw.dt', function() {
                     ajaxUI.registerLinks();
+                    $(document).trigger('ajaxUI:dt_loaded');
                 });
             });
         });

assets/ts_src/event_listeners.ts

@@ -304,6 +304,15 @@ $(document).on("ajaxUI:reload ajaxUI:start", function () {
     });
 });
 
+/**
+ * Load the higher resolution version of hover pictures.
+ */
+$(document).on("ajaxUI:reload ajaxUI:start ajaxUI:dt_loaded", function () {
+    $(".hoverpic[data-thumbnail]").mouseenter(function() {
+        $(this).attr('src', $(this).data('thumbnail'));
+    });
+});
+
 /*
  * Register the button which is used to 
  */

config/packages/liip_imagine.yaml

@@ -13,8 +13,7 @@ liip_imagine:
 
         thumbnail_md:
             quality: 75
-            filters:
             filters:
                 thumbnail:
-                        size: [300, 300]
+                    size: [250, 250]
                     mode: inset

src/DataTables/AttachmentDataTable.php

@@ -91,9 +91,10 @@ class AttachmentDataTable implements DataTableTypeInterface
                     && !$context->isExternal()
                     && $this->attachmentHelper->isFileExisting($context)) {
                     return sprintf(
-                        '<img alt="%s" src="%s" class="%s">',
+                        '<img alt="%s" src="%s" data-thumbnail="%s" class="%s">',
                         'Part image',
                         $this->attachmentURLGenerator->getThumbnailURL($context),
+                        $this->attachmentURLGenerator->getThumbnailURL($context, 'thumbnail_md'),
                         'img-fluid hoverpic'
                     );
                 }

src/DataTables/PartsDataTable.php

@@ -166,9 +166,10 @@ class PartsDataTable implements DataTableTypeInterface
                     }
 
                     return sprintf(
-                        '<img alt="%s" src="%s" class="%s">',
+                        '<img alt="%s" src="%s" data-thumbnail="%s" class="%s">',
                         'Part image',
                         $this->attachmentURLGenerator->getThumbnailURL($preview_attachment),
+                        $this->attachmentURLGenerator->getThumbnailURL($preview_attachment, 'thumbnail_md'),
                         'img-fluid hoverpic'
                     );
                 }

src/Services/Attachments/AttachmentURLGenerator.php

@@ -139,8 +139,14 @@ class AttachmentURLGenerator
             return $this->urlGenerator->generate('attachment_view', ['id' => $attachment->getID()]);
         }
 
+        //For builtin ressources it is not useful to create a thumbnail
+        //because the footprints images are small and highly optimized already.
+        if ($filter_name === 'thumbnail_md' && $attachment->isBuiltIn()) {
+            return $this->assets->getUrl($asset_path);
+        }
+
         //Otherwise we can serve the relative path via Asset component
-        return $this->filterService->getUrlOfFilteredImage($asset_path, 'thumbnail_sm');
+        return $this->filterService->getUrlOfFilteredImage($asset_path, $filter_name);
     }
 
     /**
@@ -151,6 +157,6 @@ class AttachmentURLGenerator
     public function getDownloadURL(Attachment $attachment) : string
     {
         //Redirect always to download controller, which sets the correct headers for downloading:
-        $this->urlGenerator->generate('attachment_download', ['id' => $attachment->getID()]);
+        return $this->urlGenerator->generate('attachment_download', ['id' => $attachment->getID()]);
     }
 }

src/Twig/AppExtension.php

@@ -34,6 +34,7 @@ use App\Entity\Base\DBElement;
 use App\Entity\Parts\MeasurementUnit;
 use App\Entity\PriceInformations\Currency;
 use App\Services\AmountFormatter;
+use App\Services\Attachments\AttachmentURLGenerator;
 use App\Services\EntityURLGenerator;
 use App\Services\MoneyFormatter;
 use App\Services\SIFormatter;
@@ -56,11 +57,13 @@ class AppExtension extends AbstractExtension
     protected $moneyFormatter;
     protected $siformatter;
     protected $amountFormatter;
+    protected $attachmentURLGenerator;
 
     public function __construct(EntityURLGenerator $entityURLGenerator, AdapterInterface $cache,
                                 SerializerInterface $serializer, TreeBuilder $treeBuilder,
                                 MoneyFormatter $moneyFormatter,
-                                SIFormatter $SIFormatter, AmountFormatter $amountFormatter)
+                                SIFormatter $SIFormatter, AmountFormatter $amountFormatter,
+                                AttachmentURLGenerator $attachmentURLGenerator)
     {
         $this->entityURLGenerator = $entityURLGenerator;
         $this->cache = $cache;
@@ -69,6 +72,7 @@ class AppExtension extends AbstractExtension
         $this->moneyFormatter = $moneyFormatter;
         $this->siformatter = $SIFormatter;
         $this->amountFormatter = $amountFormatter;
+        $this->attachmentURLGenerator = $attachmentURLGenerator;
     }
 
     public function getFilters()
@@ -95,7 +99,8 @@ class AppExtension extends AbstractExtension
     public function getFunctions()
     {
         return [
-            new TwigFunction('generateTreeData', [$this, 'treeData'])
+            new TwigFunction('generateTreeData', [$this, 'treeData']),
+            new TwigFunction('attachment_thumbnail', [$this->attachmentURLGenerator, 'getThumbnailURL'])
         ];
     }
 

templates/AdminPages/_attachments.html.twig

@@ -42,7 +42,7 @@
                         {% endif %}
                         {% if attach.picture %}
                             <a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax>
-                                <img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attach | entityURL('file_view') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
+                                <img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attachment_thumbnail(attach, 'thumbnail_md') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
                             </a>
                         {% else %}
                             <a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax class="link-external">{% trans %}attachment.view{% endtrans %}</a>

templates/Parts/edit/_attachments.html.twig

@@ -42,7 +42,7 @@
 
                     {% if attach.picture %}
                         <a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax>
-                            <img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attach | entityURL('file_view') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
+                            <img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attachment_thumbnail(attach, 'thumbnail_md') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
                         </a>
                     {% else %}
                         <a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax class="link-external">{% trans %}attachment.view{% endtrans %}</a>