banner-hotfix-for-font-and-image-issues.jpg

Hotfix for font and image issues in Adobe Experience Manager 6.4

Nov 27th, 2018 | Mihir Mange

When we were migrating our component in Adobe Experience Manager 6.4, we found issues with loading images and font in our project. I created a client lib and included it within the apps->projectname->components->component->clientlibs. As per Adobe recommendation I added an allowproxy=true property so that it’s not exposed directly from the apps folder. When I loaded the clientlibs it loaded from etc.clientlibs and it worked fine. I added some images within the clientlibs folder and referred those image in my CSS file. I provided the relative path of the images. However, when the page loaded it failed to load the images. The image URL started with /etc.clienlibs/imagepath. When I changed it to the absolute URL i.e. apps/imagepath in dev tools it seemed to work fine.

I researched this problem and found some changes in the new concept to load font and images in clientlibs. In the previous version of Adobe Experience Manager client library was located in /etc/clientlibs in the repository while in the new version of Adobe Experience Manager client libraries are located under /apps and are accessible using a proxy servlet. Basically, Proxy servlet server allows to read content via /etc.clientlibs/ if all the allowProxy property is set to true.

You can access static resources via proxy, make sure to use a relative path in place of absolute paths. One more important point to note here is to put all the fonts and images under “resources” directory, else fonts and images will not load. So ideally the folder structure should be like:


font-1-300x189.jpg
font-2.jpg

As an example:

  • You have a client lib in /apps/initialyzer/clientlibs/clientlib-base
  • You have a static image in /apps/initialyzer/clientlibs/clientlib-base/resources/img/logo.png

Then you set the allowProxy property on clientlib-base to true.

  • You can then request /etc.clientlibs/initialyzer/clientlibs/clientlib-base.js
  • You can then reference the image via /etc.clientlibs/initialyzer/clientlibs/clientlib-base/resources/img/logo.png

Keep in mind that it is mandatory to declare folder name as a resource because you set allowproxy property and public sites never include anything from /apps and /libs.

References:

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/clientlibs.html