Component Placeholders
DeprecatedAvailable since version 1.5.0
Why is the deprecated?
Since AEM 6.2, you should be developing for UI, which does not have the image-placeholder paradigm.
Purpose
ACS AEM Commons adds some helper CSS classes for creating nice component placeholders for the AEM Classic UI:
Extra Icons
cq-ad-placeholder
- Money, Advertisementscq-audio-placeholder
- Audiocq-ul-placeholder
- Listcq-dl-placeholder
- Definitions
Sizes
cq-block-placeholder
: 192px heightcq-block-sm-placeholder
: 96px heightcq-block-lg-placehodler
: 384px height
All are 100% width.
Note that sizes can be used with the standard placeholder classes as well:
cq-gadget-placeholder
cq-chart-placeholder
cq-image-placeholder
cq-video-placeholder
cq-text-placeholder
cq-title-placeholder
cq-file-placeholder
cq-feedlink-placeholder
cq-list-placeholder
cq-carousel-placeholder
cq-reference-placeholder
cq-flash-placeholder
cq-teaser-placeholder
cq-table-placeholder
How To Use
JSP Tag (Since 1.6.0)
You can also use a custom JSP tag to add placeholders.
First, add the declaration:
<%@ taglib prefix="wcm" uri="http://www.adobe.com/consulting/acs-aem-commons/wcm" %>
Then use the placeholder
tag. To use a class-based placeholder:
<wcm:placeholder classNames="cq-audio-placeholder cq-block-placeholder" ddType="audio" />
Placeholders can also be arbitrary text or HTML:
<wcm:placeholder>You need to specify the column widths.</wcm:placeholder>
In Touch UI mode, the component’s title will always be output instead of any custom placeholder text or image.
Manual
<wcmmode:edit>
<%=
Placeholder.getDefaultPlaceholder(slingRequest, component,
"<img class='cq-dl-placeholder cq-block-placeholder' src='/etc/designs/default/0.gif'/>"
)%>
%>
</wcmmode:edit>
Sample
Yields the following ..
Notes
Drag and Drop can be easily added to these placeholders via the extra CSS class cq-dd-<drop-target name>
where drop-target name
matches the cq:EditConfig
dropTarget node name.