Location for Site-Wide Images

Question

As part of our 6.5 LTS upgrade, we are looking to do some clean-up and re-locate images under /etc/designs/default

This indicates they should go under /apps/settings/wcm/designs/default (https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/deploying/restructuring/all-repository-restructuring-in-aem-6-5#default-designs)

However, this indicates they should go under /apps/XXX/clientlibs/clientlib-site/resources/images (https://experienceleague.adobe.com/en/docs/experience-manager-65-lts/content/implementing/developing/introduction/clientlibs#locating-a-client-library-folder-and-using-the-proxy-client-libraries-servlet)

What is the correct location? I should note, we have 5 sites on our system, each with their own /apps directory (/apps/site1, /apps/site2, etc). The images I am looking to re-locate are used on all 5 sites so not sure where I should put them.

rampai · Accepted Answer

Hi ​@AEM_Dan,The decision will depend on where the images are going to be used.If your images are part of a design (e.g., background images, design placeholders, patterns used in policies) → /apps/settings/wcm/designs/default.If your images are static assets used by front-end code (e.g., logos, banners, icons, site-wide assets) → clientlib under /apps/<site>/clientlibs/....Key distinction: Design images are used internally by AEM in templates/policies; clientlib images are used by the browser.Now, if your images are used by frontend code, and, you do not want to make themsite specific then you could create a shared clientlib that can then be embedded in each of the site specific clientlib.Shared clientlib structure:/apps/shared/clientlibs/clientlib-site  - css/  - js/  - resources/    - images/      logo.png      banner.jpg  - cq:ClientLibraryFolder    - categories = ["shared.clientlib.site"]Site specific clientlib structure:/apps/site1/clientlibs/clientlib-site1  - css/  - js/  - cq:ClientLibraryFolder    - categories = ["site1.clientlib"]    - embed = ["shared.clientlib.site"] <-- key stepWherein:/apps/shared/clientlibs/clientlib-site → images + CSS/apps/site1/clientlibs/clientlib-site1 → site CSS/JS onlyThanks,Ram

EstebanBustamante · Answer

Hi,For images, the recommended location is under /apps/../clientlibs/resources/images. If you want to create a new global/shared client library to avoid duplicating images, that is perfectly fine. Alternatively, you can place the images within each project’s client library—this largely depends on your project taxonomy and governance model.Keep in mind that the path /xxx/settings/wcm/designs/default was originally intended to store designs (which could include images) associated with static templates and design_dialog prior to AEM 6.4 (https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/authoring/siteandpage/default-components-designmode). The document you shared indicates that, if some functionality still relies on these configurations, they can be moved to /apps/settings/wcm/designs/default so that the Sling Resource Merger can properly resolve them. However, this will not apply in AEM 6.5 LTS.Hope this helps.

Shared clientlib structure:

Site specific clientlib structure:

Shared clientlib structure:

Site specific clientlib structure:

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded