Is it possible to modify or customize the aem grid classes that are printed on the component tag? We use a different grid system but would like to use the layout feature in the editor for the easy configuration of columns.
The current output would be:
component-name parbase aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--phone--12
In my case I want to modify the output to be:
component-name parbase grid-4 grid-mobile-12
Is there any way to overlay or configure this functionality?
PS: We are using AEM 6.3
Views
Replies
Total Likes
You can override most AEM components. There should be no reason why this would be any different. We have an article on building a custom grid component. However - its for use on a page to hold other components - not for tags. I am not completely sure what you mean by holding tags.
I assume you want to change something in the AEM UI as opposed to a component for use in an AEM site.
Views
Replies
Total Likes
Here is the article on creating a custom grid component for use within an Page template.
Creating a custom Touch UI Grid Component for Adobe Experience Manager
Views
Replies
Total Likes
We currently have an implementation of such a component where columns are defined and components dragged into them.
I wish to avoid that approach as it comes with a lot of overhead responsive-wise for the authors.
I am using the aem grid now but leveraging the layout section of the editor which works great. I wish to however change the output css classes without rewriting the aem code that reads the cq:responsive node under the component. For that I am wondering if these css class outputs can be configured somehow.
Right now I am using a work around in scss where I extend the css classes aem outputs from the css grid we are using in our project.
It would be cleaner if I can just make it output the correct css classes though.
As far as I can tell the css classes are generated in a java class and printed using the following file on line 10
/libs/wcm/foundation/components/responsivegrid/responsivegrid.html
<div data-sly-use.api="com.day.cq.wcm.foundation.model.responsivegrid.ResponsiveGrid"
data-sly-use.allowed="com.day.cq.wcm.foundation.AllowedComponentList"
class="${api.cssClass} ${allowed.cssClass}">
<sly data-sly-test.isAllowedApplicable="${allowed.isApplicable}"
data-sly-test="${isAllowedApplicable}"
data-sly-use.allowedTemplate="/libs/wcm/foundation/components/parsys/allowedcomponents/allowedcomponents-tpl.html"
data-sly-call="${allowedTemplate.allowedcomponents @ title=allowed.title, components=allowed.components}"></sly>
<sly data-sly-test="${!isAllowedApplicable}"
data-sly-repeat.child="${api.paragraphs}"
data-sly-resource="${child.path @ resourceType=child.resourceType, decoration='true', cssClassName=child.cssClass}"></sly>
<sly data-sly-test="${!isAllowedApplicable && wcmmode.edit}"
data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/responsivegrid/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}" />
</div>
Views
Replies
Total Likes
I have not done that - if other have - please provide a comment.
Views
Replies
Total Likes
Have you tried any alternative to this?
Views
Replies
Total Likes
Were you able to find a solution for this?
Thanks
Views
Replies
Total Likes
This is what renders the classes on the .aem-Grid, not the parent component tag 2 levels up with .aem-GridColumn. I'm still looking for how to customize that part unfortunately.
Views
Replies
Total Likes
Views
Likes
Replies