Gallery Picker

Kapost have added the ability to convert and embedded gallery link into a file picker for integrators. This should be useful in situations where kapost content/assets need to be used outside of Kapost.

Gallery URL changes

In order to make use of this new functionality the embedded gallery URL needs to have the picker query param added ie. ?embedded=true&picker=true.

Integrating the Gallery Picker

JS Helper Class

Integrators will need to add the following script on any page that needs the Gallery Picker.

<script src="https://<subdomain>.kapost.com/gallery/assets/gallery_picker.js" type="text/javascript"></script>

Using Helper Class

The most likely scenario is that you will open the Gallery Picker using a button/link. In this element's click handler you will need to do something like the following.

$(document).ready(() => {
  $("#open-gallery").on("click", (e) => {
    e.preventDefault();

    // Listener that is triggered when message is sent from Gallery Picker
    const listener = (event, picker) => {
      if (event.origin != window.location.origin /* ignore messages from host page */) {
        // The event.data property holds the payload sent from the Gallery Picker
        // The payload shape is as follows:
        // {
        //   id: String,
        //   title: String,
        //   kapostUrl: String,
        //   downloadUrl: String,
        //   mediaUrl: String,
        //   initiatives: Array[Object({
        //     id: String,
        //     name: String,
        //     newsroom_id: String,
        //     start_date: Timestamp,
        //     end_date: Timestamp,
        //     created_at: Timestamp,
        //     updated_at: Timestamp,
        //   })],
        //   customFields: Object({ "Field Name": mixed })
        // }

        // Do somthing with event.data ...

        // Close the Gallery Picker. The Gallery Picker will clean up listeners for you.
        picker.close();
      }
    };

    // Gallery URL to populate the Gallery Picker. The embed and picker params are required.
    const galleryUrl = "https://<subdomain>.kpst.me/gallery/collections/<collectionId>?embed=true&picker=true";

    // Instantiate the Gallery Picker.
    const galleryPicker = new GalleryPicker(galleryUrl, listener);

    // Open the Gallery Picker window. A reference to the window instance is returned.
    const galleryPickerWindow = galleryPicker.open();

    // If you need to do other things with the Gallery Picker window you can.
  });
});

Demo

You can try the gallery picker out using the demo here.