Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How embed happening in Html library Manger?

Avatar

Level 2

Hi,

 

As and when we include multiple categories(a.css and b.css) in the embed property as cq:clientLibraryFolder. node how Html library Manager working/ Which method basically concating these categories programmatically on page load? any idea would help? we are getting the required categories but not able to combine? Is there any way to combine the use Html library Manager API method?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @vasgurug ,

What I have understood from your question is that your are trying to use HTML Library Manager to combine different clientlibs.

 

However, may be you can try to embed different clientlib categories to combine them into 1 and then can use HTML Library Manager for minification and compression.

This blog explains very well how you can embed different categories and then enable minification.

https://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Note:

  • Embed property is NOT transitive – If Clientlib A embed B and B embed C, then only A and B will be included in the page,but C won't. In order to include Clientlib C, it must be added to the embed property of A as well.
  • The order of embed is important for the CSS and JS to work properly.

You can use this tool as well https://adobe-consulting-services.github.io/acs-aem-tools/features/clientlibs-optimizer/index.html

Hope this helps!!

Thanks

View solution in original post

7 Replies

Avatar

Community Advisor

What exactly is the ask @vasgurug ? Are you facing any issue with Embed in ClientLibs ? Could you please elaborate little on your issue ?

 

Thanks

Veena

Avatar

Correct answer by
Community Advisor

Hi @vasgurug ,

What I have understood from your question is that your are trying to use HTML Library Manager to combine different clientlibs.

 

However, may be you can try to embed different clientlib categories to combine them into 1 and then can use HTML Library Manager for minification and compression.

This blog explains very well how you can embed different categories and then enable minification.

https://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Note:

  • Embed property is NOT transitive – If Clientlib A embed B and B embed C, then only A and B will be included in the page,but C won't. In order to include Clientlib C, it must be added to the embed property of A as well.
  • The order of embed is important for the CSS and JS to work properly.

You can use this tool as well https://adobe-consulting-services.github.io/acs-aem-tools/features/clientlibs-optimizer/index.html

Hope this helps!!

Thanks

Avatar

Level 2

Thanks for reply, Above all a scenarios in the end we have to add an embed property to the node with a.css and b.css but I am looking at how htmllinrarymanger API combing these 2 classes? which method actually doing this?

I saw the acs commons also but the end returning all required dependency tree as a list to embed as node but not mentioned to combine the categories ??

 

Looking in htmllinrarymanger after getter categories Is there any way to combine after this method  for the required categories ??

Collection<ClientLibrary> clientLibraries =        htmlLibraryManager.getLibraries(new String[]{resourcesClientLibrary}, LibraryType.CSS, true, true);

 

Avatar

Community Advisor

Hi @vasgurug ,

What is your end goal that you want to achieve.

Are you trying to concatenate a.css and b.css?

Why are you trying to find the implementation for HTMLLibraryManager?

Avatar

Level 2
My end goal i have list of categories and dependencies using this https://adobe-consulting-services.github.io/acs-aem-tools/features/clientlibs-optimizer/index.html to merge as a single request on page load with out adding embed property through library manager

Avatar

Community Advisor

Hi @vasgurug , Is there any particular reason why you don't want to used embed property which is the recommended and OOTB way of merging clientlibs and results in a single call.

 

I don't think HTML Library Manager is doing the merging, it is used for minification and compression.

 

Another way could be outside AEM, to create gulp task to combine all the css and js files and write them in 1 category.