Merge pull request #687 from ArthurHoaro/web-thumb

Use web-thumbnailer to retrieve thumbnails

tpl/default/configure.html

@@ -242,6 +242,37 @@
           </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">
+                {if="! $gd_enabled"}
+                  {'You need to enable the extension <code>php-gd</code> to use thumbnails.'|t}
+                {elseif="$thumbnails_enabled"}
+                  <a href="?do=thumbs_update">{'Synchronize thumbnails'|t}</a>
+                {/if}
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <select name="enableThumbnails" id="enableThumbnails" class="align">
+              <option value="all"    {if="$thumbnails_mode=='all'"}selected{/if}>
+                {'All'|t}
+              </option>
+              <option value="common" {if="$thumbnails_mode=='common'"}selected{/if}>
+                {'Only common media hosts'|t}
+              </option>
+              <option value="none"   {if="$thumbnails_mode=='none'"}selected{/if}>
+                {'None'|t}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
       <div class="center">
         <input type="submit" value="{'Save'|t}" name="save">
       </div>

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" style="width:{$thumbnails_width}px;height:{$thumbnails_height}px;">
+                <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>

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>
@@ -169,4 +171,18 @@
   </div>
 {/if}
 
+{if="!empty($global_warnings) && $is_logged_in"}
+  <div class="pure-g pure-alert pure-alert-warning pure-alert-closable" id="shaarli-warnings-alert">
+    <div class="pure-u-2-24"></div>
+    <div class="pure-u-20-24">
+      {loop="global_warnings"}
+        <p>{$value}</p>
+      {/loop}
+    </div>
+    <div class="pure-u-2-24">
+      <i class="fa fa-times pure-alert-close"></i>
+    </div>
+  </div>
+{/if}
+
   <div class="clear"></div>

tpl/default/picwall.html

@@ -5,41 +5,61 @@
 </head>
 <body>
 {include="page.header"}
-
-<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="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="plugin_zone_end_picwall" class="plugin_zone">
-      {loop="$plugin_end_zone"}
-        {$value}
-      {/loop}
-    </div>
+{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}
+  {if="count($linksToDisplay)===0 && $is_logged_in"}
+    <div class="pure-g pure-alert pure-alert-warning page-single-alert">
+      <div class="pure-u-1 center">
+        {'There is no cached thumbnail. Try to <a href="?do=thumbs_update">synchronize them</a>.'|t}
+      </div>
+    </div>
+  {/if}
+
+  <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="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>
+    </div>
+    <div class="pure-u-lg-1-6 pure-u-1-24"></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>
 

tpl/default/thumbnails.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<div class="pure-g thumbnails-page-container">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">{'Thumbnails update'|t}</h2>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+      <div class="pure-u-lg-1-3 pure-u-22-24">
+        <div class="thumbnail-placeholder" style="width: {$thumbnails_width}px; height: {$thumbnails_height}px;"></div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-1-12"></div>
+      <div class="pure-u-5-6">
+        <div class="thumbnail-link-title"></div>
+
+        <div class="progressbar">
+          <div></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+      <div class="pure-u-lg-1-3 pure-u-22-24">
+        <div class="progress-counter">
+          <span class="progress-current">0</span> / <span class="progress-total">{$ids|count}</span>
+        </div>
+      </div>
+    </div>
+
+    <input type="hidden" name="ids" value="{function="implode($ids, ',')"}" />
+  </div>
+</div>
+
+{include="page.footer"}
+<script src="js/thumbnails_update.min.js?v={$version_hash}"></script>
+</body>
+</html>

tpl/default/tools.html

@@ -45,6 +45,14 @@
       </a>
     </div>
 
+    {if="$thumbnails_enabled"}
+      <div class="tools-item">
+        <a href="?do=thumbs_update" title="{'Synchronize all link thumbnails'|t}">
+          <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Synchronize thumbnails'|t}</span>
+        </a>
+      </div>
+    {/if}
+
     {loop="$tools_plugin"}
       <div class="tools-item">
         {$value}

tpl/vintage/configure.html

@@ -128,6 +128,29 @@
           <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}" />
         </td>
       </tr>
+      <tr>
+        <td valign="top"><b>Enable thumbnails</b></td>
+        <td>
+          <select name="enableThumbnails" id="enableThumbnails" class="align">
+            <option value="all"    {if="$thumbnails_mode=='all'"}selected{/if}>
+            {'All'|t}
+            </option>
+            <option value="common" {if="$thumbnails_mode=='common'"}selected{/if}>
+            {'Only common media hosts'|t}
+            </option>
+            <option value="none"   {if="$thumbnails_mode=='none'"}selected{/if}>
+            {'None'|t}
+            </option>
+          </select>
+          <label for="enableThumbnails">
+            {if="! $gd_enabled"}
+              {'You need to enable the extension <code>php-gd</code> to use thumbnails.'|t}
+            {elseif="$thumbnails_enabled"}
+              <a href="?do=thumbs_update">{'Synchonize thumbnails'|t}</a>
+            {/if}
+          </label>
+        </td>
+      </tr>
 
       <tr>
         <td></td>

tpl/vintage/linklist.html

@@ -80,7 +80,16 @@
         {loop="$links"}
         <li{if="$value.class"} class="{$value.class}"{/if}>
             <a id="{$value.shorturl}"></a>
-            <div class="thumbnail">{$value.url|thumbnail}</div>
+            {if="$thumbnails_enabled && !empty($value.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>
+            {/if}
             <div class="linkcontainer">
                 {if="$is_logged_in"}
                     <div class="linkeditbuttons">
@@ -145,6 +154,7 @@
 </div>
 
     {include="page.footer"}
+<script src="js/thumbnails.min.js"></script>
 
 </body>
 </html>

tpl/vintage/picwall.html

@@ -15,7 +15,11 @@
         <div id="picwall_container">
             {loop="$linksToDisplay"}
             <div class="picwall_pictureframe">
-        	    {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
+                {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}
@@ -34,6 +38,6 @@
 
 {include="page.footer"}
 
-<script src="js/picwall.min.js"></script>
+<script src="js/thumbnails.min.js"></script>
 </body>
 </html>

tpl/vintage/thumbnails.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+{include="page.header"}
+</div>
+
+<div class="center thumbnails-update-container">
+  <div class="thumbnail-placeholder" style="width: {$thumbnails_width}px; height: {$thumbnails_height}px;"></div>
+
+  <div class="thumbnail-link-title"></div>
+
+  <div class="progressbar">
+    <div></div>
+  </div>
+
+  <div class="progress-counter">
+    <span class="progress-current">0</span> / <span class="progress-total">{$ids|count}</span>
+  </div>
+</div>
+
+<input type="hidden" name="ids" value="{function="implode($ids, ',')"}" />
+
+{include="page.footer"}
+<script src="js/thumbnails_update.min.js?v={$version_hash}"></script>
+</body>
+</html>