How can I use a typolink-field at my FLUX Flexform-Configuration (Backend)
<f:section name="Configuration">
<flux:form id="home" options="{icon: 'Icons/Content/myicon.gif', group: 'Homepage'}">
<flux:field.input name="txtHeadline" label="Headline" />
<!-- ?? -->
<flux:field.input name="lnkTarget" label="Link">
<flux:wizard.link />
</flux:field.input>
</flux:form>
</f:section>
Main Section:
{namespace v=Tx_Vhs_ViewHelpers}
...
<v:link.typolink parameter="{parameter: section.item.url}">Beautiful link</v:link.typolink>
<!-- or -->
<v:uri.typolink parameter="{parameter: section.item.url}" />
That's my first steps with FLUID Powered TYPO3 and I have no idea?
Thanks for your help. I need this input field and the link wizard for the 'normal' output: <a href="mylink" class="xy" />
Jost is right. You need to pass the value from the field to the TypoLink ViewHelper from VHS.
Being partially compatible with the TYPO3 CMS Core typolink function, you need to pass your field value as parameter.
Having a form field like:
<flux:field.input name="lnkTarget" label="Link">
<flux:wizard.link />
</flux:field.input>
Example with the plain contents of a field:
<v:link.typolink configuration="{parameter: lnkTarget}" />
Example with custom overrides/additions to the field value:
<v:link.typolink configuration="{parameter: lnkTarget, additionalParams: '&print=1', title: 'Follow the link'}">
Click Me!
</v:link.typolink>
Notice where I placed {lnkTarget}.
You can look those up in the DocComent Block on the ViewHelpers:
https://github.com/FluidTYPO3/vhs/blob/development/Classes/ViewHelpers/Link/TypolinkViewHelper.php#L22
https://github.com/FluidTYPO3/vhs/blob/development/Classes/ViewHelpers/Uri/TypolinkViewHelper.php#L22
Being one of the maintainers, if you need further feedback-please raise an issue on the Github project if you have problems using it or join us on IRC (#fedext on Freenode)
Now in 2021 (Typo3 10) use:
<flux:field.input name="linktarget" label="Link" config="{renderType: 'inputLink'}"></flux:field.input>
And
<f:link.typolink parameter="{parameter: d.job.linktarget}">Click Me!</f:link.typolink>
Related
I'm working on a content element created with flux. Editors using this element can use some markers in some fields (e.g. ###region###). Therefore I would like to give information about the markers that can be used.
I checked CSH and the Flux documentation but couldn't find any solution. Does someone have an idea how to solve this?
My code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="Content"/>
<f:section name="Configuration">
<flux:form id="tt-teaser">
<flux:field.input label="Stoerer" name="stoerer"/>
<flux:field.input label="Title" name="title"/>
<flux:field.text label="Text" name="text" enableRichText="1"/>
<flux:field.input label="Button Text" name="buttonText"/>
</flux:form>
</f:section>
I'm using TYPO3 v10.4.13 and Flux v9.4.2.
You can add LL references for TCA descriptions, the tx_news extension uses this approach as well.
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addLLrefForTCAdescr('tt_content.pi_flexform.[extkey-with-no-lower-dash]_[CE-name]', 'EXT:your_ext/Resources/Private/Language/locallang_csh.xlf');.
As you can see you have to add this for each CE, also the id in the language file is "[field-ID].description".
I need to add extra filed to add some properties to the fal media element for example email id and phone number.How can I implement this as an IRRE field.Is it possible?
<f:section name="Configuration">
<flux:form id="teamAndNetwork" options="{group: 'FCE', Fluidcontent: {sorting: 150}}" label="Team And Network">
<flux:field.inline.fal name="settings.images" multiple="TRUE" maxItems="20" />
</flux:form>
</f:section>
I try to output 1 random image with VHS (version 2.4.0) RandomViewHelper v:iterator.random.
This is my code:
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="random-image" label="Random Image" options="{icon: 'Icons/Content/Example.gif', group: 'Joya'}">
<flux:field.input name="classname" label="Classname" />
</flux:form>
<flux:form.section name="images" label="Images">
<flux:form.object name="image" label="Image">
<flux:field.file name="imagesrc" label="Image" allowed="png,jpg" maxItems="1" size="1" />
</flux:form.object>
</flux:form.section>
</f:section>
<f:section name="Preview">
Random Image
</f:section>
<f:section name="Main">
<div class="random-image">
<v:iterator.random as="img" subject="{images}">
{img.image.imagesrc}
</v:iterator.random>
</div>
</f:section>
I added 3 images to test, but it always outputs the same image.
Edit: the output of random is cached. So it outputs another image after the cache is cleared.
Can I disable the cache just for this line of code?
https://fluidtypo3.org/viewhelpers/vhs/2.4.0/Iterator/RandomViewHelper.html
The solution is to use the VHS ViewHelper v:render.uncache and creatre a partial with the part that shall not be cached. Its not the best solution as you need an extra file. But right now the only other way I can think of is to use some Typoscript, and thats also something I want to avoid.
Another approach is to load the image true an ajax call, this way you can cache the page, but not the random image.
I try to create a Content Element to create links to other languages. I think this is possible with just a content element and I do not need a own view helper for this.
What I have so far:
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="landingpage-language" label="Landingpage Language" options="{icon: 'Icons/Content/Example.gif', group: 'My Ele'}">
<flux:field.input name="title" label="Title"/>
</flux:form>
<flux:form.section name="languages" label="Languages">
<flux:form.object name="language" label="Language">
<flux:field.input name="languagename" label="Language Visible Name"/>
<flux:field.select name="language" label="System Language" items="{
0:{0:'English',1:'&L=1'},
1:{0:'German',1:'&L=2'}
}" />
<flux:field.input name="url" label="URL">
<flux:wizard.link/>
</flux:field.input>
</flux:form.object>
</flux:form.section>
</f:section>
<f:section name="Preview">
Preview
</f:section>
<f:section name="Main">
<h2>{title}</h2>
<ul class="languages">
<f:for each="{languages}" as="langele">
<li><v:link.typolink configuration="{parameter: langele.language.url, additionalParams: langele.language.language}">{langele.language.languagename} {langele.language.language}</v:link.typolink></li>
</f:for>
</ul>
</f:section>
This works but I have 2 problems I can't solve yet:
1. additionalParams
Right now the select items have the values like &L=1. I had to do it this way cause I was not able to add the &L= directly in the typolink configuration. What I would like to have is something like that:
<v:link.typolink configuration="{parameter: langele.language.url, additionalParams: '&L='langele.language.language}">
With this I could have just the ID in the select-items.
Is this possible and if so, how?
2. select items Query
The documentation says it is possible to fill the items of the flux:field.select with a query. But I can not find any example. What I would like to have is all the languages configured in typo3 in this select-box.
Is this possible and if so, how?
something correction in fluxform:
<flux:field.select name="language" label="System Language"
items="{1:'English',2:'German'}" />
you can use fluid typolink instead of vhs viewhelper
<f:for each="{languages}" as="langele">
<li><f:link.typolink parameter="{langele.language.url}" additionalParams="&L={langele.language.language}">{langele.language.languagename} {langele.language.language}</f:link.typolink></li>
</f:for>
But as per your need, I suggest to you use fluid page link:
<f:for each="{languages}" as="langele">
<li><f:link.page pageUid="{langele.language.url}" additionalParams="{L:'{langele.language.language}'}">{langele.language.languagename} {langele.language.language}</f:link.page></li>
</f:for>
I have a simple menu generated by the Fluid Menu ViewHelper:
<v:page.menu useShortcutData="TRUE" levels="3" expandAll="1" class="menu" classActive="act" substElementUid="1" excludePages="12,13,3" />
There are multiple languages and each language has different pages hidden in the navigation that I would like to change in the "excludePages" part.
In Typoscript I would simply use a constants marker like {$exclude}. Adding the marker in fluid breaks the menu. What would be the way to achieve this in an inline Fluid setup like this?
There are different ways to get constant into Fluid.
1. Include form TypoScript
{f:cObject(typoscriptObjectPath: 'lib.myConstant')}
2. Save in settings from your ext.
plugin.tx_myext.settings {
myonstant = TEXT
myconstant = 1,2,3
}
3. Configuration in Page Template (the pure fluid way)
<f:section name="Configuration">
<flux:form id="mypage" options="{icon: 'Icons/Page/Standard.gif'}">
<flux:field.tree name="myConstantFromTRee" table="pages" parentField="pid" expandAll="0" multiple="1" minItems="0" maxItems="0" label="myConstantFromList" foreignLabel="title" size="10"/>
</flux:form>
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" name="main" />
</flux:grid.row>
</flux:grid>
</f:section>
And access it with {settings.myConstantFromTRee}.