Asynchronous retrieval of bookmark's thumbnails

This feature is based general.enable_async_metadata setting and works with existing metadata.js file.
The script is compatible with any template:
   - the thumbnail div bloc must have  attribute
   - the bookmark bloc must have  attribute with the bookmark ID as value

Fixes #1564

1 files changed, 8 insertions, 3 deletions

diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index beab0eac..48cd9aad 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -135,8 +135,12 @@
 
         <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
           <div class="linklist-item-title">
-            {if="$thumbnails_enabled && !empty($value.thumbnail)"}
-              <div class="linklist-item-thumbnail" style="width:{$thumbnails_width}px;height:{$thumbnails_height}px;">
+            {if="$thumbnails_enabled && $value.thumbnail !== false"}
+              <div
+                class="linklist-item-thumbnail {if="$value.thumbnail === null"}hidden{/if}"
+                style="width:{$thumbnails_width}px;height:{$thumbnails_height}px;"
+                {if="$value.thumbnail === null"}data-async-thumbnail="1"{/if}
+              >
                 <div class="thumbnail">
                   {ignore}RainTPL hack: put the 2 src on two different line to avoid path replace bug{/ignore}
                   <a href="{$value.real_url}" aria-hidden="true" tabindex="-1">
@@ -158,7 +162,7 @@
             </div>
 
             <h2>
-              <a href="{$value.real_url}">
+              <a href="{$value.real_url}" class="linklist-real-url">
                 {if="strpos($value.url, $value.shorturl) === false"}
                   <i class="fa fa-external-link" aria-hidden="true"></i>
                 {else}
@@ -308,5 +312,6 @@
 
 {include="page.footer"}
 <script src="{$asset_path}/js/thumbnails.min.js?v={$version_hash}#"></script>
+{if="$is_logged_in && $async_metadata"}<script src="{$asset_path}/js/metadata.min.js?v={$version_hash}#"></script>{/if}
 </body>
 </html>