Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface

Browse source 
This patch adds the ability to display the cover images of a
bibliographic record in a gallery. Cover images attached to items can
also be displayed in separated galleries.

Test plan:
All the cover images are affected, all the different sources will be
tested.
All the steps will be done on the same bibliographic record.
1. Local cover images
 a. Turn on LocalCoverImages and AllowMultipleCovers
 b. Add several local cover images to a bibliographic record
 c. Add several local cover images to an item
 d. Click on an image and confirm that it is displayed in a gallery and
 you can navigate see all the images attached to the bibliographic
 record
 e. Same for items
2. Adlibris
 a. Turn on AdlibrisCoversEnabled
 b. Edit the biliographic record and add an ISBN that will return a
 cover image for this service (9780670026623 for instance)
 c. Display the cover images in the gallery
 d. Note the link to the adlibris.com website at the bottom
3. Amazon
 a. Turn on AmazonCoverImages
 b. Display the cover images in the gallery
4. Coce
 a. Turn on IntranetCoce, set CoceHost to "http://coce.tamil.fr:8080"
 and select some values for CoceProviders.
 b. Display the cover images in the gallery
5. Custom cover images
 a. Turn on CustomCoverImages and set CustomCoverImagesURL to https://covers.openlibrary.org/b/isbn/{isbn}-M.jpg
 of anything else meaningful
 b. Display the cover images in the gallery

Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Jonathan Druart 2021-04-19 11:37:55 +02:00
parent 17e9e06bd6
commit 50a4f9834c
2 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
koha-tmpl/intranet-tmpl/js/coce.js
View file

@ -39,7 +39,8 @@ KOHA.coce = {
$(this).closest(".coce-coverimg").remove();
}
};
$(this).html(img);
$(this).attr('href', url);
$(this).append(img);
});
}
},

55
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
View file

@ -43,6 +43,7 @@
[% END %] &rsaquo; Catalog &rsaquo; Koha
</title>
[% INCLUDE 'doc-head-close.inc' %]
[% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %]
</head>
<body id="catalog_detail" class="catalog">
@ -196,8 +197,8 @@
[% IF localimages.count %]
[% FOREACH image IN localimages %]
<div class="cover-image local-coverimg">
<a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]">
<img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
<a href="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
<img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" data-link="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" />
</a>
<div class="hint">Local cover image</div>
</div>
@ -207,8 +208,8 @@
[% IF ( AdlibrisEnabled && normalized_isbn ) %]
<div class="cover-image" id="adlibris-coverimg">
<a href="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]">
<img src="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" class="adlibris-cover-big" alt="Adlibris cover image" />
<a href="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" title="Addlibris cover image">
<img src="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" class="adlibris-cover-big" alt="Adlibris cover image" data-link="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" />
</a>
<div class="hint">Image from Adlibris</div>
</div>
@ -216,8 +217,8 @@
[% IF ( AmazonCoverImages && normalized_isbn) %]
<div class="cover-image" id="amazon-bookcoverimg">
<a href="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link">
<img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | html %].01.MZZZZZZZ.jpg" alt="Amazon cover image" />
<a href="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.LZZZZZZZ.jpg" title="Amazon cover image">
<img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.MZZZZZZZ.jpg" alt="Amazon cover image" data-link="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link"/>
</a>
<div class="hint">Image from Amazon.com</div>
</div>
@ -227,7 +228,7 @@
[% coce_id = normalized_ean || normalized_isbn %]
<div class="cover-image" id="coce-coverimg">
[% IF ( coce_id ) %]
<span title="[% biblionumber | url %]" class="[% coce_id | html %]" id="coce-thumbnail-preview"></span>
<a title="Image from Coce" class="[% coce_id | html %]" id="coce-thumbnail-preview"></a>
[% ELSE %]
<span class="no-image">No cover image available</span>
[% END %]
@ -239,7 +240,7 @@
[% SET custom_cover_image_url = biblio.custom_cover_image_url %]
[% IF custom_cover_image_url %]
<div class="cover-image" id="custom-coverimg">
<a class="custom_cover_image" href="[% custom_cover_image_url | url %]">
<a class="custom_cover_image" href="[% custom_cover_image_url | url %]" title="Custom cover image">
<img id="custom-img" alt="Custom cover image" src="[% custom_cover_image_url | url %]" />
</a>
<div class="hint">Custom cover image</div>
@ -353,7 +354,7 @@
<div class="cover-slider">
[% FOREACH image IN item.cover_images %]
<div class="cover-image local-coverimg">
<a href="/cgi-bin/koha/catalogue/imageviewer.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]">
<a href="/cgi-bin/koha/catalogue/image.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
<img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
</a>
</div>
@ -1014,6 +1015,7 @@ Note that permanent location is a code, and location may be an authval.
[% INCLUDE 'catalog-strings.inc' %]
[% Asset.js("js/catalog.js") | $raw %]
[% Asset.js("js/coce.js") | $raw %]
[% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %]
<script>
var interface = "[% interface | html %]";
var theme = "[% theme | html %]";
@ -1021,11 +1023,13 @@ Note that permanent location is a code, and location may be an authval.
function verify_images() {
// Loop over each container in the template which contains covers
$(".cover-slider").each(function(){
var lightbox_descriptions = [];
$(this).find(".cover-image").each( function( index ){
var div = $(this);
// Find the image in the container
var img = div.find("img")[0];
if( $(img).length > 0 ){
var description = "";
if( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ){
// No image loaded in the container. Remove the slide
div.remove();
@ -1042,28 +1046,47 @@ Note that permanent location is a code, and location may be an authval.
// Amazon returned single-pixel placeholder
// Remove the container
div.remove();
} else {
lightbox_descriptions.push(_("Amazon cover image (<a href='%s'>see the original image</a>)").format($(img).data('link')));
}
}
if( div.attr("id") == "custom-img" ){
} else if( div.attr("id") == "custom-coverimg" ){
if ( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ) {
// No image was loaded via the CustomCoverImages system preference
// Remove the container
div.remove();
} else {
lightbox_descriptions.push("Custom cover image");
}
}
if( div.attr("id") == "coce-coverimg" ){
} else if( div.attr("id") == "coce-coverimg" ){
// Identify which service's image is being loaded by Coce
var coce_description;
if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
div.find(".hint").html(_("Coce image from Amazon.com"));
coce_description = ("Coce image from Amazon.com");
} else if( $(img).attr("src").indexOf('google.com') >= 0 ){
div.find(".hint").html(_("Coce image from Google Books"));
coce_description = _("Coce image from Google Books");
} else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
div.find(".hint").html(_("Coce image from Open Library"));
coce_description = _("Coce image from Open Library");
}
div.find(".hint").html(coce_description);
lightbox_descriptions.push(coce_description);
} else if ( div.attr("id") == "adlibris-coverimg" ){
lightbox_descriptions.push(_("Image from Adlibris (<a href='%s'>see the original image</a>)").format($(img).data('link')));
} else if ( div.attr("class") == "cover-image local-coverimg" ) {
lightbox_descriptions.push(_("Local cover image (<a href='%s'>edit</a>)").format($(img).data('link')));
} else {
console.log("Source of the image cannot be guessed.")
}
}
}
});
// Lightbox for cover images
Chocolat(this.querySelectorAll('.cover-image a'), {
description: function(){
return lightbox_descriptions[this.settings.currentImageIndex];
}
});
});
$(".cover-slider").each(function(){