Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add smartcrops config #120

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add smartcrops config #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a156cf8
Add smartcrops config
Jan 14, 2025
89555e9
Use decorateExternalImages from the plugin
Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion scripts/aem-assets-plugin-support.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,22 @@ const blocks = ['video'];

// Initialize the aem-assets-plugin.
export default async function assetsInit() {
const { loadBlock, createOptimizedPicture } = await import(`${codeBasePath}/scripts/aem-assets.js`);
const {
loadBlock,
createOptimizedPicture,
decorateExternalImages,
} = await import(`${codeBasePath}/scripts/aem-assets.js`);
window.hlx = window.hlx || {};
window.hlx.aemassets = {
codeBasePath,
blocks,
loadBlock,
createOptimizedPicture,
decorateExternalImages,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anuraggupta228 , your smartcrop related changes should get in decorateExternalImages of the assets plugin and they would automatically get used here

smartCrops: {
Small: { minWidth: 0, maxWidth: 767 },
Medium: { minWidth: 768, maxWidth: 1023 },
Large: { minWidth: 1024, maxWidth: 9999 },
},
};
}
46 changes: 6 additions & 40 deletions scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
* @returns {boolean} Whether the element is an external image
* @private
*/
function isExternalImage(element, externalImageMarker) {

Check failure on line 88 in scripts/scripts.js

View workflow job for this annotation

GitHub Actions / build 

'isExternalImage' is defined but never used
// if the element is not an anchor, it's not an external image
if (element.tagName !== 'A') return false;

Expand Down Expand Up @@ -176,42 +176,6 @@
return picture;
}

/*
* Decorates external images with a picture element
* @param {Element} ele The element
* @param {string} deliveryMarker The marker for external images
* @private
* @example
* decorateExternalImages(main, '//External Image//');
*/
function decorateExternalImages(ele, deliveryMarker) {
const extImages = ele.querySelectorAll('a');
extImages.forEach((extImage) => {
if (isExternalImage(extImage, deliveryMarker)) {
const extImageSrc = extImage.getAttribute('href');
const extPicture = createOptimizedPicture(extImageSrc);

/* copy query params from link to img */
const extImageUrl = new URL(extImageSrc);
const { searchParams } = extImageUrl;
extPicture.querySelectorAll('source, img').forEach((child) => {
if (child.tagName === 'SOURCE') {
const srcset = child.getAttribute('srcset');
if (srcset) {
child.setAttribute('srcset', appendQueryParams(new URL(srcset, extImageSrc), searchParams));
}
} else if (child.tagName === 'IMG') {
const src = child.getAttribute('src');
if (src) {
child.setAttribute('src', appendQueryParams(new URL(src, extImageSrc), searchParams));
}
}
});
extImage.parentNode.replaceChild(extPicture, extImage);
}
});
}

/**
* Decorates all images in a container element and replace media urls with delivery urls.
* @param {Element} main The container element
Expand Down Expand Up @@ -242,11 +206,13 @@
*/
// eslint-disable-next-line import/prefer-default-export
export function decorateMain(main) {
// decorate external images with explicit external image marker
decorateExternalImages(main, '//External Image//');
if (window.hlx.aemassets.decorateExternalImages) {
// decorate external images with explicit external image marker
window.hlx.aemassets.decorateExternalImages(main, '//External Image//');

// decorate external images with implicit external image marker
decorateExternalImages(main);
// decorate external images with implicit external image marker
window.hlx.aemassets.decorateExternalImages(main);
}

// decorate images with delivery url and correct alt text
decorateDeliveryImages(main);
Expand Down
Loading