Using Keepeek Assets in Jahia

This guide explains how to select and display media assets from your Keepeek Digital Asset Management (DAM) system within Jahia content.

What you'll learn:

• How to select Keepeek assets in your content
• How to display Keepeek assets on your website
• How to work with images and videos

Prerequisites:

• The Keepeek Content Picker module is installed and configured (see Administrator Guide)
• Basic knowledge of jContent

---

Selecting Keepeek Assets

Using the Keepeek Picker in Content Forms

When creating or editing content that supports media references, you can select Keepeek assets directly from your content form.

Note: The Keepeek picker is only available for picker types configured in the frontApplyOnPickers setting (default: image,file,video). If you don't see the Keepeek option in a picker, verify that the picker type is enabled in the module configuration. See the Administrator Guide for configuration details.

Adding a Hero Image

Let's add a hero image to a banner component:

1. Open your content in jContent
   • Create or edit a "Hero Banner" component

2. Click the image field (e.g., "Image")

3. Open the Keepeek picker

   • A modal appears showing Jahia assets
   • Select "Keepeek" from the Source provider dropdown to access your Keepeek library

4. Authenticate if needed
   • Enter your Keepeek credentials when prompted

5. Select your asset
   • Search for assets (e.g., "mountain landscape")
   • Filter by type, date, or tags
   • Click an image to select it

6. [Optional] Transform the image
   • Crop: Use the crop tool to focus on a specific area
   • Resize: Enter custom width and height
   • Preview updates in real-time
   • Transformations don't modify the original in Keepeek

7. Insert and save
   • Click "Insert" to add the image
   • Click "Save" to save your content

     

     The image is now referenced in your content. The file remains in Keepeek and is not duplicated in Jahia.

Using Keepeek Assets in CKEditor

You can also insert Keepeek images directly into rich text fields:

1. Click inside a rich text field (e.g., article body)
2. Click the "Image" icon in the CKEditor toolbar
3. Select "Keepeek" as the source (if you have multiple DAM providers)
4. Browse and select your image using the picker
5. Configure display settings (alt text, alignment, size)
6. Insert the image

The image appears inline in your text editor.

Adding Keepeek Assets Directly to Pages

Adding Images with Default Jahia Content

You can add Keepeek images directly to a page using Jahia's default media content:

1. In Page Composer, click "Add content" in the target area
2. Select "Jahia - Media → Image (Internationalized)"
3. In the image field, click to open the picker
4. Select "Keepeek" from the Source provider dropdown
5. Choose your image and optionally apply transformations
6. Click "Insert" and "Save"

This approach is useful for adding standalone images to pages without creating custom content types.

Adding Videos with Default Jahia Content

You can add Keepeek videos to pages in multiple ways:

Option 1: File Reference in Pages

1. In Page Composer, click "Add content" in the target area
2. Select "Jahia - Media → File reference" (Internationalized or Shared by all languages)
3. In the file field, click to open the picker
4. Select "Keepeek" from the Source provider dropdown
5. Choose your video
6. Click "Insert" and "Save"

Option 2: Video via Weak Reference in Custom Content

For custom content types (e.g., Article with video field):

1. Create or edit your content (e.g., Article)
2. In the video field (weak reference), click to open the picker
3. Select "Keepeek" as the source
4. Choose your video
5. Click "Insert" and "Save"

These methods work for any Keepeek video format and automatically handle video rendering on your site.

---

Displaying Keepeek Assets

Displaying Images in JSP Templates

Basic Image Display

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%-- Get the Keepeek asset reference --%>
<c:set var="Image" value="${currentNode.properties['image']}"/>

<%-- Display the image --%>
<c:if test="${not empty Image.node}">
    <c:set var="image" value="${Image.node}"/>
    <img src="${image.url}" 
         alt="${fn:escapeXml(image.displayableName)}"
         class="hero-image"/>
</c:if>

Image with Custom Size

<%-- Display at 800px width --%>
<img src="${image.getUrl(['w:800'])}" 
     alt="${fn:escapeXml(image.displayableName)}"/>

<%-- Display at 800x600 --%>
<img src="${image.getUrl(['w:800', 'h:600'])}" 
     alt="${fn:escapeXml(image.displayableName)}"/>

Supported parameters:

• w: or width: - Width in pixels
• h: or height: - Height in pixels

Displaying Images in React/JSX Templates

