11 files changed, 225 insertions, 67 deletions

diff --git a/tpl/default/addlink.html b/tpl/default/addlink.html
index 2f956e06..55864a02 100644
--- a/tpl/default/addlink.html
+++ b/tpl/default/addlink.html
@@ -11,7 +11,8 @@
     <h2 class="window-title">{"Shaare a new link"|t}</h2>
     <form method="GET" action="#" name="addform" class="addform">
       <div>
-        <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}" class="autofocus">
+        <label for="shaare">{'URL or leave empty to post a note'|t}</label>
+        <input type="text" name="post" id="shaare" class="autofocus">
       </div>
       <div>
         <input type="submit" value="{'Add link'|t}">
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index a63c7ad3..42e32230 100644
--- a/tpl/default/configure.html
+++ b/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>
diff --git a/tpl/default/daily.html b/tpl/default/daily.html
index 29d845d5..2c409478 100644
--- a/tpl/default/daily.html
+++ b/tpl/default/daily.html
@@ -69,9 +69,12 @@
                     </a>
                     <a href="{$link.real_url}">{$link.title}</a>
                   </div>
-                  {$thumb=thumbnail($value.url)}
-                  {if="$thumb!=false"}
-                    <div class="daily-entry-thumbnail">{$thumb}</div>
+                  {if="$thumbnails_enabled && !empty($link.thumbnail)"}
+                    <div class="daily-entry-thumbnail">
+                      <img data-src="{$link.thumbnail}#" class="b-lazy"
+                           src=""
+                           alt="thumbnail" width="{$thumbnails_width}" height="{$thumbnails_height}" />
+                    </div>
                   {/if}
                   <div class="daily-entry-description">{$link.formatedDescription}</div>
                   {if="$link.tags"}
@@ -83,7 +86,7 @@
                       {/loop}
                     </div>
                   {/if}
-                  <div class="dailyEntryFooter">
+                  <div class="dailyEntryFooter clear">
                     {loop="$link.link_plugin"}
                       {$value}
                     {/loop}
@@ -108,6 +111,7 @@
   </div>
 </div>
 {include="page.footer"}
+<script src="js/thumbnails.min.js?v={$version_hash}"></script>
 </body>
 </html>
 
diff --git a/tpl/default/dailyrss.html b/tpl/default/dailyrss.html
index b14a3859..f589b06e 100644
--- a/tpl/default/dailyrss.html
+++ b/tpl/default/dailyrss.html
@@ -8,7 +8,7 @@
                 <h3><a href="{$value.url}">{$value.title}</a></h3>
                 <small>{if="!$hide_timestamps"}{function="strftime('%c', $value.timestamp)"} - {/if}{if="$value.tags"}{$value.tags}{/if}<br>
                 {$value.url}</small><br>
-                {if="$value.thumbnail"}{$value.thumbnail}{/if}<br>
+                {if="$value.thumbnail"}<img src="{$index_url}{$value.thumbnail}#" alt="thumbnail" />{/if}<br>
                 {if="$value.description"}{$value.formatedDescription}{/if}
                 <br><br><hr>
         {/loop}
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 5ccacaaf..6c30d1bf 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -15,3 +15,23 @@
   <link type="text/css" rel="stylesheet" href="data/user.css#" />
 {/if}
 <link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle}"/>
+{if="! empty($links) && count($links) === 1"}
+  {$link=reset($links)}
+  <meta property="og:title" content="{$link.title}" />
+  <meta property="og:type" content="article" />
+  <meta property="og:url" content="{$index_url}?{$link.shorturl}" />
+  {$ogDescription=isset($link.description_src) ? $link.description_src : $link.description}
+  <meta property="og:description" content="{function="substr(strip_tags($ogDescription), 0, 300)"}" />
+  {if="$link.thumbnail"}
+    <meta property="og:image" content="{$index_url}{$link.thumbnail}" />
+  {/if}
+  {if="!$hide_timestamps || $is_logged_in"}
+    <meta property="article:published_time" content="{$link.created->format(DateTime::ATOM)}" />
+    {if="$link.updated"}
+      <meta property="article:modified_time" content="{$link.updated->format(DateTime::ATOM)}" />
+    {/if}
+  {/if}
+  {loop="link.taglist"}
+    <meta property="article:tag" content="{$value}" />
+  {/loop}
+{/if}
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 322cddd5..ed78f40a 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -125,15 +125,25 @@
       {$strPermalink=t('Permalink')}
       {$strPermalinkLc=t('permalink')}
       {$strAddTag=t('Add tag')}
+      {$strToggleSticky=t('Toggle sticky')}
+      {$strSticky=t('Sticky')}
       {ignore}End of translations{/ignore}
       {loop="links"}
         <div class="anchor" id="{$value.shorturl}"></div>
 
         <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"}
@@ -182,7 +192,7 @@
                 {if="$is_logged_in"}
                   <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
                     <span class="linklist-item-infos-controls-item ctrl-checkbox">
-                      <input type="checkbox" class="delete-checkbox" value="{$value.id}">
+                      <input type="checkbox" class="link-checkbox" value="{$value.id}">
                     </span>
                     <span class="linklist-item-infos-controls-item ctrl-edit">
                       <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
@@ -193,7 +203,23 @@
                         <i class="fa fa-trash"></i>
                       </a>
                     </span>
