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

Use of currentDesign.path in HTL for referencing images in AEM 6.4?

Avatar

Level 3

Since the recommendation to move designs from /etc/designs to /apps/settings/wcm/designs I would like to know what the preferred approach to making a request to an image in that design from HTL

eg we have two designs and in both there is a logo.jpg file. We want to be able to swap the design at the page level using the designPath

If we follow the guides in this Designs and the Designer   it generates a link with the /apps/settings/wcm.........../logo.jpg Shouldn't this be coming through some kind of proxy like etc.clientlibs?  If so how best to structure the design tree and how to reference the image from HTL?

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 1

We've solved this in a large upgrade project by creating a BindingsValueProvider service akin to com.day.cq.wcm.scripting.impl.WCMBindingsValuesProvider that wraps the currentDesign and the resourceDesign with a DesignWrapper class (implements Design) that overrides getPath() to return the /etc.clientlibs/ proxy-prefixed path instead, for any design paths under /apps/settings/wcm/design.

View solution in original post

5 Replies

Avatar

Level 1

You have to convert any CSS, JavaScript and static resources in the Design to a Client Library with allowProxy = true. for eg. check

/libs/settings/wcm/designs/dashboards/static

Restructuring guidance

For any Designs that are managed in SCM, and not written to at run-time via Design Dialogs.

  1. Copy the designs from the Previous Location to the New Location (/apps).
  2. Convert any CSS, JavaScript and static resources in the Design to a Client Library with allowProxy = true.
  3. Update references to the Previous Location in the cq:designPath property.
  4. Update any Pages referencing the Previous Location to use the new Client Library category (this requires updating Page implementation code).
  5. Update AEM Dispatcher rules to allow the serving of Client Libraries via the /etc.clientlibs/.. proxy servlet.
For any Designs that NOT managed in SCM, and modified run-time via Design Dialogs.
  • Do not move author-able Designs out of /etc.

Avatar

Level 3

Thanks. I have done some of the movement to proxied clientlibs which works for some of the css and js.

However the area I am really struggling with is how to reference an image in a design from an htl file. what is the actual code?

pre HTL it would be <%= currentDesign.getPath() + "/static/img/icon.gif %>

HTL i would have assumes something like

${currentDesign.path}/static/img/icon.gif

but if the designs are in /apps/settings/wcm/design/project the link generated is /apps/settings/wcm/design/project/static/img/icon.gif

Avatar

Correct answer by
Level 1

We've solved this in a large upgrade project by creating a BindingsValueProvider service akin to com.day.cq.wcm.scripting.impl.WCMBindingsValuesProvider that wraps the currentDesign and the resourceDesign with a DesignWrapper class (implements Design) that overrides getPath() to return the /etc.clientlibs/ proxy-prefixed path instead, for any design paths under /apps/settings/wcm/design.

Avatar

Level 3

Mark,

Thanks for this - I think I basically understand.

This does seem to be an omission from the core code. com.day.cq.wcm.api.designer.Design not having a getProxyPath() method

Avatar

Level 10

Nice response Mark - thank you!