Left Menu Right Menu
March 11, 2020

Enlarge Cover Customization


Developer

Tamara Marnell (Central Oregon Community College)

Code Repository

None

Description

Add a button over the cover image in a full record that, when clicked, opens the largest available version of that image in a new window.

Primo brief view of record with cover
Enlarged cover image

System Components

PBO, Package Manager

Skillset Requirements

PBO, JavaScript, CSS

Accessibility

Button has a title, but has not been tested for accessibility.

Browser Support

Tested on Chrome, Firefox, Edge, IE11, and Safari.

Mobile Support

Primo hides covers at small resolutions.

Implementation

Overview
To enable this module, you will need to…
  • Declare the module and options in your custom.js file (steps 2 through 4)
  • Style the button in your custom1.css file (step 6)
Steps
1. In the PBO, make sure you have the “Inherit Central Package” box checked.
2. In your local package, in the custom.js file, include the module ‘enlargeCover’ in your app definition. For example:

var app = angular.module('viewCustom', ['enlargeCover']);

If you are using other angular modules, include them in your app definition as well. For example:

var app = angular.module('viewCustom', ['toggleInstitutions', 'enlargeCover']);

3. Also in the custom.js file, add the following line of code within the anonymous function (that is, before the closing brackets at the end of the file):

app.component('prmSearchResultThumbnailContainerAfter', { template: '<enlarge-cover />' });

4. If you want to customize which resource types will have a button, add the following block of code within the anonymous function and edit the values.

app.value('enlargeCoverOptions', {
  resource_types: [
   'book',
   'pbook',
   'dvdvideo',
   'videocassette'
]  
});

Edit the list of resource types with the codes for the types you want to include. For example, to enable the button for Audio CDs, add a new entry for ‘audiocd.’ To disable the button for DVDs, remove the entry ‘dvdvideo’.

You can find the code for the resource type you want to target by using browser tools to examine the label above the title in a brief or full record. In the span surrounding the text (for example, “Audio CD”) look for the attribute “translate.” Use the text after “mediatype” (for example, translate=”mediatype.audiocd”).

5. In your local package, in the custom1.css file, add the following rule-set to style the button to invisibly cover the thumbnail image.
enlarge-cover button.md-button {
position: absolute;
   top: 0;
   margin: 0;
   height: 100%;
   width: 100%;
}

6. Zip and upload your package in the PBO.
7. Deploy your view.

Back to Blog
Comments (0)
Reply To Article