Basic Image Display

import { buildNodeUrl, jahiaComponent } from "@jahia/javascript-modules-library";

jahiaComponent(
  {...},({image}) => {
    if (!image) return null;
    
    const imageUrl = buildNodeUrl(image);
    
    return (
        <img 
            src={imageUrl} 
            alt={image.getDisplayableName()} 
        />
    );
});

Image with Custom Size

import { buildNodeUrl, jahiaComponent } from "@jahia/javascript-modules-library";

jahiaComponent(
  {...},({image}) => {
    if (!image) return null;
    
    // Build URL with width parameter
    const imageUrl = buildNodeUrl(image, { args: { w: 800 } });

    return (
      <img
        src={imageUrl}
        alt={image.getDisplayableName()}
      />
    );
  });

// With both width and height
const imageUrl = buildNodeUrl(image, { args: { w: 800, h: 600 } });

Parameter format:

buildNodeUrl(imageNode, { args: { w: 800 } })           // Width only
buildNodeUrl(imageNode, { args: { h: 600 } })           // Height only
buildNodeUrl(imageNode, { args: { w: 800, h: 600 } })   // Both

Displaying Videos

Video in JSP

<c:set var="video" value="${currentNode.properties['videoAsset'].node}"/>

<c:if test="${not empty video}">
    <video controls>
        <source src="${video.getUrl(['quality:720p'])}" type="video/mp4">
        <source src="${video.getUrl(['quality:480p'])}" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</c:if>

Video in React

import { buildNodeUrl, jahiaComponent } from "@jahia/javascript-modules-library";

jahiaComponent(
  {...},({videoNode}) => {
    if (!videoNode) return null;
    const hdUrl = buildNodeUrl(videoNode, { args: { quality: '720p' } });
    const sdUrl = buildNodeUrl(videoNode, { args: { quality: '480p' } });
    
    return (
        <video controls>
            <source src={hdUrl} type="video/mp4" />
            <source src={sdUrl} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    );
});

Available video qualities: 480p, 720p, 1080p, hls, preview

---

Retrieving Asset URLs via GraphQL

You can also retrieve Keepeek asset URLs programmatically using Jahia's GraphQL API. This is useful for headless CMS implementations or custom applications.

GraphQL Query

query GetKeepeekAssetUrl(
    $workspace: Workspace!,
    $uuid: String!
) {
    jcr(workspace: $workspace) {
        nodeById(uuid: $uuid) {
            title:displayName
            name
            url
        }
    }
}

Query Variables

{
  "workspace": "EDIT",
  "uuid": "fffffff1-90a2-44b4-a842-5c4815e38c6c"
}

Example Response

{
  "data": {
    "jcr": {
      "nodeById": {
        "title": "hdf-hero2",
        "name": "22834_c.0.js.1kw.am.0.0.1",
        "url": "https://iconeek-thumbnails.dam-broadcast.com/FIce8_vM0P77gly2A0vIioF3PxenJezcMl87NKCNg/crop?src=kpk%3A%2F%2Ficoneek%2F12799%2F100076%2F22834-o2xdfd6ufh.jpg&f=webp&x=0&y=712&cw=2048&ch=382&el=true&extension=.webp"
      }
    }
  }
}

Note: In this example, the returned URL is for a Keepeek image that was cropped during selection. The transformation parameters (crop coordinates, format, etc.) are encoded in the node name and applied when generating the URL.

Important limitation: Unlike JSP (getUrl(['w:800'])) or React (buildNodeUrl(image, { args: { w: 800 } })), GraphQL does not support dynamic transformation parameters like w: or h:. The url field returns the asset URL with only the transformations that were applied during asset selection (crop/resize in the picker). To get different image sizes via GraphQL, you would need to:

• Select and save multiple versions with different transformations, or
• Apply transformations client-side after fetching the URL

Use Cases

• Headless CMS: Fetch asset URLs for React, Vue, or Angular applications
• Custom integrations: Build custom galleries or sliders
• API consumers: Provide asset URLs to third-party services

---

Summary

Key takeaways:

• Keepeek assets are referenced, not duplicated in Jahia
• Transformations are non-destructive
• Use image.url for original, image.getUrl(['w:800']) for resized
• In React: buildNodeUrl(imageNode, { args: { w: 800 } })

For installation and configuration instructions, see the Administrator Guide.