DocumentazioneAEMGuida utente

[AEM Assets]{class="badge positive" title="Si applica ad AEM Assets)."}

Integrazione con Dynamic Media integrate-dynamic-media

Ultimo aggiornamento: 7 luglio 2026
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Admin
  • User

Contenuto verificato si integra con Dynamic Media per consentire agli utenti di sfogliare, visualizzare in anteprima e selezionare le rappresentazioni di elementi multimediali dinamici da utilizzare nelle applicazioni e nei flussi di lavoro. Gli utenti possono scegliere tra rappresentazioni disponibili, predefiniti immagine, ritagli avanzati e applicare i modificatori Dynamic Media supportati per personalizzare la distribuzione delle risorse. Le sezioni seguenti descrivono come elaborare le informazioni di rendering selezionate e generare URL di consegna Dynamic Media da utilizzare nell’applicazione.

Creare URL Dynamic Media tramite selectedMedia build-dynamic-media-urls-selectedmedia

Quando un utente seleziona una copia trasformata Dynamic Media dal pannello Contenuto verificato Dynamic Media, le informazioni selezionate vengono restituite nell’oggetto selectedMedia. L’applicazione host deve utilizzare queste informazioni per generare l’URL di consegna Dynamic Media appropriato.

NOTE
Per utilizzare le rappresentazioni Dynamic Media selezionate da Content Advisor, l'applicazione host deve implementare la logica di generazione URL descritta in questa sezione. Le informazioni di rendering selezionate vengono restituite come metadati e non vengono convertite automaticamente in un URL di consegna.

oggetto selectedMedia selectedmedia-object

L’oggetto selectedMedia viene aggiunto alla risorsa selezionata e contiene informazioni sul rendering Dynamic Media selezionato dall’utente.

'selectedMedia': Array<{
    base?: string;
    preset?: string;
    smartcrop?: string;
    modifiers?: Array<string>;
    apiStyle?: 'scene7' | 'openapi'
}>;

L’oggetto selectedMedia contiene le proprietà seguenti:

Proprietà
Descrizione
base
La rappresentazione di base selezionata.
preset
Predefinito immagine selezionato.
smartcrop
Rendering di ritaglio avanzato selezionato.
modifiers
Uno o più modificatori Dynamic Media aggiunti dall’utente.
apiStyle
Indica se la rappresentazione selezionata utilizza lo stack di consegna Scene7 (scene7) o OpenAPI (openapi).

Ad esempio, quando un utente seleziona una rappresentazione di base e applica il modificatore rotate=90, l’oggetto restituito sarà simile al seguente:

selectedMedia: {
    apiStyle: "scene7",
    base: "scene7company/image",
    modifiers: ["rotate=90"]
}

Visualizza rappresentazioni Dynamic Media

Accedere a selectedMedia nel callback handleSelection access-selectedmedia

Una volta selezionata una rappresentazione, l’oggetto selectedMedia diventa disponibile all’interno del payload selectedAssets restituito dal callback handleSelection.

async function handleSelection(assets) {

    const dmUrls = [];

    assets.forEach((asset) => {

        if(asset?.selectedMedia){

            const dmUrl = createDMUrlFromSelectedMedia(
                asset.selectedMedia,
                asset
            );

            dmUrls.push({ asset, dmUrl });

        }

    });
}

Il callback scorre le risorse selezionate. Per ogni risorsa che contiene un oggetto selectedMedia, l’applicazione genera un URL Dynamic Media utilizzando le informazioni di rendering selezionate.

Generare un URL Dynamic Media generate-dynamic-media-url

La funzione seguente convalida le informazioni di rendering selezionate e determina quale stack di consegna Dynamic Media utilizzare.

const DM_OPENAPI_API_STYLE = 'openapi';
const DM_SCENE7_API_STYLE = 'scene7';
const ASSET_REPO_NAME_KEY = 'repo:name';
const ASSET_REPO_ID_KEY = 'repo:id';
const REPO_ID_KEY = 'repo:repositoryId';

export const createDMUrlFromSelectedMedia = (
    selectedMedia,
    repoMetadata
) => {
    if (!selectedMedia || !selectedMedia?.apiStyle) {
        throw new Error(
            'Selected media or api style is not valid'
        );
    }

    if (
        selectedMedia?.apiStyle === DM_OPENAPI_API_STYLE
    ) {
        return buildDMOpenApiUrl(
            selectedMedia,
            repoMetadata
        );
    } else if (
        selectedMedia?.apiStyle === DM_SCENE7_API_STYLE
    ) {
        return buildDMScene7Url(
            selectedMedia,
            repoMetadata
        );
    }
};

Questa funzione esegue le azioni seguenti:

  • Verifica che la rappresentazione selezionata contenga un valore apiStyle.
  • Determina se la rappresentazione selezionata utilizza Dynamic Media con funzionalità OpenAPI o Dynamic Media Scene7.
  • Chiama la funzione di generazione URL appropriata in base allo stack di consegna selezionato.

