I started to create my own Typo3 extension which is based on FluidTemplating. I created Layouts, Templates and Custom Content Elements. The site works fine regarding showing the template. I am also able to see the backend grid for the content elements. But when I add new Content Elements (no matter if Typo3 predefined ones or the ones from my extension), the placeholder within the template does not get replaced with the specific content.
I defined the grid in the Page-Template as follows:
<f:section name="Configuration">
<flux:form id="frontpage">
<!-- Insert fields, sheets, grid, form section objects etc. here, in this flux:form tag -->
</flux:form>
<flux:grid>
<!-- Edit this grid to change the "backend layout" structure -->
<flux:grid.row>
<flux:grid.column colPos="0" colspan="12" name="main" />
</flux:grid.row>
<flux:grid.row>
<flux:grid.column colPos="1" colspan="4" name="footerleft" label="Footer Left" />
<flux:grid.column colPos="2" colspan="4" name="footermiddle" label="Footer Middle" />
<flux:grid.column colPos="3" colspan="4" name="footerright" label="Footer Right" />
</flux:grid.row>
</flux:grid>
</f:section>
And add them into the sections like this:
<f:section name="Main">
<div class="section">
<v:content.render column="0" />
</div>
</f:section>
<f:section name="Footer">
<div class="footer">
<v:content.render column="1" />
<v:content.render column="2" />
<v:content.render column="3" />
</div>
</f:section>
Has anyone some ideas/suggestions/experience? What could be the problem here or how I am able to debug the problem?
Thanks a lot in advance.
Including the template if you haven't done so:
Here is an example:
typo3 styles.content.get not working
Related
I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.
I'm using Schema.org and RDFa to mark up an HTML page. I have an image as follows:
<div class="image_container">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
What is the correct way to mark this up, so that:
1. big_whatever.jpg (the link href) becomes the contentUrl
2. The alt property becomes the description
3. The title property becomes the name
4. Ideally, I would also like the alt property to be the caption, as well.
Now, this is easy enough with JSON-LD, but I prefer to use RDFa for this particular case. This is what I've got so far:
<div class="image_container" vocab="http://schema.org/" typeof="ImageObject">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
It is not possible to use the values of alt or title attributes in RDFa.
You could duplicate them with "hidden" meta elements:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
<meta property="name" content="Whatever" />
</div>
If you don’t need a property on the img element (e.g., for thumbnailUrl), you could use property+content to save one meta element:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" property="name" content="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
</div>
Thanks to the content attribute, RDFa won’t use the src value. But I think it’s more clear to go with the first snippet.
I want to add custom header with buttons to my sap.m.Dialog.
In the documentation you can see that sap.m.Dialog has an aggregation customHeader which takes any "Bar-Interface" (currently sap.m.Bar or sap.m.Toolbar).
For example like this:
<Dialog>
<customHeader>
<Bar>
<contentLeft>
<Button />
</contentLeft>
<contentMiddle>
<Title text="Dialog Title" />
</contentMiddle>
</Bar>
</customHeader>
<!-- Content here -->
</Dialog>
I'm trying to setup a small Website based von TYPO3 6.2 with flux and fluid Templating Engine.
I use:
fluid: 6.2
flux: 7.2.1
fluidpages 3.2.3
fluidcontent 4.2.2
fluidcontent_core: 1.1.3
vhs: 2.3.3
builder: 0.18.0
I have used the builder for a provider extension and I have managed to make page templates and also content templates.
But when I try to use a content element as content container it will not be rendered.
I have read similar articles here and also the documentation but I can't find a solution.
The static TS of fluidcontent_core is included.
I have also copied the line
$GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'] = array('fluidcontentcore/Configuration/TypoScript/');
in AdditionalConfiguration.
Following is my minimal Conatinertemplate:
div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="btContainer" label="UpContainer" options="{group: 'stth'}">
</flux:form>
<flux:grid>
<flux:grid.row>
<flux:grid.column name="Col2" label="Inhalte" />
</flux:grid.row>
</flux:grid>
</f:section>
<f:section name="Preview">
<!-- If you wish, place custom backend preview content here -->
</f:section>
<f:section name="Main">
<div class="container addedClass">
<f:comment><flux:content.render area="Col2" /></f:comment>
<v:content.render column="Col2" />
</div>
</f:section>
I have tried to render content with v:content.render or flux:content.render but there is no output.
I get only an empty
<div class="container addedclass"> </div>
In the Backend I see the Container, labeled "Inhalte" and I can add Content. (Content is Standard CE like Text or header)
Can someone please give me a hint, what I can do next.
Thank you in advance
st
Update 1.7.2015
I have set up a new TYPO3 6.2 und used the preconfigured 'site kickstarter'.
As I added the AdditionalConfiguration.php I saw there where 2 lines to copy:
// fluidcontent_core
$GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'] = array('fluidcontentcore/Configuration/TypoScript/');
$GLOBALS['TYPO3_CONF_VARS']['FE']['activateContentAdapter'] = 0;
The second one is new to me.
Then I copied my Container-template in the my Provider extension: and YES - it works.
I tried to use the second line of AdditionalConfiguration in my original TYPO3 instance -- but there it does not work. So I am not shure if this was the solution. Perhaps someone has more insight?
Again: Thank you for your help.
I have seen some mistake in your code:
Your <flux:grid> code is outside of <flux:form> It should be inside. Please check entire code below:
<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="btContainer" label="UpContainer" options="{group: 'Custom elements'}">
<flux:grid>
<flux:grid.row>
<flux:grid.column name="Col2" style="width: 100%" label="Inhalte" ></flux:grid.column>
</flux:grid.row>
</flux:grid>
</flux:form>
</f:section>
<f:section name="Preview">
<flux:widget.grid />
</f:section>
<f:section name="Main">
<div class="container addedClass">
<flux:content.render render="1" area="Col2" />
</div>
</f:section>
</div>
Hey guys and Happy Easter,
I am working on an extension for the backend and would like to have the standard toolbar with save and cancel options in my own extension.
So I would like to have sth. like this:
I am kind of an newbie and would like to have a little more detailed answer.
Found something about addToolbarItem on the internet but don't know how to use it.
Edit:
Unfortunately I have to work with TYPO3 v4.5 and pibase extension and don't have enough time to change the version to 6.2.9...
Thanks!
Assuming you're using TYPO 6.x+ and Extbase!
You can put additional elements from your view to the layout by additional sections. most probably your view now looks like:
<f:layout name="Default"/>
<f:section name="content">
<h1>Foo</h1>
</f:section>
so add new section i.e.:
<f:layout name="Default"/>
<f:section name="myButtons">
<f:be.buttons.icon icon="actions-document-new" title="Create new Foo" />
</f:section>
<f:section name="content">
<h1>Foo</h1>
</f:section>
And finally in your Default.html layout render your section in proper place (set it as optional, otherwise you'll get an exception if missing!)
....
<div class="typo3-docheader-buttons">
<div class="left">
<f:render section="myButtons" optional="true"/>
</div>
<div class="right">
<span title="Reload" class="t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-refresh"> </span>
<f:be.buttons.shortcut />
</div>
</div>
....
Of course this way you can also set other elements like <f:be.menus.actionMenu>, <f:be.pageInfo /> etc, or even just your text labels.
Check ViewHelpers in typo3/sysext/fluid/Classes/ViewHelpers/Be/ for some ready to use elements.