Bug 29609: Centralized code to build the link to a biblio detail page
[srvgit] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-imageviewer.tt
index 5985b93..33ba901 100644 (file)
@@ -1,34 +1,37 @@
 [% USE Koha %]
+[% USE AdditionalContents %]
+[% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
+[% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog &rsaquo; Images for: [% biblio.title |html %]</title>
+<title>Images for: [% INCLUDE 'biblio-title-head.inc' %] &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% BLOCK cssinclude %]
-    <style type="text/css">
-    #largeCoverImg {
-        border : 1px solid #CCCCCC;
-        display : block;
-        margin : auto;
-        padding : 1em;
-    }
-    #thumbnails {
-        text-align : center;
-    }
-    #thumbnails a img {
-        border : 2px solid #8EB3E7;
-    }
-    img.thumbnail {
-        display : block;
-        float : none;
-        margin : .3em 0;
-        padding : .5em;
-    }
+    <style>
+        #largeCoverImg {
+            border : 1px solid #CCCCCC;
+            display : block;
+            margin : auto;
+            padding : 1em;
+        }
+        #thumbnails {
+            text-align : center;
+        }
+        #thumbnails a img {
+            border : 2px solid #8EB3E7;
+        }
+        img.thumbnail {
+            display : block;
+            float : none;
+            margin : .3em 0;
+            padding : .5em;
+        }
 
-    #thumbnails a img.selected {
-        border-color: black;
-        cursor : default;
-        opacity:0.4;
-        filter:alpha(opacity=40); /* For IE8 and earlier */
-    }
+        #thumbnails a img.selected {
+            border-color: black;
+            cursor : default;
+            opacity:0.4;
+            filter:alpha(opacity=40); /* For IE8 and earlier */
+        }
     </style>
 [% END %]
 </head>
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <ul class="breadcrumb">
-            <li><a href="/cgi-bin/koha/opac-main.pl">Home</a> <span class="divider">&rsaquo;</span></li>
-            <li>
-                [% IF ( BiblioDefaultViewmarc ) %]
-                    <a href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber |url %]">
-                [% ELSE %]
-                    [% IF ( BiblioDefaultViewisbd ) %]
-                        <a href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber |url %]">
-                    [% ELSE %]
-                        <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber |url %]">
-                    [% END %]
-                [% END %][% biblio.title %]</a> <span class="divider">&rsaquo;</span>
-            </li>
-            <li><a href="#">Images</a></li>
-        </ul>
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/cgi-bin/koha/opac-main.pl">Home</a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="[% PROCESS biblio_a_href biblionumber => biblionumber %]">
+                    [% INCLUDE 'biblio-title.inc' %]</a>
+                </li>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Images</a>
+                </li>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
-            <div class="row-fluid">
+            <div class="row">
                 [% IF ( OpacNav || OpacNavBottom ) %]
-                    <div class="span2">
+                    <div class="col-lg-2">
                         <div id="navigation">
                             [% INCLUDE 'navigation.inc' %]
                         </div>
                     </div>
-                    <div class="span10">
+                    <div class="col-10 order-first order-md-first order-lg-2">
                 [% ELSE %]
-                    <div class="span12">
+                    <div class="col order-first order-md-first order-lg-2">
                 [% END %]
-                    <div class="row-fluid">
-                        <div class="span9">
+
+                    <div class="row">
+                        <div class="col-lg-9 maincontent">
                             <h1 class="title">Images for
-                                [% IF ( BiblioDefaultViewmarc ) %]
-                                    <a class="title" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
-                                [% ELSE %]
-                                    [% IF ( BiblioDefaultViewisbd ) %]
-                                        <a class="title" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
-                                    [% ELSE %]
-                                        <a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
-                                    [% END %]
-                                [% END %][% biblio.title %]</a> [% biblio.author %]
+                                <a class="title" href="[% PROCESS biblio_a_href biblionumber => biblionumber %]" title="View details for this title">
+                                [% INCLUDE 'biblio-title.inc' %]</a> [% biblio.author | html %]
                             </h1>
-                        </div> <!-- / .span9 -->
-                    </div> <!-- / .row-fluid -->
+                        </div> <!-- / col-lg-9 -->
+                    </div> <!-- / .row -->
 
-                    <div class="row-fluid">
-                        <div class="span9">
+                    <div class="row">
+                        <div class="col-lg-9">
                             <div id="imageviewer">
                                 <div id="largeCover">
                                     <img id="largeCoverImg" alt="" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% imagenumber | url %]" />
                         </div> <!-- / .span12 -->
 
                         [% IF OPACLocalCoverImages == 1 %]
-                            <div class="span3">
-                                <div id="thumbnails">
-                                    [% FOREACH img IN images %]
-                                        [% IF img %]
-                                            <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber | url %]&amp;imagenumber=[% img %]" onclick="showCover([% img %]); return false;">
-                                            [% IF ( imagenumber == img ) %]
-                                                <img class="thumbnail selected" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&amp;thumbnail=1" alt="Thumbnail"/>
+                            [% IF images.count %]
+                                <div class="col-lg-3">
+                                    <div id="thumbnails">
+                                        [% FOREACH image IN images %]
+                                            <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber | url %]&amp;imagenumber=[% image.imagenumber| uri %]" onclick="showCover([% image.imagenumber| html %]); return false;">
+                                            [% IF loop.first %]
+                                                <img class="thumbnail selected" id="[% image.imagenumber| html %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% image.imagenumber | html %]&amp;thumbnail=1" alt="Thumbnail"/>
                                             [% ELSE %]
-                                                <img class="thumbnail" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&amp;thumbnail=1" alt="Thumbnail"/>
+                                                <img class="thumbnail" id="[% image.imagenumber | html %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% image.imagenumber | html %]&amp;thumbnail=1" alt="Thumbnail"/>
                                             [% END %]
                                             </a>
                                         [% END %]
-                                    [% END %]
-                                </div>
-                            </div>
+                                    </div> <!-- /#thumbnails -->
+                                </div> <!-- /.col-lg-3 -->
+                            [% END %]
                         [% ELSE %]
                             Unfortunately, images are not enabled for this catalog at this time.
                         [% END %]
-                    </div> <!-- / .row-fluid -->
-                </div> <!-- / .span10/12 -->
-            </div> <!-- / .row-fluid -->
+                    </div> <!-- / .row -->
+                </div> <!-- / .col-lg-10/12 -->
+            </div> <!-- / .row -->
         </div> <!-- / .container-fluid -->
     </div> <!-- / .main -->
 
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
-<script type="text/javascript">
-    //<![CDATA[
+    <script>
         $(document).ready(function(){
-            $("#largeCoverImg").attr("src","[% interface %]/[% theme %]/images/loading.gif");
+            $("#largeCoverImg").attr("src","[% interface | html %]/[% theme | html %]/images/loading.gif");
             showCover([% imagenumber | html %]);
         });
 
             $('#largeCoverImg').attr('src', '/cgi-bin/koha/opac-image.pl?imagenumber=' + img);
             $('#' + img + '.thumbnail').attr('class', 'thumbnail selected');
         }
-    //]]>
-</script>
+    </script>
 [% END %]