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

function getMediaflowContentNode(node) {
  return RestApi
    .get(node, 'contentnodes')
    .body
    .find(content => content?.appId === 'marketplace.mediaflow.mediaflow');
}

function getImage(mediaflow) {
  return mediaflow
    ?.properties
    ?.customContent
    ?.find({ type } => type === 'image')
    ?.properties
    ?.image;
}

export default function getMediaflowImage(node) {
  const mediaflow = getMediaflowContentNode(node);
  if(!mediaflow) return undefined;
  const image = getImage(mediaflow);
  return image && {
    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);

function getMediaflowContentNode(node) {
  return RestApi
    .get(node, 'contentnodes')
    .body
    .find(content => content?.appId === 'marketplace.mediaflow.mediaflow');
}

function getImage(mediaflow) {
  return mediaflow
    ?.properties
    ?.customContent
    ?.find({ type } => type === 'image')
    ?.properties
    ?.image;
}

function getScaledImageUri(image) {
  const node = ResourceLocatorUtil.getNodeByUrl(image.URI);
  if(!node) return undefined;
  return Properties.get(imageScaler.getScaledImage(node), 'URI');
}

export default function getMediaflowImage(node) {
  const mediaflow = getMediaflowContentNode(node);
  if(!mediaflow) return undefined;
  const image = getImage(mediaflow);
  return image && {
    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'),
  };
}