From b7fee65e8fccc08b3741bc63725f58aae73eb456 Mon Sep 17 00:00:00 2001
From: nikrou <nikrou@piwigo.org>
Date: Fri, 19 Mar 2010 10:17:14 +0000
Subject: Feature 940 : improve ordering by rank by clip thumbnail to a square

git-svn-id: http://piwigo.org/svn/trunk@5187 68402e56-0260-453c-a942-63ccdbb3a9ee
---
 admin/element_set_ranks.php                         |  8 ++++++++
 admin/themes/default/template/element_set_ranks.tpl |  8 ++++++--
 admin/themes/default/thumbnails.css                 | 13 ++++++++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/admin/element_set_ranks.php b/admin/element_set_ranks.php
index 57a1f6e0b..0e1418181 100644
--- a/admin/element_set_ranks.php
+++ b/admin/element_set_ranks.php
@@ -153,6 +153,10 @@ $current_rank = 1;
 while ($row = pwg_db_fetch_assoc($result))
 {
   $src = get_thumbnail_url($row);
+
+  list($thumbnail_width, $thumbnail_height) = getimagesize($src);
+  $thumbnail_x_center = $thumbnail_width/2;
+  $thumbnail_y_center = $thumbnail_height/2;
   
   $template->append(
     'thumbnails',
@@ -160,6 +164,10 @@ while ($row = pwg_db_fetch_assoc($result))
       'ID' => $row['id'],
       'TN_SRC' => $src,
       'RANK' => $current_rank * 10,
+      'CLIP_TOP' => round($thumbnail_y_center - 96/2),
+      'CLIP_RIGHT' => round($thumbnail_x_center + 96/2),
+      'CLIP_BOTTOM' => round($thumbnail_y_center + 96/2),
+      'CLIP_LEFT' => round($thumbnail_x_center - 96/2)
       )
     );
 
diff --git a/admin/themes/default/template/element_set_ranks.tpl b/admin/themes/default/template/element_set_ranks.tpl
index 08921fb48..b45ca5d19 100644
--- a/admin/themes/default/template/element_set_ranks.tpl
+++ b/admin/themes/default/template/element_set_ranks.tpl
@@ -34,8 +34,12 @@
     {if !empty($thumbnails)}
     <ul class="thumbnails">
       {foreach from=$thumbnails item=thumbnail}
-      <li  class="rank-of-image">
-	<img src="{$thumbnail.TN_SRC}" class="thumbnail" alt="">
+      <li class="rank-of-image">
+        <div class="clipwrapper">
+	  <div class="clip" style="clip:rect({$thumbnail.CLIP_TOP}px {$thumbnail.CLIP_RIGHT}px {$thumbnail.CLIP_BOTTOM}px {$thumbnail.CLIP_LEFT}px);top:-{$thumbnail.CLIP_TOP}px;left:-{$thumbnail.CLIP_LEFT}px">
+	    <img src="{$thumbnail.TN_SRC}" class="thumbnail" alt="">
+	  </div>
+	</div>
         <input type="text" name="rank_of_image[{$thumbnail.ID}]" value="{$thumbnail.RANK}">
       </li>
       {/foreach}
diff --git a/admin/themes/default/thumbnails.css b/admin/themes/default/thumbnails.css
index 432854e4b..f3b34b5c6 100644
--- a/admin/themes/default/thumbnails.css
+++ b/admin/themes/default/thumbnails.css
@@ -17,16 +17,23 @@
   margin: 10px;
 }
 .content ul.thumbnails li.rank-of-image img {
+  margin: 0 20px;
+  padding: 4px 2px;
+  float: left;
+}
+.clipwrapper {
+  position:relative;
   width: 96px;
   height: 96px;
-  margin: 4px;
-  float: left;
+}
+.clip {
+  position:absolute;
 }
 .content ul.thumbnails li.rank-of-image input {
   height: 12px; 
   width: 50px;
   position: relative;
-  top: 0;  
+  top: 4px;  
 }
 .content UL.thumbnails SPAN.wrap1 {
   margin: 0 5px 5px 5px;
-- 
cgit v1.2.3