Improved the Image search page to have bigger thumbnails, use a bigger area for results and a smaller left sidebar.

htroot/env/base.css

@@ -258,8 +258,8 @@ tt, *.tt {
 
 .thumbcontainer {
   margin: 2px;
-  width: 128px;
-  height: 128px; /* 96px thumbnail + some lines of text */
+  width: 256px;
+  height: 256px; /* 96px thumbnail + some lines of text */
   float: left;
   /* Cut non square images not rendered by YaCy ViewImage */
   overflow: hidden;
@@ -600,10 +600,10 @@ ul.SubMenu a.MenuItemLink {
 
 a.thumblink {
   display:block;
-  width: 128px;
-  height: 128px;
+  width: 256px;
+  height: 256px;
   margin: 2px;
-  line-height: 128px;
+  line-height: 256px;
   text-align: center;
   overflow: hidden;
 }

htroot/env/bootstrap-base.css

@@ -33,6 +33,7 @@ body {
 }
 @media (min-width: 768px) {
   .sidebar {
+    width: 15%;
     position: fixed;
     top: 61px;
     bottom: 0;
@@ -131,4 +132,6 @@ ul.nav li.dropdown:hover ul.dropdown-menu{
 }
 .col-md-9 {
     overflow-x: hidden;
+	margin-left: 15%;
+	width: 85%;
 }

htroot/env/bootstrap/css/bootstrap.css

@@ -1696,7 +1696,7 @@ pre code {
   width: 83.33333333%;
 }
 .col-xs-9 {
-  width: 75%;
+  width: 85%;
 }
 .col-xs-8 {
   width: 66.66666667%;
@@ -1714,7 +1714,7 @@ pre code {
   width: 33.33333333%;
 }
 .col-xs-3 {
-  width: 25%;
+  width: 15%;
 }
 .col-xs-2 {
   width: 16.66666667%;
@@ -1732,7 +1732,7 @@ pre code {
   right: 83.33333333%;
 }
 .col-xs-pull-9 {
-  right: 75%;
+  right: 85%;
 }
 .col-xs-pull-8 {
   right: 66.66666667%;
@@ -1771,7 +1771,7 @@ pre code {
   left: 83.33333333%;
 }
 .col-xs-push-9 {
-  left: 75%;
+  left: 85%;
 }
 .col-xs-push-8 {
   left: 66.66666667%;
@@ -1810,7 +1810,7 @@ pre code {
   margin-left: 83.33333333%;
 }
 .col-xs-offset-9 {
-  margin-left: 75%;
+  margin-left: 85%;
 }
 .col-xs-offset-8 {
   margin-left: 66.66666667%;
@@ -1828,7 +1828,7 @@ pre code {
   margin-left: 33.33333333%;
 }
 .col-xs-offset-3 {
-  margin-left: 25%;
+  margin-left: 15%;
 }
 .col-xs-offset-2 {
   margin-left: 16.66666667%;
@@ -1864,7 +1864,7 @@ pre code {
     width: 83.33333333%;
   }
   .col-sm-9 {
-    width: 75%;
+    width: 85%;
   }
   .col-sm-8 {
     width: 66.66666667%;
@@ -1882,7 +1882,7 @@ pre code {
     width: 33.33333333%;
   }
   .col-sm-3 {
-    width: 25%;
+    width: 15%;
   }
   .col-sm-2 {
     width: 16.66666667%;
@@ -1900,7 +1900,7 @@ pre code {
     right: 83.33333333%;
   }
   .col-sm-pull-9 {
-    right: 75%;
+    right: 85%;
   }
   .col-sm-pull-8 {
     right: 66.66666667%;
@@ -1939,7 +1939,7 @@ pre code {
     left: 83.33333333%;
   }
   .col-sm-push-9 {
-    left: 75%;
+    left: 85%;
   }
   .col-sm-push-8 {
     left: 66.66666667%;
@@ -1978,7 +1978,7 @@ pre code {
     margin-left: 83.33333333%;
   }
   .col-sm-offset-9 {
-    margin-left: 75%;
+    margin-left: 85%;
   }
   .col-sm-offset-8 {
     margin-left: 66.66666667%;
@@ -2033,7 +2033,7 @@ pre code {
     width: 83.33333333%;
   }
   .col-md-9 {
-    width: 75%;
+    width: 85%;
   }
   .col-md-8 {
     width: 66.66666667%;
@@ -2051,7 +2051,7 @@ pre code {
     width: 33.33333333%;
   }
   .col-md-3 {
-    width: 25%;
+    width: 15%;
   }
   .col-md-2 {
     width: 16.66666667%;
@@ -2069,7 +2069,7 @@ pre code {
     right: 83.33333333%;
   }
   .col-md-pull-9 {
-    right: 75%;
+    right: 85%;
   }
   .col-md-pull-8 {
     right: 66.66666667%;
@@ -2108,7 +2108,7 @@ pre code {
     left: 83.33333333%;
   }
   .col-md-push-9 {
-    left: 75%;
+    left: 85%;
   }
   .col-md-push-8 {
     left: 66.66666667%;
@@ -2147,7 +2147,7 @@ pre code {
     margin-left: 83.33333333%;
   }
   .col-md-offset-9 {
-    margin-left: 75%;
+    margin-left: 85%;
   }
   .col-md-offset-8 {
     margin-left: 66.66666667%;
@@ -2202,7 +2202,7 @@ pre code {
     width: 83.33333333%;
   }
   .col-lg-9 {
-    width: 75%;
+    width: 85%;
   }
   .col-lg-8 {
     width: 66.66666667%;
@@ -2220,7 +2220,7 @@ pre code {
     width: 33.33333333%;
   }
   .col-lg-3 {
-    width: 25%;
+    width: 15%;
   }
   .col-lg-2 {
     width: 16.66666667%;
@@ -2238,7 +2238,7 @@ pre code {
     right: 83.33333333%;
   }
   .col-lg-pull-9 {
-    right: 75%;
+    right: 85%;
   }
   .col-lg-pull-8 {
     right: 66.66666667%;
@@ -2277,7 +2277,7 @@ pre code {
     left: 83.33333333%;
   }
   .col-lg-push-9 {
-    left: 75%;
+    left: 85%;
   }
   .col-lg-push-8 {
     left: 66.66666667%;
@@ -2316,7 +2316,7 @@ pre code {
     margin-left: 83.33333333%;
   }
   .col-lg-offset-9 {
-    margin-left: 75%;
+    margin-left: 85%;
   }
   .col-lg-offset-8 {
     margin-left: 66.66666667%;

htroot/js/yacyinteractive.js

@@ -252,7 +252,7 @@ function resultLine(type, item, linenumber) {
   if (type == "image") {
     html += "<div style=\"float:left\">";
     html += "<a href=\"" + item.link + "\" class=\"thumblink\" onclick=\"return hs.expand(this)\">";
-    html += "<img src=\"/ViewImage.png?maxwidth=96&amp;maxheight=96&amp;code=" + item.guid + " + &amp;url=" + item.link + "\" alt=\"" + title + "\" />";
+    html += "<img src=\"/ViewImage.png?maxwidth=256&amp;maxheight=256&amp;code=" + item.guid + " + &amp;url=" + item.link + "\" alt=\"" + title + "\" />";
     //html += "<img src=\"" + item.link + "\" width=\"96\" height=\"96\" alt=\"" + title + "\" />";
     html += "</a>";
     var name = title;

htroot/yacysearchitem.html

@@ -56,7 +56,7 @@
   ::
   #(item)#::<div class="thumbcontainer">
     <a href="#[hrefFullPreview]#" target="#[target]#" class="thumblink" onclick="return hs.expand(this)">
-      <img src="#[hrefCache]#" width="#[width]#" height="#[height]#" style="#[style]#" alt="#[name]#" onerror="handleResultThumbError(this)"/>
+      <img src="#[hrefCache]#" width="256" height="256" style="#[style]#" alt="#[name]#" onerror="handleResultThumbError(this)"/>
     </a>
     <div class="highslide-caption"><a href="#[href]#" target="#[target]#" #(noreferrer)#::rel="noreferrer"#(/noreferrer)#>#[name]#</a><br /><a href="#[source]#" target="#[target]#" #(noreferrer)#::rel="noreferrer"#(/noreferrer)#>#[sourcedom]#</a></div>
   </div>#(/item)#

htroot/yacysearchitem.java

@@ -88,7 +88,7 @@ public class yacysearchitem {
     private static final int MAX_NAME_LENGTH = 60;
     private static final int MAX_URL_LENGTH = 120;
     /** Default image item width in pixels */
-    private static final int DEFAULT_IMG_WIDTH = 128;
+    private static final int DEFAULT_IMG_WIDTH = 256;
     /** Default image item height in pixels */
     private static final int DEFAULT_IMG_HEIGHT = DEFAULT_IMG_WIDTH;
 

htroot/yacysearchitem.json

@@ -19,7 +19,7 @@
     }::#(item)#::#(nl)#::    ,#(/nl)#
     {
       "title": "#[name]#",
-      "icon": "/ViewImage.png?maxwidth=96&maxheight=96&code=#[code]#",
+      "icon": "/ViewImage.png?maxwidth=256&maxheight=256&code=#[code]#",
       "image": "#[href]#",
       "cache": "#[hrefCache]#",
       "url": "#[source]#",

htroot/yacysearchitem.xml

@@ -43,14 +43,14 @@
   height="#[width]#"
   width="#[height]#" />
 <media:content 
-  url="/ViewImage.png?maxwidth=96&amp;maxheight=96&amp;code=#[code]#" 
+  url="/ViewImage.png?maxwidth=256&amp;maxheight=256&amp;code=#[code]#" 
   fileSize="#[fileSize]#" 
   type="#[mimetype]#"
   medium="image"
   isDefault="false" 
   expression="sample" 
-  height="96"
-  width="96" />
+  height="256"
+  width="256" />
 </media:group>
 </item>#(/item)#::
 #(/content)#