+                    <span class="linklist-item-infos-controls-item ctrl-pin">
+                      <a href="?do=pin&amp;id={$value.id}&amp;token={$token}"
+                         title="{$strToggleSticky}" class="pin-link {if="$value.sticky"}pinned-link{/if} pure-u-0 pure-u-lg-visible">
+                        <i class="fa fa-thumb-tack"></i>
+                      </a>
+                    </span>
                   </div>
+                {else}
+                  {if="$value.sticky"}
+                    <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
+                      <span class="linklist-item-infos-controls-item ctrl-pin">
+                        <span title="{$strSticky}" class="pin-link pinned-link pure-u-0 pure-u-lg-visible">
+                          <i class="fa fa-thumb-tack"></i>
+                        </span>
+                      </span>
+                    </div>
+                  {/if}
                 {/if}
                 <a href="?{$value.shorturl}" title="{$strPermalink}">
                   {if="!$hide_timestamps || $is_logged_in"}
@@ -268,5 +294,6 @@
 </div>
 
 {include="page.footer"}
+<script src="js/thumbnails.min.js?v={$version_hash}"></script>
 </body>
 </html>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 5309e348..fe665a84 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -16,6 +16,9 @@
         <a href="?untaggedonly" title="{'Filter untagged links'|t}"
            class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
         ><i class="fa fa-tag"></i></a>
+        <a href="#" title="{'Select all'|t}"
+           class="filter-off select-all-button"
+        ><i class="fa fa-check-square-o"></i></a>
         <a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}">
           <i class="fa fa-chevron-up"></i>
         </a>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 82568d63..4f6dd4d8 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -2,7 +2,7 @@
   <div class="pure-u-lg-0 pure-u-1">
     <div class="pure-menu">
       <a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-mobile">
-        <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
+        <img src="img/icon.png" width="16" height="16" class="head-logo" alt="" />
         {$shaarlititle}
       </a>
       <a href="#" class="menu-toggle" id="menu-toggle"><s class="bar"></s><s class="bar"></s></a>
@@ -13,7 +13,7 @@
       <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
         <li class="pure-menu-item pure-u-0 pure-u-lg-visible">
           <a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-desktop">
-            <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
+            <img src="img/icon.png" width="16" height="16" class="head-logo" alt="" />
             {$shaarlititle}
           </a>
         </li>
@@ -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>
@@ -116,7 +118,7 @@
   <div id="actions" class="subheader-form">
     <div class="pure-g">
       <div class="pure-u-1">
-        <a href="" id="actions-delete" class="button">Delete</a>
+        <a href="" id="actions-delete" class="button">{'Delete'|t}</a>
       </div>
     </div>
   </div>
@@ -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>
diff --git a/tpl/default/picwall.html b/tpl/default/picwall.html
index 2f7e03dc..4c325487 100644
--- a/tpl/default/picwall.html
+++ b/tpl/default/picwall.html
@@ -5,41 +5,61 @@
 </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}
+  {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 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>
 
diff --git a/tpl/default/thumbnails.html b/tpl/default/thumbnails.html
new file mode 100644
index 00000000..a8cf904e
--- /dev/null
+++ b/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>
diff --git a/tpl/default/tools.html b/tpl/default/tools.html
index ece66884..c9ce1eaf 100644
--- a/tpl/default/tools.html
+++ b/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}
@@ -112,47 +120,27 @@
   </div>
 </div>
 
-{if="$sslenabled"}
-  <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 page-form page-form-light">
-      <h2 class="window-title">Firefox Social API</h2>
-      <p>{'You need to browse your Shaarli over <strong>HTTPS</strong> to use this functionality.'|t}</p>
-
-      <div class="tools-item">
-        <a title="{'Click on this button to add Shaarli to the 'Share this page' button in Firefox"
-           id="ff-social-button">
-        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add to'|t} Firefox Social</span>
-        </a>
-      </div>
-    </div>
-  </div>
-{/if}
-
 <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 page-form page-form-light">
     <h2 class="window-title">{'3rd party'|t}</h2>
     <div class="tools-item">
-      <a href="https://addons.mozilla.org/fr/firefox/addon/shaarli/" title="Firefox {'Plugin'|t}">
+      <a href="https://addons.mozilla.org/fr/firefox/addon/shaarli/">
         <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Firefox {'plugin'|t}</span>
       </a>
     </div>
     <div class="tools-item">
-      <a href="https://chrome.google.com/webstore/detail/shiny-shaarli/hajdfkmbdmadjmmpkkbbcnllepomekin"
-         title="Chrome {'Plugin'|t}">
+      <a href="https://chrome.google.com/webstore/detail/shiny-shaarli/hajdfkmbdmadjmmpkkbbcnllepomekin">
         <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Chrome {'plugin'|t}</span>
       </a>
     </div>
     <div class="tools-item">
-      <a href="https://play.google.com/store/apps/details?id=com.dimtion.shaarlier&hl=fr"
-         title="Android Shaarlier">
+      <a href="https://play.google.com/store/apps/details?id=com.dimtion.shaarlier&hl=fr">
         <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Android Shaarlier</span>
       </a>
     </div>
     <div class="tools-item">
-      <a href="https://stakali.toneiv.eu/"
-         title="Android Stakali">
+      <a href="https://stakali.toneiv.eu/">
         <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Android Stakali</span>
       </a>
     </div>