Enlarge Cover Image


Tamara Marnell, Central Oregon Community College


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.

Mouse hovering over cover image in full Primo record
Enlarged cover image from Syndetics

System Components

PBO, Package Manager

Skillset Requirements

PBO, JavaScript, CSS


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.



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)


  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: [

    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%;

    /* Override md-button styles */
    enlarge-cover button.md-button:hover,
    enlarge-cover button.md-button:hover:not([disabled]),
    enlarge-cover button.md-button:focus,
    enlarge-cover button.md-button:focus:not([disabled]) {
    background-color: rgba(0,0,0,0.1);
  1. Zip and upload your package in the PBO.
  2. Deploy your view.