[AEM Assets]{class="badge positive" title="AEM Assets에 적용됩니다)."}
Dynamic Media와 통합 integrate-dynamic-media
콘텐츠 관리자는 Dynamic Media와 통합되어 사용자가 애플리케이션 및 워크플로에서 사용할 Dynamic Media 렌디션을 찾아보고 미리 보고 선택할 수 있도록 합니다. 사용자는 사용 가능한 렌디션, 이미지 사전 설정, 스마트 자르기 중에서 선택하고, 지원되는 Dynamic Media 수정자를 적용하여 에셋 전달을 사용자 지정할 수 있습니다. 다음 섹션에서는 선택한 렌디션 정보를 처리하고 응용 프로그램에서 사용할 Dynamic Media 게재 URL을 생성하는 방법에 대해 설명합니다.
selectedMedia를 사용하여 Dynamic Media URL 작성 build-dynamic-media-urls-selectedmedia
사용자가 콘텐츠 관리자 Dynamic Media 패널에서 Dynamic Media 렌디션을 선택하면 선택한 렌디션 정보가 selectedMedia 개체에 반환됩니다. 호스트 애플리케이션은 이 정보를 사용하여 적절한 Dynamic Media 게재 URL을 생성해야 합니다.
selectedMedia 개체 selectedmedia-object
selectedMedia 개체가 선택한 자산에 추가되고 사용자가 선택한 Dynamic Media 렌디션에 대한 정보가 들어 있습니다.
'selectedMedia': Array<{
base?: string;
preset?: string;
smartcrop?: string;
modifiers?: Array<string>;
apiStyle?: 'scene7' | 'openapi'
}>;
selectedMedia 개체에 다음 속성이 포함되어 있습니다.
basepresetsmartcropmodifiersapiStylescene7) 또는 OpenAPI(openapi) 게재 스택을 사용하는지 여부를 나타냅니다.예를 들어 사용자가 기본 렌디션을 선택하고 rotate=90 수정자를 적용하면 반환된 객체는 다음과 비슷합니다.
selectedMedia: {
apiStyle: "scene7",
base: "scene7company/image",
modifiers: ["rotate=90"]
}
handleSelection 콜백에서 selectedMedia에 액세스 access-selectedmedia
렌디션을 선택하면 handleSelection 콜백에서 반환된 selectedAssets 페이로드에서 selectedMedia 개체를 사용할 수 있습니다.
async function handleSelection(assets) {
const dmUrls = [];
assets.forEach((asset) => {
if(asset?.selectedMedia){
const dmUrl = createDMUrlFromSelectedMedia(
asset.selectedMedia,
asset
);
dmUrls.push({ asset, dmUrl });
}
});
}
콜백은 선택한 에셋을 반복합니다. selectedMedia 개체가 포함된 각 자산에 대해 응용 프로그램은 선택한 렌디션 정보를 사용하여 Dynamic Media URL을 생성합니다.
Dynamic Media URL 생성 generate-dynamic-media-url
다음 함수는 선택한 렌디션 정보를 확인하고 사용할 Dynamic Media 게재 스택을 결정합니다.
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
);
}
};
이 함수는 다음 작업을 수행합니다.
- 선택한 렌디션에
apiStyle값이 있는지 확인합니다. - 선택한 렌디션이 OpenAPI 기능이 있는 Dynamic Media를 사용하는지 또는 Dynamic Media Scene7을 사용하는지 여부를 결정합니다.
- 선택한 게재 스택을 기반으로 적절한 URL 생성 함수를 호출합니다.
Dynamic Media OpenAPI URL 작성 build-openapi-url
다음 함수는 선택한 렌디션 정보 및 저장소 메타데이터를 사용하여 Dynamic Media OpenAPI URL을 생성합니다.
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;
};
이 함수:
- 게재 URL을 구성하는 데 필요한 저장소 정보를 검색합니다.
- 기본 OpenAPI 배달 URL을 만듭니다.
- 해당하는 경우 선택한 사전 설정 또는 스마트 자르기를 URL에 추가합니다.
- 사용자가 선택한 수정자를 추가합니다.
- 최종 OpenAPI 게재 URL을 반환합니다.
비디오 자산의 경우 함수는 Dynamic Media 비디오 플레이어 URL을 생성합니다.
Dynamic Media Scene7 URL 작성 build-scene7-url
다음 함수는 Dynamic Media Scene7 URL을 생성합니다.
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;
};
이 함수:
- 저장소 메타데이터에서 Scene7 도메인 및 자산 정보를 검색합니다.
- 선택한 기본 렌디션, 이미지 사전 설정 또는 스마트 자르기에 대한 URL을 만듭니다.
- 선택한 수정자를 추가합니다.
- 최종 Scene7 게재 URL을 반환합니다.
수정자 문자열 생성 generate-modifiers-string
다음 도우미 함수는 수정자 배열을 URL 호환 쿼리 문자열로 변환합니다.
export const getModifierString = (
selectedMedia
) => {
const { modifiers } = selectedMedia;
if (modifiers) {
const modifierString =
modifiers.length > 0
? modifiers.join('&')
: '';
return modifierString;
}
return null;
};
이 함수는 선택한 모든 한정자를 앰퍼샌드(&)로 구분된 단일 문자열로 결합합니다.
예:
[
'rotate=90',
'width=1200'
]
반환:
rotate=90&width=1200
생성된 문자열은 최종 Dynamic Media URL에 추가되며 에셋이 전달될 때 선택한 변형을 적용합니다.
추가 참조