Hämta bild från Mediaflow

Exempel på hur man kan hämta ut en bild från en Mediaflow modul.

Marketplace modul

1. Hämta ut sidans innehåll via REST-API:ets /contentnodes endpoint för sidan.
2. Hitta den första Mediaflow modulen med en bild.
3. Plocka ut första bilden.
4. Returnera bildens properties som är intressanta.

getMediaflowImage.js

import RestApi from '@sitevision/api/server/RestApi';

/**
 * @typedef {Object} MediaflowImage
 * @property {string} displayName - The display name of the image file
 * @property {string} alt - Alt text for the image
 * @property {string} caption - Caption text for the image
 * @property {string} mimeType - MIME type of the image (e.g., "image/webp")
 * @property {string} URI - Relative URI path to the image
 * @property {string} URL - Full URL to the image
 */

/**
 * Get a Mediaflow image from contentnodes via the REST-API.
 * @param {import('@sitevision/api/types/javax/jcr/Node').Node} node - The page or article node.
 * @returns {MediaflowImage|undefined} The Mediaflow image object or undefined if not found
 */
function getMediaflowContentNodeImage(node) {
  return RestApi
    .get(node, 'contentnodes')
    .body
    ?.find((content) => content?.appId === 'marketplace.mediaflow.mediaflow')
    ?.properties
    ?.customContent
    ?.find(({ type }) => type === 'image')
    ?.properties
    ?.image;
}

/**
 * Get a Mediaflow image from page content
 * @param {import('@sitevision/api/types/javax/jcr/Node').Node} node - The page or article node.
 * @returns The Mediaflow image or undefined if not found
 */
export default function getMediaflowImage(node) {
  const image = getMediaflowContentNodeImage(node);
  if (!image) return undefined;
  return {
    uri: image.URI,
    alt: image.alt,
  };
}

Behöver man skala om bilden (vilket man ofta behöver) måste man även hämta ut noden.

1. Hämta ut sidans innehåll via REST-API:ets /contentnodes endpoint för sidan.
2. Hitta den första Mediaflow modulen med en bild.
3. Plocka ut första bilden.
4. Hämta ut bildnoden via dess URI, skala om den och plocka ut den omskalade bildens URI.
5. Returnera den omskalade bildern URI och de andra som är intressanta.

getMediaflowImage.js

import Utils from '@sitevision/api/server/Utils';
import RestApi from '@sitevision/api/server/RestApi';
import Properties from '@sitevision/api/server/Properties';

const imageScaler = Utils.getImageScaler(300, 5000);

/**
 * @typedef {Object} MediaflowImage
 * @property {string} displayName - The display name of the image file
 * @property {string} alt - Alt text for the image
 * @property {string} caption - Caption text for the image
 * @property {string} mimeType - MIME type of the image (e.g., "image/webp")
 * @property {string} URI - Relative URI path to the image
 * @property {string} URL - Full URL to the image
 */

/**
 * Get a Mediaflow image from contentnodes via the REST-API.
 * @param {import('@sitevision/api/types/javax/jcr/Node').Node} node - The page or article node.
 * @returns {MediaflowImage|undefined} The Mediaflow image object or undefined if not found
 */
function getMediaflowContentNodeImage(node) {
  return RestApi
    .get(node, 'contentnodes')
    .body
    ?.find((content) => content?.appId === 'marketplace.mediaflow.mediaflow')
    ?.properties
    ?.customContent
    ?.find(({ type }) => type === 'image')
    ?.properties
    ?.image;
}

/**
 * Get a scaled image URI.
 * @param {MediaflowImage} image - The Mediaflow image object.
 * @returns {string|undefined} The scaled image URI or undefined if not found
 */
function getScaledImageUri(image) {
  const node = ResourceLocatorUtil.getNodeByUrl(image.URI);
  if(!node) return undefined;
  return Properties.get(imageScaler.getScaledImage(node), 'URI');
}

/**
 * Get a Mediaflow image from page content
 * @param {import('@sitevision/api/types/javax/jcr/Node').Node} node - The page or article node.
 * @returns The Mediaflow image or undefined if not found
 */
export default function getMediaflowImage(node) {
  const image = getMediaflowContentNodeImage(node);
  if(!image) return undefined;
  return {
    uri: getScaledImageUri(image) || image.URI,
    alt: image.alt,
  };
}

Legacy portlet

1. Leta upp alla portlets på sidan av typen mfpimage (Bild från MediaflowPro).
2. Plocka ut bildnodens ID (imageID) från första MFP portleten som hittas.
3. Därefter kan man hämta ut bildens properties som vanligt.

getMFPImage.js

import NodeTreeUtil from '@sitevision/api/server/NodeTreeUtil';
import Properties from '@sitevision/api/server/Properties';

export default function getMFPImage(node) {
  const portlets = NodeTreeUtil.findPortletsByType(node, 'mfpimage');
  if (portlets.isEmpty()) return undefined;

  const imageId = Properties.get(portlets.get(0), 'imageID');
  return imageId && {
    uri: Properties.get(imageId, 'URI'),
    alt: Properties.get(imageId, 'alt'),
  };
}

Behöver man skala om bilden (vilket man ofta behöver) måste man även hämta ut noden.

1. Leta upp alla portlets på sidan/artikeln av typen mfpimage (Bild från MediaflowPro).
2. Plocka ut bildnodens ID (imageID) från första MFP portletens properties.
3. Plocka ut bildnoden från via dess ID.
4. Skala om bilden.
5. Därefter kan man hämta ut bildens properties, där URI först hämtas från den omskalade bilden om det gick bra och alt-text hämtas från ursprungsbilden.

getMFPImage.js

import Utils from '@sitevision/api/server/Utils';
import NodeTreeUtil from '@sitevision/api/server/NodeTreeUtil';
import Properties from '@sitevision/api/server/Properties';
import ResourceLocatorUtil from '@sitevision/api/server/ResourceLocatorUtil';

const imageScaler = Utils.getImageScaler(300, 5000);

function getScaledImage(id) {
  const node = ResourceLocatorUtil.getNodeByIdentifier(id);
  if(!node) return undefined;
  return imageScaler.getScaledImage(node);
}

export default function getMFPImage(node) {
  const portlets = NodeTreeUtil.findPortletsByType(node, 'mfpimage');
  if (portlets.isEmpty()) return undefined;

  const imageId = Properties.get(portlets.get(0), 'imageID');

  return imageId && {
    uri: Properties.get(getScaledImage(imageId) || imageId, 'URI'),
    alt: Properties.get(imageId, 'alt'),
  };
}