Creare un URL OpenAPI di Dynamic Media build-openapi-url

La funzione seguente genera un URL OpenAPI di Dynamic Media utilizzando le informazioni di rendering e i metadati dell’archivio selezionati.

export const buildDMOpenApiUrl = (
    selectedMedia,
    repoMetadata
) => {
    const { base, preset, smartcrop, modifiers }
        = selectedMedia;

    const dmDomain =
        repoMetadata?.[REPO_ID_KEY]
            .replace('author-', 'delivery-');

    const assetName =
        repoMetadata?.[ASSET_REPO_NAME_KEY];

    const assetId =
        repoMetadata?.[ASSET_REPO_ID_KEY];

    const seoName =
        assetName?.split('.')[0];

    const assetFormat =
        repoMetadata?.['dc:format'];

    let dmUrl;

    if (
        assetFormat &&
        assetFormat.startsWith('video/')
    ) {

        dmUrl =
`https://${dmDomain}/adobe/assets/${assetId}/play`;

    } else {

        dmUrl =
`https://${dmDomain}/adobe/assets/${assetId}/as/${seoName}.avif`;

        if (base) {
        } else if (preset) {
            dmUrl =
`${dmUrl}?preset=${preset}`;
        } else if (smartcrop) {
            dmUrl =
`${dmUrl}?smartcrop=${smartcrop}`;
        }
    }

    if (modifiers && dmUrl) {

        const modifierString =
            getModifierString(selectedMedia);

        if(base) {
            dmUrl =
`${dmUrl}?${modifierString}`;
        } else {
            dmUrl =
`${dmUrl}&${modifierString}`;
        }
    }

    return dmUrl;
};

Questa funzione:

  • Recupera le informazioni dell’archivio necessarie per creare l’URL di consegna.
  • Crea l’URL di consegna OpenAPI di base.
  • Aggiunge all’URL il predefinito selezionato o il ritaglio avanzato, se applicabile.
  • Aggiunge eventuali modificatori selezionati dall’utente.
  • Restituisce l’URL di consegna OpenAPI finale.

Per le risorse video, la funzione genera l’URL del lettore video Dynamic Media.

Creare un URL Scene7 per Dynamic Media build-scene7-url

La funzione seguente genera un URL Scene7 per Dynamic Media.

export const buildDMScene7Url = (
    selectedMedia,
    repoMetadata
) => {

    const {
        base,
        preset,
        smartcrop,
        modifiers
    } = selectedMedia;

    let scene7Domain =
        repoMetadata?.['repo:scene7Domain'];

    const scene7File =
        repoMetadata?.['repo:scene7File'];

    if (!scene7Domain || !scene7File) {
        return null;
    }

    scene7Domain =
        scene7Domain.startsWith('http://')
        ? scene7Domain.replace(
            'http://',
            'https://'
          )
        : scene7Domain;

    scene7Domain =
        scene7Domain?.endsWith('/')
        ? scene7Domain
        : `${scene7Domain}/`;

    let dmUrl;

    if (base) {

        dmUrl =
`${scene7Domain}is/image/${base}`;

    } else if (preset) {

        dmUrl =
`${scene7Domain}is/image/${scene7File}?$${preset}$`;

    } else if (smartcrop) {

        dmUrl =
`${scene7Domain}is/image/${scene7File}:${smartcrop}`;
    }

    if (modifiers && dmUrl) {

        const modifierString =
            getModifierString(selectedMedia);

        if (preset) {
            dmUrl =
`${dmUrl}&${modifierString}`;
        } else {
            dmUrl =
`${dmUrl}?${modifierString}`;
        }
    }

    return dmUrl;
};

Questa funzione:

  • Recupera le informazioni sul dominio Scene7 e sulla risorsa dai metadati dell’archivio.
  • Crea un URL per la rappresentazione di base selezionata, il predefinito immagine o il ritaglio avanzato.
  • Aggiunge eventuali modificatori selezionati.
  • Restituisce l’URL di consegna Scene7 finale.

Generare la stringa di modificatori generate-modifiers-string

La seguente funzione helper converte l’array di modificatori in una stringa di query compatibile con URL.

export const getModifierString = (
    selectedMedia
) => {

    const { modifiers } = selectedMedia;

    if (modifiers) {

        const modifierString =
            modifiers.length > 0
                ? modifiers.join('&')
                : '';

        return modifierString;
    }

    return null;
};

La funzione combina tutti i modificatori selezionati in una singola stringa separata da e commerciale (&).

Ad esempio:

[
    'rotate=90',
    'width=1200'
]

restituisce:

rotate=90&width=1200

La stringa generata viene aggiunta alla fine dell’URL Dynamic Media finale e applica le trasformazioni selezionate quando la risorsa viene consegnata.

Consulta anche

recommendation-more-help
experience-manager-cloud-service-help-main-toc