We are working on a project where we need a decent level of control in CSS to implement the design but have been told by the dev team that the generated html is:
<div class="parsys_column cq-colctrl-lt1"> <!-- "cq-colctrl-lt1" defines width of child divs (33%) -->
<div class="parsys_column cq-colctrl-lt1-c0"><!--another components go here --></div>
<div class="parsys_column cq-colctrl-lt1-c1"><!--another components go here --></div>
<div class="parsys_column cq-colctrl-lt1-c2"><!--another components go here --></div>
</div>
<div style="clear:both"></div>
Looking into column controls I see you can change the cq-colctrl- class but I can't find answers to the following:
1, Can the clear both div (generated by CQ) be removed or only shown in author mode?
2, Can the column control be added within a component?
3, Can the column class be set per component or is it a global setting?
4, Can you control the styles of the column classes and override the generated CQ5 CSS (eg for a responsive site?)?
If you want embed column component in your component:
go crxdelite in the /apps/geometrixx-outdoors/components/colctrl
just create package via site admin and specify the above path and download package then you can see, how column component is created.
http://jenikya.com/blog/2013/01/editing-column-widths-in-cq5.html
but it's better look at that path is more clear.
Related
I've recently begun as an Ops dev on an AEM project, and we have a component (a table, that has a title, some copy and a field where the author can author some HTML to represent the contents of a table, with and elements. This, for whatever reason, has to sit within a component, called ArticleContainer. The title should have an H1 tag if the table is at the top of the page, and an H2 tag if it's anywhere lower down. I've tried using data-sly-test thus:
<sly data-sly-test.topOfPage="${table.firstPosition==true}">
<h1 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
</sly>
<sly data-sly-test="${!topOfPage}">
<h2 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h2>
</sly>
Now, this kind of processing has worked elsewhere where the component doesn't sit within a container, but it seems that if it's in a container it always picks up the non-topOfPage condition. I assume there might be a way to maybe do the test within the container component & pass it down into the table component? How would one go about this, or if it's not possible, is there another method by which one might achieve this?
There are two things here:
What does table.firstPosition return? You should be able to debug this in your Sling Model or POJO and probably need to adjust the logic to account for intermediary containers.
HTL/Sightly has a data-sly-element that allows you to change the HTML element based on an expression, you could make your code shorter (and easier to maintain):
<h1 data-sly-test="${table.headerCopy}" data-sly-element="${table.firstPosition ? 'h1' : 'h2'}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
I made an extension which display some data and I need to send them to my Layout.
In my file list.html I made a left column with some data, but finally I need this column in my layout.
there is some code :
Layouts/MyLayout.html
<f:render partial="Structure/Header" arguments="{_all}"/>
<f:render partial="Menus/Main" arguments="{_all}"/>
<!--the left column should be here -->
<f:render section="default" />
List.html
<f:layout name="Default"/>
<f:section name="main">
<aside>
<h2>Title</h2>
<ul>
<f:for each="{Mydata}" as="data">
<li>{data.title}</li>
</f:for>
</ul>
</aside>
</f:section>
That's why I would need to retrieve my extension data in my layout. It is possible to get I ?
If it's not possible, it is possible to get in list.html the name of the actual backend layout with some typoscript ?
There are multiple options to handle whether there are data for an additional column in layout.
first:
Even if in FLUID the files are stored in three folder (Layouts/, Partials/, Templates/) you are not forced to use it in that way. Meaning: you also can decide the layout in the template files.
In the default layout you just render a mainsection (from the template file). And in the different templates you decide whether a side column exist.
second:
extension data can be provided in multiple ways:
You can do the rendering completely in typoscript - or you use a content element with a plugin. The later would be more transparent for editors.
In your case you can provide a different BackEnd layout where editors can put a plugin in the additional column for that special 'layout'.
The rendering only occurs if that 'layout' is selected and a plugin is stored in that column.
When adding Mask content element it doesn't reflect some setting of the Appearance tab at front-end, like Layout, Frame, Space Before or After, also it doesn't include the uid of content element. How can I make usage of these fields?
By default Mask elements do not use standard wrapping for rendering the content element, fortunately you can easily access them within data variable which contains array of tt_content.
To check what fields of tt_content are available just put the line in FE template of your Mask element:
<f:debug>{data}</f:debug>
So you can make the wrapper div by yourself using simple Fluid syntax
<div class="
{f:if(condition: data.layout, then: 'frame-layout-{data.layout}')}
{f:if(condition: data.frame_class, then: 'frame-{data.frame_class}')}
{f:if(condition: data.space_before_class, then: 'frame-space-before-{data.space_before_class}')}
{f:if(condition: data.space_after_class, then: 'frame-space-after-{data.space_after_class}')} ">
<!-- your markup here -->
</div>
You can use the layouts like fluid_styled_content does - it takes care of headers, frames, spaceBefore, etc. This is also the easiest way.
First step: define the layout directories in TypoScript:
lib.maskContentElement.layoutRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Layouts/
lib.maskContentElement.partialRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Partials/
Second step: use the layout in your template:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<!-- your markup here -->
</f:section>
</html>
This also works for DCE (with corresponding TypoScript path)
Of course you can copy the layouts and partials to your theme path and make changes there, but I recommend sticking to the core functionality.
I am doing first steps with Fluid templates and grid elements in Typo3 8.7.12. So far so good I have a functioning fluid template that works just fine.
Now I wanted to integrate grid elements (first time using it).
I installed the "gridelements" extension and loaded the static template to the page template. I created some grid elements with the wizard. They are showing in the BE and I can fill them with content. All good so far.
Then I added the following to my SETUP (as found here):
tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
4 < lib.gridelements.defaultGridSetup
4 {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/fluid/templates/grid_2-1-2.html
}
}
}
Then I added the columns (column numbers are defined correctly) in my HTML template:
<div class="col-md-6 col-xs-12">
{data.tx_gridelements_view_column_10->f:format.raw()}
</div>
<div class="col-md-6 col-xs-12">
{data.tx_gridelements_view_column_11->f:format.raw()}
</div>
Is there anything more to it? Template is rendered but not the content of the Grid Element CE's.
Did you include the Gridelements static file containing the TypoScript setup for lib.gridelements.defaultGridSetup already?
if so, when checking your setup with the TypoScript Object Browser, what is the value of the userFunc within
tt_content.gridelements_pi1.20.10.userFunc
BTW: You might want to follow the instructions in that article to get a fully Fluid based output for your Gridelements: https://coders.care/blog/tutorial/gridelements-and-cms-8/
I got confused with the template files. I accidentally re-rendered the entire template within the template instead of the grid element template. Thanks to Joey‘s input I finally figured it out.
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.