From e85b7a05a177f803ae36ba5c12835313f31177bc Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Sat, 11 Nov 2017 14:01:21 +0100
Subject: Update thumbnail integration after rebasing the branch

---
 tpl/default/configure.html   | 20 +++++++++++++
 tpl/default/linklist.html    | 15 ++++++++--
 tpl/default/page.header.html |  8 ++++--
 tpl/default/picwall.html     | 68 ++++++++++++++++++++++++++------------------
 4 files changed, 77 insertions(+), 34 deletions(-)

(limited to 'tpl/default')

diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index a63c7ad3..b91fc07e 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -242,6 +242,26 @@
           </div>
         </div>
       </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="enableThumbnails">
+              <span class="label-name">{'Enable thumbnails'|t}</span><br>
+              <span class="label-desc">
+                {'Warning: '|t}
+                {'It\'s recommended to visit the picture wall after enabling this feature.'|t}
+                {'If you have a large database, the first retrieval may take a few minutes.'|t}
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="enableThumbnails" id="enableThumbnails"
+                   {if="$thumbnails_enabled"}checked{/if}/>
+          </div>
+        </div>
+      </div>
       <div class="center">
         <input type="submit" value="{'Save'|t}" name="save">
       </div>
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 322cddd5..bf88e161 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -131,9 +131,17 @@
 
         <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
           <div class="linklist-item-title">
-            {$thumb=thumbnail($value.url)}
-            {if="$thumb!=false"}
-              <div class="linklist-item-thumbnail">{$thumb}</div>
+            {if="$thumbnails_enabled && !empty($value.thumbnail)"}
+              <div class="linklist-item-thumbnail">
+                <div class="thumbnail">
+                  <a href="{$value.real_url}">
+                  {ignore}RainTPL hack: put the 2 src on two different line to avoid path replace bug{/ignore}
+                  <img data-src="{$value.thumbnail}#" class="b-lazy"
+                    src="#"
+                    alt="thumbnail" width="{$thumbnails_width}" height="{$thumbnails_height}" />
+                  </a>
+                </div>
+              </div>
             {/if}
 
             {if="$is_logged_in"}
@@ -268,5 +276,6 @@
 </div>
 
 {include="page.footer"}
+<script src="js/thumbnails.min.js?v={$version_hash}"></script>
 </body>
 </html>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 82568d63..840e4352 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -30,9 +30,11 @@
         <li class="pure-menu-item" id="shaarli-menu-tags">
           <a href="?do=tagcloud" class="pure-menu-link">{'Tag cloud'|t}</a>
         </li>
-        <li class="pure-menu-item" id="shaarli-menu-picwall">
-          <a href="?do=picwall{$searchcrits}" class="pure-menu-link">{'Picture wall'|t}</a>
-        </li>
+        {if="$thumbnails_enabled"}
+          <li class="pure-menu-item" id="shaarli-menu-picwall">
+            <a href="?do=picwall{$searchcrits}" class="pure-menu-link">{'Picture wall'|t}</a>
+          </li>
+        {/if}
         <li class="pure-menu-item" id="shaarli-menu-daily">
           <a href="?do=daily" class="pure-menu-link">{'Daily'|t}</a>
         </li>
diff --git a/tpl/default/picwall.html b/tpl/default/picwall.html
index 2f7e03dc..1ea9c20a 100644
--- a/tpl/default/picwall.html
+++ b/tpl/default/picwall.html
@@ -5,41 +5,53 @@
 </head>
 <body>
 {include="page.header"}
+{if="!$thumbnails_enabled"}
+<div class="pure-g pure-alert pure-alert-warning page-single-alert">
+  <div class="pure-u-1 center">
+    {'Picture wall unavailable (thumbnails are disabled).'|t}
+  </div>
+</div>
+{else}
+  <div class="pure-g">
+    <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+    <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
+      {$countPics=count($linksToDisplay)}
+      <h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2>
 
-<div class="pure-g">
-  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
-  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
-    {$countPics=count($linksToDisplay)}
-    <h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2>
-
-    <div id="plugin_zone_start_picwall" class="plugin_zone">
-      {loop="$plugin_start_zone"}
-        {$value}
-      {/loop}
-    </div>
+      <div id="plugin_zone_start_picwall" class="plugin_zone">
+        {loop="$plugin_start_zone"}
+          {$value}
+        {/loop}
+      </div>
 
-    <div id="picwall_container" class="picwall-container">
-      {loop="$linksToDisplay"}
-        <div class="picwall-pictureframe">
-          {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
-          {loop="$value.picwall_plugin"}
-            {$value}
-          {/loop}
-        </div>
-      {/loop}
-      <div class="clear"></div>
-    </div>
+      <div id="picwall_container" class="picwall-container">
+        {loop="$linksToDisplay"}
+          <div class="picwall_pictureframe">
+            {ignore}RainTPL hack: put the 2 src on two different line to avoid path replace bug{/ignore}
+            <img data-src="{$value.thumbnail}#" class="b-lazy"
+                 src="#"
+                 alt="thumbnail" width="{$thumbnails_width}" height="{$thumbnails_height}" />
+            <a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
+            {loop="$value.picwall_plugin"}
+              {$value}
+            {/loop}
+          </div>
+        {/loop}
+        <div class="clear"></div>
+      </div>
 
-    <div id="plugin_zone_end_picwall" class="plugin_zone">
-      {loop="$plugin_end_zone"}
-        {$value}
-      {/loop}
+      <div id="plugin_zone_end_picwall" class="plugin_zone">
+        {loop="$plugin_end_zone"}
+          {$value}
+        {/loop}
+      </div>
     </div>
+    <div class="pure-u-lg-1-6 pure-u-1-24"></div>
   </div>
-</div>
+{/if}
 
 {include="page.footer"}
-<script src="js/picwall.min.js?v={$version_hash}"></script>
+<script src="js/thumbnails.min.js?v={$version_hash}"></script>
 </body>
 </html>
 
-- 
cgit v1.2.3