This project aims to provide additional tools that can be used for developing applications on Adobe AEM.
- AEM 5.6.1 - The tools in this project have been confirmed on AEM 5.6.1.
- NOTE: For CQ 5.5, please see the CQ5.5 release tag at https://github.com/Velir/AEM-Toolbox/releases/tag/CQ5.5.
mvn install
- builds package and installs on local CQ instance (http://localhost:4502)mvn install -Daem.application.server=<custom host or ip> -Daem.application.port=<custom port> -Daem.admin.username=admin -Daem.admin.password=pass123
- builds package and installs on custom CQ instance
The image servlet in this project provides some additional image resizing capabilities aimed to ease developing for responsive design.
Hard Width/Height Resizing: Provides a way to serve images with exact height and width dimensions without images becoming distorted. Images will first be scaled proportionally until its closes edge hits the target dimensions. Then the extra fat will be cropped from the top/bottom or left/right of the image.
- Configure any smartimage widgets to use 'hardwidth' and/or 'hardheight' properties.
- Modify image url to use '.size.img' selectors.
http://<host>:<port>/content/<app>/en/.../image.size.img.jpg
Max Width/Height Resizing: Provides a way to serve images no larger than the configured dimensions. Images are scaled proportionally.
- Configure any smartimage widgets to use 'maxwidth' and/or 'maxheight' properties.
- Modify image url to use '.size.img' selectors.
http://<host>:<port>/content/<app>/en/.../image.size.img.jpg
Min Width/Height Resizing: Provides a way to serve images no smaller than the configured dimensions. Images are scaled proportionally.
- Configure any smartimage widgets to use 'minwidth' and/or 'minheight' properties.
- Modify image url to use '.size.img' selectors.
http://<host>:<port>/content/<app>/en/.../image.size.img.jpg
Skip Image Resizing: At times you may want to reuse an image configured by a content author, but skip the image resizing. This can come in handy in an image gallery where the thumbnail is resized, but the larger image is not.
- Modify image url to use '.no.size.img' selectors.
http://<host>:<port>/content/<app>/en/.../image.no.size.img.jpg
Multiple Configurations: When dealing with responsive design, we need multiple image resizing configurations. The provided image servlet does this by using custom configured suffixes at the end of the image url. This provides the developer the option of creating any number of resizing configurations needed.
- Create an sling:OsgiConfig at
/apps/<app>/config/com.aem.toolbox.servlet.image.ImageServlet.xml
similar to the configuration below. You will want to add your custom configurations to the valid.devices area. By default the image servlet is configured with phone and tablet.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="sling:OsgiConfig"
valid.devices="[phone,tablet]" />
- Configure any smartimage widgets to use device specific configurations. (ex. phonehardheight, phonehardwidth, phonemaxheight, phonemaxwidth, phoneminheight, phoneminwidth, tablethardheight, tablethardwidth, etc.)
- Modify image url to use device specific configuration '.size.img.phone'.
http://<host>:<port>/content/<app>/en/.../image.size.img.phone.jpg
. Note: You will need to implement custom code for choosing the correct suffix for your image url.
This project comes with additional widgets for making content entry easier for content editors.
- Add the aem toolbox widgets clientlibrary to your page.
<cq:includeClientLib categories="aem.toolbox.widgets.all"/>
. Note: You will only need to include this clientlibrary on pages served in author runmode.
This widget allows content authors to enter collections of data within a single dialog. This widget extends smartimage in order to get its image capabilities.
- Configure your component dialog so it contains a widget of xtype 'structuredmultilist' at the dialog panel level. This is the same location you would configure a 'smartimage' widget.
- hideImage: If set to true the image area of this widget will be hidden so content authors can not configure images.
- maxSlides: This allows you to limit the number of items a content author can add to the widget collection.
- fileReferencePrefix: This allows you to specify a name for the nodes that get created under your component resource node. (ex. slide1, slide2, slide3, etc.)
- defaultSlideName: Provides some default text for displaying in the header dropdown as new items are added to the collection.
- settings: A cq:WidgetCollection that allows you to configure widgets for any additional data you need collected for each item.
- useForDisplay: Can be added to any widget in the settings area to indicate that the value added to this widget should be used in the header dropdown.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
height="500"
title="Carousel"
xtype="dialog">
<items jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<carouselslides
jcr:primaryType="cq:Widget"
ddGroups="media"
requestSuffix=".img.png"
title="Carousel Slides"
hideImage="{Boolean}false"
maxSlides="5"
fileReferencePrefix="./slide$"
defaultSlideName="New Slide"
xtype="structuredmultilist">
<settings jcr:primaryType="cq:WidgetCollection">
<featuretext
jcr:primaryType="cq:Widget"
anchor="94%"
allowBlank="{Boolean}false"
fieldLabel="Feature Text"
defaultValue="Featured"
itemId="featureText"
name="featureText"
xtype="textfield"/>
<title
jcr:primaryType="cq:Widget"
anchor="94%"
allowBlank="{Boolean}false"
fieldLabel="Title"
itemId="title"
name="jcr:title"
useForDisplay="{Boolean}true"
xtype="textfield"/>
<summarytext
jcr:primaryType="cq:Widget"
anchor="94%"
fieldLabel="Summary Text"
itemId="summaryText"
name="summaryText"
xtype="textfield"/>
<linktext
jcr:primaryType="cq:Widget"
anchor="94%"
fieldLabel="Link Text"
defaultValue="Read the study"
itemId="linkText"
name="linkText"
xtype="textfield"/>
<linklocation
jcr:primaryType="cq:Widget"
anchor="94%"
emptyText="Start typing the name of a research page..."
fieldLabel="Link Location"
rootPath="/content/rwjf/en"
itemId="linkLocation"
name="linkLocation"
xtype="autocompletefield"/>
</settings>
<cropConfig jcr:primaryType="nt:unstructured">
<aspectRatios jcr:primaryType="cq:WidgetCollection">
<aspect1
jcr:primaryType="nt:unstructured"
text="314 x 236"
value="314,236"
checked="true"/>
</aspectRatios>
</cropConfig>
</carouselslides>
</items>
</items>
</jcr:root>
Allows content authors to search a YouTube channel for embedding videos into a component. This aims to eliminate the need for content authors to have to leave the AEM content editing experience for finding YouTube videos.
- Configure your component dialog so it contains a widget with xtype 'youtubesearch'.
- youtubeUser: Allows us to configure a user for limiting what videos are searched against.
<youtubevideo
jcr:primaryType="cq:Widget"
fieldLabel="Youtube Video"
name="./videoId"
youtubeUser=""
xtype="youtubesearch"/>
Provides additional buttons in the RTE for wrapping content in a
tag. This plugin contains two features 'blockquote' and 'linedblockquote'.
- Configure your RTE with the blockquote plugin and configure any features you want enabled.
- Add blockquote and linedblockquote css styles to the RTE and website pages.
<content jcr:primaryType="cq:Widget" externalStyleSheets="[/css/wysiwyg.css]" hideLabel="{Boolean}true" name="./content" title="Freeform Content" xtype="richtext"> <rtePlugins jcr:primaryType="nt:unstructured"> <blockquote jcr:primaryType="nt:unstructured" features="*"/> </rtePlugins> </content>
Blockquote HTML Structure:
<blockquote> <p>Blockquote Content</p> </blockquote>
Lined Blockquote HTML Structure:
<blockquote> <p class="lined">Lined Blockquote Content</p> </blockquote>
Extends the AEM format plugin to allow specifying formats that will change both the wrapping tag and css class on that tag.
- Configure your RTE with the formatting plugin.
- formats: A cq:WidgetCollection where you configure the different formats for this plugin. You can specify the tag and classNames to be applied for each format.
- blacklist: A cq:WidgetCollection where you configure what tags should be ignored by this plugin. For example, we may not want this plugin to switch out the td tag of a table.
- Add any css styles needed for the formats configured.
<content jcr:primaryType="cq:Widget" externalStyleSheets="[/css/wysiwyg.css]" hideLabel="{Boolean}true" name="./content" title="Freeform Content" xtype="richtext"> <rtePlugins jcr:primaryType="nt:unstructured"> <formatting jcr:primaryType="nt:unstructured" features="*"> <formats jcr:primaryType="cq:WidgetCollection"> <h1 jcr:primaryType="nt:unstructured" description="Heading 1" tag="h1"/> <h1articletitle jcr:primaryType="nt:unstructured" classNames="[article-title]" description="Heading 1 Article Title" tag="h1"/> <h1supertitle jcr:primaryType="nt:unstructured" classNames="[super-title]" description="Heading 1 Super Title" tag="h1"/> <h2 jcr:primaryType="nt:unstructured" description="Heading 2" tag="h2"/> <h3 jcr:primaryType="nt:unstructured" description="Heading 3" tag="h3"/> <p jcr:primaryType="nt:unstructured" description="Paragraph" tag="p"/> </formats> <blacklist jcr:primaryType="cq:WidgetCollection"> <ul jcr:primaryType="nt:unstructured" tag="ul"/> <ol jcr:primaryType="nt:unstructured" tag="ol"/> <li jcr:primaryType="nt:unstructured" tag="li"/> <blockquote jcr:primaryType="nt:unstructured" tag="blockquote"/> <table jcr:primaryType="nt:unstructured" tag="table"/> <tbody jcr:primaryType="nt:unstructured" tag="tbody"/> <td jcr:primaryType="nt:unstructured" tag="td"/> <tfoot jcr:primaryType="nt:unstructured" tag="tfoot"/> <th jcr:primaryType="nt:unstructured" tag="th"/> <thead jcr:primaryType="nt:unstructured" tag="thead"/> <tr jcr:primaryType="nt:unstructured" tag="tr"/> </blacklist> </formatting> </rtePlugins> </content>