From e840d4cf702400db09925ec7c0b0c6621c68c0ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lucas?= <sebastien@slucas.fr>
Date: Thu, 4 Jul 2013 22:37:27 +0200
Subject: [PATCH] Change the way images are shown. re #77

Jpeg quality is lowered but resolution is two times higher.
The image is then reduced with CSS.
The default value is changed.
---
 book.php                 |  2 +-
 config_default.php       |  2 +-
 fetch.php                |  4 ++--
 styles/style-default.css | 22 +++++++++++++++++-----
 styles/style-eink.css    | 22 +++++++++++++++++-----
 5 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/book.php b/book.php
index 3987026..f18c474 100644
--- a/book.php
+++ b/book.php
@@ -144,7 +144,7 @@ class Book extends Base {
         $out = $this->getContentArray ();
         
         $out ["coverurl"] = Data::getLink ($this, "jpg", "image/jpeg", Link::OPDS_IMAGE_TYPE, "cover.jpg", NULL)->hrefXhtml ();
-        $out ["thumbnailurl"] = Data::getLink ($this, "jpg", "image/jpeg", Link::OPDS_THUMBNAIL_TYPE, "cover.jpg", NULL, NULL, 150)->hrefXhtml ();
+        $out ["thumbnailurl"] = Data::getLink ($this, "jpg", "image/jpeg", Link::OPDS_THUMBNAIL_TYPE, "cover.jpg", NULL, NULL, $config['cops_html_thumbnail_height'] * 2)->hrefXhtml ();
         $out ["content"] = $this->getComment (false);
         $out ["datas"] = array ();
         $dataKindle = $this->GetMostInterestingDataToSendToKindle ();
diff --git a/config_default.php b/config_default.php
index 92383fa..40747a6 100644
--- a/config_default.php
+++ b/config_default.php
@@ -64,7 +64,7 @@
     /*
      * Height of thumbnail image for HTML
      */
-    $config['cops_html_thumbnail_height'] = "70";
+    $config['cops_html_thumbnail_height'] = "164";
 
     /*
      * Icon for both OPDS and HTML catalog
diff --git a/fetch.php b/fetch.php
index 855f3fd..d03f962 100644
--- a/fetch.php
+++ b/fetch.php
@@ -51,7 +51,7 @@
                 $src_img = imagecreatefromjpeg($file);
                 $dst_img = imagecreatetruecolor($nw,$nh);
                 imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $nw, $nh, $w, $h);//resizing the image
-                imagejpeg($dst_img,null,100);
+                imagejpeg($dst_img,null,80);
                 imagedestroy($src_img);
                 imagedestroy($dst_img);
                 return;
@@ -76,7 +76,7 @@
                 $src_img = imagecreatefromjpeg($file);
                 $dst_img = imagecreatetruecolor($nw,$nh);
                 imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $nw, $nh, $w, $h);//resizing the image
-                imagejpeg($dst_img,null,100);
+                imagejpeg($dst_img,null,80);
                 imagedestroy($src_img);
                 imagedestroy($dst_img);
                 return;
diff --git a/styles/style-default.css b/styles/style-default.css
index 8bbbcf7..886d3b8 100644
--- a/styles/style-default.css
+++ b/styles/style-default.css
@@ -175,21 +175,33 @@ max-width:800px;
 /*-------------books article-------------*/
 .books {
     clear: both;
-    padding: 10px;
     min-height: 90px;
 }
 
-.cover {
+.books .cover {
     float:left;
-    margin: 0 10px 0 0;
-    min-width: 56px;
-    min-height: 70px;
+    margin: 4px 10px 4px 4px;
+    width: 60px;
+    height: 82px;
+}
+
+.bookpopup .cover {
+    float:left;
+    margin: 4px 10px 4px 4px;
+    width: 100px;
+    height: 150px;
+}
+
+.cover img {
+    max-width:100%;
+    max-height:100%;
 }
 
 .download {
     float: right;
     line-height:40px;
     text-align: right;
+    margin: 6px;
 }
 
 .download a {
diff --git a/styles/style-eink.css b/styles/style-eink.css
index 07d9c73..0a0af7d 100644
--- a/styles/style-eink.css
+++ b/styles/style-eink.css
@@ -192,21 +192,33 @@ max-width:800px;
 /*-------------books article-------------*/
 .books {
     clear: both;
-    padding: 10px;
     min-height: 90px;
 }
 
-.cover {
+.books .cover {
     float:left;
-    margin: 0 10px 0 0;
-    min-width: 56px;
-    min-height: 70px;
+    margin: 4px 10px 4px 4px;
+    width: 60px;
+    height: 82px;
+}
+
+.bookpopup .cover {
+    float:left;
+    margin: 4px 10px 4px 4px;
+    width: 100px;
+    height: 150px;
+}
+
+.cover img {
+    max-width:100%;
+    max-height:100%;
 }
 
 .download {
     float: right;
     line-height:40px;
     text-align: right;
+    margin: 6px;
 }
 
 .download a {