From 8d56b14cc8b3beb133ef071900e2fef57c7f938c Mon Sep 17 00:00:00 2001
From: Shane <shane.sammons@gmail.com>
Date: Wed, 7 Mar 2012 17:21:06 -0500
Subject: [PATCH] Bug 7669: Add CSS classes to OPAC results thumbnails

Looks at the code for the images in the template I notices some were raw
images, some were encased in <div> tags, and no-images were in <spans>. I added
classes to the elements to make then more easily modified by the end user
through the OPAC CSS options.

Also, all images and no-images now have float:left (this was in the .thumbnail
class). I combines the thumbnail elements into the .no-image{} class. It does
not have div.no-image like the still active span.no-image, because that is an
element specific class and thus any settings in it override user settings. So,
it has to stay simply .no-image.

Images "<img>" now have a class thumbnail_image. This was in keeping with
consistent and unique element classes. thumbnail is used by all the <div>
elements.

Here are the new classes I have added, that are vendor/company specific:
/* New Classes for Thumbnail Images */
.thumbnail_image { /* specific class for the actual <img> tag */
}

/* specific classes for thumbnails */
.opac_thumb, .amazon_thumb, .google_thumb, .syndetics_thumb,
.openlibrary_thumb, .bakertaylor_thumb{
}

/* specific classes for no-image */
.amazon_no, .google_no, .openlibrary_no, .bakertaylor_no{
}

