I'm trying to access fluid page configuration inside a template.
In detail: I added a selectfield to my page layout
<flux:flexform.field.select name="pageIcon" items="{
0: {0: '{f:translate(key: \'pageIconNone\')}', 1: ''},
1: {0: '{f:translate(key: \'pageIconFacebook\')}', 1: 'fa-facebook-square'},
2: {0: '{f:translate(key: \'pageIconFlickr\')}', 1: 'fa-flickr'},
3: {0: '{f:translate(key: \'pageIconGooglePlus\')}', 1: 'fa-google-plus-square'}
}"/>
So far so good. Now I render a menu an want to access this field pageIcon
<v:page.menu.directory pages="{settings.pid.socialMenu}" useShortcutData="TRUE" classFirst="first" classLast="last">
<f:for each="{menu}" as="mainPage" iteration="iteration">
<i class="fa {mainPage.pageIcon} fa-2x"></i><b>{mainPage.title}</b>
</f:for>
</v:page.menu.directory>
But this does not work. After some debugging I noticed, that this configuration seems to be stored in tx_fed_page_flexform which holds an XML array.
How can I access the XML values inside my fluid template?
Markus
The easiest way:
https://fluidtypo3.org/viewhelpers/flux/master/Form/DataViewHelper.html
<flux:flexform.data table="pages" field="tx_fed_page_flexform" uid="{pageUid}" as="pageData">
{pageData.pageIcon}
</flux:flexform.data>
The reason for not extracting this data always, is simply for performance. There is another way which you may not be aware of:
<flux:flexform.field.select name="pages.pageIcon" items="{...}" />
If you name your field thusly (the pages. prefix is the key since we are using the pages DB table) your value will be saved into a field in the record itself (a field you must then add in the SQL schema / TCA, and enable value sliding in the rootline if you desire it). If a field with this prefix is saved, Flux will insert its value directly into the pages record which means you can immediately access it using for example {pageVariable.icon} without the need for the flux:flexform.data ViewHelper.
UPDATE
For more recent version of Flux, try:
<flux:form.data table="pages" field="tx_fed_page_flexform" uid="{pageUid}" as="pageData">
{pageData.pageIcon}
</flux:form.data>
Related
I have been using FluidTYPO3 (flux and vhs) to run TYPO3 web pages for many years now. With TYPO3 10, I face a major problem. I'll quickly write about my use case, how I solved it so far, and then what the problem with 10 LTS is.
Use case:
I want to have a content element template for a timeline using FluidTYPO3/flux. Each "point" on the timeline should have a heading, some text, and optionally some images. All in all, pretty basic (or so I thought).
Solution so far (TYPO3 <= 9):
Timeline elements are sections. Images are using flux:field.file.
Simplified example of the form:
<flux:form id="timeline" label="timeline">
<flux:form.section name="timeline" label="Timeline">
<flux:form.object name="element" label="Element">
<flux:field.input name="title" label="Heading" />
<flux:field.text name="label" label="Text" enableRichText="TRUE" />
<flux:field.file name="images" label="Pictures" allowed="jpg,png,svg" multiple="TRUE" maxItems="50" size="5" showThumbnails="TRUE"
/>
</flux:form.object>
</flux:form.section>
</flux:form>
With this, multiple elements can be created on the timeline and each of them can have its own set of images.
Problem in TYPO3 10:
The technology (TCA group fields to select files) that flux:field.file relies on was deprecated in TYPO3 9 and removed in TYPO3 10, see this notice. That is one of the reasons why flux:field.file was also marked deprecated and is going to be removed in TYPO3 10.
The TYPO3 deprecation notice says to use FAL relations instead. Of course, flux can also do this with flux:field.inline.fal. However, you can only have one FAL field per FlexForm. This precludes its usage in sections, since all sections would share the same images. This limitation is known for some time - see this bug report for example - but has never been fixed. It is also why I initially chose not to use FAL fields. Using bare file fields was the recommended workaround at the time.
Question:
So - how is everyone doing it? How to add multiple image fields to a flexform in TYPO3 10?
EDIT: More specifically, how to add an image field as part of a Flexform section that can contain multiple child records (resulting in multiple image fields)?
Note: I know that I can get a "file-like" field back by using an input field with inputLink renderType (like this), but as far as I can tell it does not allow to link multiple images.
I've found another workaround that might be appropriate for some use cases:
It is still possible to use flux:field.file fields if the useFalRelation parameter set to true, even on TYPO3 v10 LTS and in repeatable FlexForm sections. This will then put sys_file record IDs separated by comma into the field instead of raw filenames. They can be used as src argument for, e.g., f:image just as well as the filename, so the CE templates itself do not have to be modified. All existing CEs that had useFalRelation set to false need to be migrated though so that the filenames are replaced with sys_file UIDs.
This is a bit better than the inputLink workaround since it allows multiple images.
It seems the only workaround with TYPO3 core onboard methods is to go for a Flux-Container having a single column containing simple default "Text with image" or "text with media" elements and then to just ignore additional options of those elements and to just render the necessary fields.
With Gridelements this is called a "functional container", since the container determines the behaviour and appearance of those elements, while the elements themselves don't have to be custom elements at all.
Additionally this makes access to the content of those elements - i.e. while doing a search query - much easier.
The bug report you mentioned already contains the solutions, since the actual problem described there is that FAL fields in a flexform are using the same name.
So instead of
image
according to the bug report there should be
settings.foreground.image
which is of course not working, since the dot is part of the path but not of the name.
But actually replacing the dot with an underscore and using some suffixes within the same flexform tab should do the trick:
settings.foreground.settings_foreground_image
settings.foreground.settings_foreground_image2
This way you make sure that
The field names within your flexform are unique
The actual field name within the sys_file_reference entry already contains the full path information
You can use that information to fetch images i.e. within a DataProcessor and still know the FlexForm field they actually belong to
Sitll I would recommend to fully move away form FlexForms (and thus Flux too) in favor of "real" fields in the database table.
If you currently use the flux:field.file element at typo3 10 with the useFalRelation=1 you can replace it by the flux:field element. It is not deprecated and works in combination with the flux:form.object element
Following example:
<flux:field.file
allowed="jpg,png,svg,gif"
exclude="false"
label="MyLabel"
name="myname"
showThumbnails="1"
useFalRelation="1"
maxItems="1"
minItems="1"
/>
Can be replaced with:
<flux:field type="input" name="myname" label="MyLabel"
config="{
type: 'group',
size: 1,
internal_type: 'db',
use_fal_relation: 1,
allowed: 'sys_file',
maxitems: 1,
minitems: 0,
show_thumbs: 1,
appearance: {
elementBrowserAllowed: 'jpg,png,svg,gif',
elementBrowserType: 'file'
}
}
"/>
I have a dynamic list < li >
<li>The user name "marcus001" is already taken.</li>
I need to replace this whole line with:
<li><p>Thank you for your registration</p></li>
I'm not sure how to proceed, I have tried to replace this whole DOM, but because the username "marcus001" is dynamic, it always fails to target.
Notes:
This is generated by a system so there are no id's associated.
Try using id attribute to target the <li>
<li id="message">The user name "marcus001" is already taken.</li>
Change it using javascript
document.getElementById("message").innerHTML="<p>Thank you for your registration</p>";
im trying to add an additional source to the dce-image for further actions e.g. an alternate source to perform some JavaScript actions.
The wanted output should look like this:
<img src="path/to/foo.png" data-altsrc="path/to/bar.png">
The problem is the dce i'm using - its iterating through the "images" like this:
<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference">
<f:image src="{fileReference.uid}" treatIdAsReference="1" />
</f:for>
So if I would insert multiple images to this I have no real relation between the images where i know which one is the normal-source and which one is the alternate source.
So there was the possibility to create a section and add two fields for images which we can restrict to one image per field. But there again is the for-loop which doesn't allow me to access the source of the second image for the first image.
It should be a visible relation between these images for the user which is working with the dce.
Im trying to achieve something like this:
<f:for each="{field.images}" as="images">
<!-- want to achieve something like this -->
<f:image image="{images.foo.src}" data-altsrc="{images.bar.src}">
<!-- thats the normal way iterating through images -->
<f:for each="{images.foo}" as="image">
<f:image image="{image}" />
</f:for>
</f:for>
Another idea would be to iterate first through the alternate images and store them into an array and on the main-images to access them but I have no idea if this is even possible also this will restrict the usability of the dce for the user.
Is there any way to achieve this with dce-fluid ?
Thanks in advance
Well, i guess you could extend the sys_file_reference table to add a relation from there. So you would have nested relations (never done that, so you would have to try).
You would also have to add the field to the tca type in the place you need it, that could be a little tricky. Have a look at Tca types overrides.
You could extend the sys_file_reference table with a field "alternative_reference" and add the neccessary TCA setup. Then you would have to retrieve the FileReferences via the FileRepository and use sys_file_reference as foreign table (and of course the sys_file_reference uid as identifier).
FileRepository::findByRelation(
'sys_file_reference',
'alternative_reference',
$uidOfActualSysFileReferenceRecord
);
The other possibility would be a completely new record with 2 different sys_file_reference relations. That record (eg: tx_ext_domain_model_imageset) would have an image_default and image_alternate field, both would be configured as file_relations. That would work for sure.
$defaultImages = FileRepository::findByRelation(
'tx_ext_domain_model_imageset',
'image_default',
$uidOfRecord
);
$alternativeImages = FileRepository::findByRelation(
'tx_ext_domain_model_imageset',
'image_alternative',
$uidOfRecord
);
I assume you do have knowledge about creating records, models, tca and so on.
I personally would prefer the second way, it is more clean and does not change the core-table structures.
Also there is a second image generation viewhelper, that might suite your needs better
<img src="{f:uri.image()}" data-altsrc="{f:uri.image()}" />
But the best way to go might be to write your own ViewHelper for that purpose. You could pass your Object (ImageSet) as parameter and handle all logic there. So your template would be simpler and easier to read/work on.
You have to use data attribute of fluid viewhelper and then get the uri of the image with inline call. Here is how to achieve :
<f:image src="{fileReference.uid}" data="{altsrc: '{f:uri.image(src: \'{fileReference.uid}\', treatIdAsReference: 1}" treatIdAsReference="1"/>
This should do the work.
I want to display some contentlement on every page with fluid templates. My solution was to create a typoscript element like:
lib.my.myelement= CONTENT
lib.my.myelement {
table = tt_content
select {
pidInList = 15
where = uid=99
}
}
and then use it in the fluid template with:
<f:cObject typoscriptObjectPath="lib.my.myelement" />
Another way is to create them directly in fluid with v:content.render or v:content.get. In this example I get all content elements on one page and save them in an array:
<v:variable.set name="contentElements" value="{v:content.get(column:'0', limit:'3', pageUid:'9', render:'FALSE')}" />
I can not use the first solution, cause on this page there will be much different languages ( I could use it, but every time a new language is added I would have work to declare all new uids of the new elements in typoscript).
The second solution would work better, cause when you translate a page the element uids change, but the pageUid does not change. But here I have the problem that I don't just need all elements, I also have to identify each element.
Here is how I use the second solution:
<v:variable.set name="contentElements" value="{v:content.get(column:'0', limit:'3', pageUid:'9', render:'FALSE')}" />
<f:for each="{contentElements}" as="contentElement" iteration="footerIteration">
<div class="column{v:math.sum(a: footerIteration.index, b: 1)}">
<v:content.render contentUids="{0:contentElement.uid}" />
</div>
</f:for>
As you can see, I use every element the same way.
lets create a simple case:
I have a page with the pageUid = 10 (this page will have translations). On every of this translations will be 3 elements. Lets say 1 element got the "id" (with id I mean something how I can identify this element) title1 and the other two elements have the id list1 and list2.
And my question now is How could I access for example list1?
I hope its understandable, if something is not clear please leave a comment.
Edit: I could use the same order on every translation for the elements and then check the iteration in the for-loop (see the second solution) to identify them. But I wonder if there a better, cleaner way.
One part of my meteor application is a semi-collaborative table where users can edit different rows at the same time. When a user is editing a row, the static text values need to switch to input boxes so that the values can be edited and then saved. I would like a template/helper to do this, essentially I want:
<td>
{{#if iAmEditing}}
{{foo}}
{{else}}
<input type="text" name="foo" value="{{foo}}">
</td>
except that there are several columns with different values of "foo" and I don't want to copy and paste this several times. What's the right way to approach this with templates and helpers?
Another approach might be to use the HTML5 contenteditable attribute. Either way, what is the right way to template these values with handlebars?
You should be able to integrate with Bootstrap Editable
For reference, an answer to the original question...
As of today, handlebars partials can't accept anything other than a context argument, but helpers can. Hence. you can define a helper that sets up the context for the template:
Coffeescript:
Handlebars.registerHelper "eventCell", (context, field, editable) ->
return new Handlebars.SafeString(
Template._eventCell
_id: context._id
field: field
value: context[field]
editable: editable
)
Template:
<template name="_eventCell">
<td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
{{value}}
</div></td>
</template>
Then, I just use the following to render each field:
{{eventCell this "province" iAmEditing}}
I ended up integrating with bootstrap editable, so the template is a little different than my original question. Also, I'm not sure if this is the best way to do it, but it's a lot cleaner than what I had before.
meteor-editable is a new project implementing something like x-editable, but nicely integrated with Meteor reactivity. Unfortunately inline editing is not supported yet (you have to use a popover the way it's set up now).