Example Code to see why:
/*examples how a specific class works*/
div.amazon_no{ /*Amazon no image [seem broken in code]*/
border: 1px solid #FFA500; /*amazon is ornage*/
}
.google_thumb, .google_no{/*Google no image*/
border-top: 2px solid #F00;
border-right: 2px solid #080;
border-bottom: 2px solid #FF0;
border-left: 2px solid #00F;
padding: 2px;
}
.openlibrary_no{
background: url(http://openlibrary.org/images/logo_IA-sm.png) right center no-repeat;
color: #00F;
text-align: left;
}

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
---
 koha-tmpl/opac-tmpl/prog/en/css/opac.css           |   15 ++++-
 .../opac-tmpl/prog/en/modules/opac-results.tt      |   58 +++++++++++---------
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index 3149784..4765e81 100644
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -2116,7 +2116,7 @@ table#items th {
 .results_summary img {
 	margin : 0 5px;
  }
-span.no-image {
+span.no-image{
 	background-color : #FFF;
 	border: 1px solid #979797;
 	color : #AAA;
@@ -2850,3 +2850,16 @@ body#opac-main #opacmainuserblockmobile {
 video {
     width: 480px;
 }
+
+.no-image{/*make it like the thumbnail class*/
+	float : left;
+	margin : 0pt 5px 5px 0pt;
+	background-color : #FFF;
+	border: 1px solid #979797;
+	color : #AAA;
+	display:block;
+	font-size : 86%;
+	font-weight : bold;
+	text-align : center;
+	width : 75px;
+}
diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
index 2e3ad22..86bae73 100644
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
@@ -624,31 +624,39 @@ $(document).ready(function(){
                         <a class="addtocart cart[% SEARCH_RESULT.biblionumber %]" href="#" onclick="addRecord('[% SEARCH_RESULT.biblionumber %]'); return false;">Add to cart</a> <a style="display:none;" class="cartRemove cartR[% SEARCH_RESULT.biblionumber %]" href="#" onclick="delSingleRecord('[% SEARCH_RESULT.biblionumber %]'); return false;">(remove)</a>
                     [% END %]
                 [% END %]
-                </span>
-                </td><td>
-                    <a class="p1" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% SEARCH_RESULT.biblionumber %]">
-            [% IF ( OPACLocalCoverImages ) %]<span title="[% SEARCH_RESULT.biblionumber |url %]" class="[% SEARCH_RESULT.biblionumber %]" id="local-thumbnail[% loop.count %]"></span>[% END %]
-                    [% IF ( OPACAmazonCoverImages ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<img src="http://images.amazon.com/images/P/[% SEARCH_RESULT.normalized_isbn %].01.TZZZZZZZ.jpg" alt="" class="thumbnail" />[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
-
-                [% IF ( SyndeticsEnabled ) %]
-                    [% IF ( SyndeticsCoverImages ) %]
-                        [% IF SEARCH_RESULT.normalized_isbn %]
-                                [% IF ( using_https ) %]
-                            <img src="https://secure.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail" />
-                        [% ELSE %]
-                            <img src="http://www.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail" />
-                    [% END %]
-                    [% ELSE %]
-                        <span class="no-image">No cover image available</span>
-                    [% END %]
-            [% END %]
-                [% END %]
-
-                [% IF ( GoogleJackets ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<span style="block" title="[% SEARCH_RESULT.biblionumber |url %]" class="[% SEARCH_RESULT.normalized_isbn %]" id="gbs-thumbnail[% loop.count %]"></span>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
-        [% IF OpenLibraryCovers %][% IF SEARCH_RESULT.normalized_isbn %]<span style="block" title="[% SEARCH_RESULT.biblionumber %]" class="[% SEARCH_RESULT.normalized_isbn %]" id="openlibrary-thumbnail[% loop.count %]"></span>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
-                </a>
-                [% IF ( BakerTaylorEnabled ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<a href="https://[% BakerTaylorBookstoreURL |html %][% SEARCH_RESULT.normalized_isbn %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% SEARCH_RESULT.normalized_isbn %]" /></a>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
-                </td>
+				</span>
+				</td><td>
+					<a class="p1" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% SEARCH_RESULT.biblionumber %]">
+		[% IF ( OPACLocalCoverImages ) %]
+					<div title="[% SEARCH_RESULT.biblionumber |url %]" class="thumbnail opac_thumb [% SEARCH_RESULT.biblionumber %]" id="local-thumbnail[% loop.count %]"></div>
+				[% END %]
+				[% IF ( OPACAmazonEnabled ) %][% IF ( OPACAmazonCoverImages ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]
+					<div class="thumbnail amazon_thumb"><img src="http://images.amazon.com/images/P/[% SEARCH_RESULT.normalized_isbn %].01.TZZZZZZZ.jpg" alt="" class="thumbnail_image" /></div>
+				[% ELSE %]
+					<div class="no-image amazon_no">No cover image available</div>
+				[% END %][% END %][% END %]
+				[% IF ( SyndeticsEnabled ) %][% IF ( SyndeticsCoverImages ) %][% IF ( using_https ) %]
+					<div class="thumbnail syndetics_thumb"><img src="https://secure.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail_image" />
+				[% ELSE %]
+					<div class="thumbnail syndetics_thumb"><img src="http://www.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail_image" />
+				[% END %][% END %][% END %]
+				[% IF ( GoogleJackets ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]
+					<div title="[% SEARCH_RESULT.biblionumber |url %]" class="thumbnail google_thumb [% SEARCH_RESULT.normalized_isbn %]" id="gbs-thumbnail[% loop.count %]"></div>
+				[% ELSE %]
+					<div class="no-image google_no">No cover image available</div>
+				[% END %][% END %]
+				[% IF OpenLibraryCovers %][% IF SEARCH_RESULT.normalized_isbn %]
+					<div title="[% SEARCH_RESULT.biblionumber %]" class="thumbnail openlibrary_thumb [% SEARCH_RESULT.normalized_isbn %]" id="openlibrary-thumbnail[% loop.count %]"></div>
+				[% ELSE %]
+					<div class="no-image openlibrary_no">No cover image available</div>
+				[% END %][% END %]
+					</a>
+				[% IF ( BakerTaylorEnabled ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]
+					<div class="thumbnail bakertaylor_thumb"><a href="https://[% BakerTaylorBookstoreURL |html %][% SEARCH_RESULT.normalized_isbn %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% SEARCH_RESULT.normalized_isbn %]" /></a></div>
+				[% ELSE %]
+					<div class="no-image bakertaylor_no">No cover image available</div>
+				[% END %][% END %]
+				</td>
                 </tr>
                 [% END %]
             </table>
-- 
1.7.10.4