I'm fairly new to typo3 and I have an issue that i don't find an explanation on how to change it. I'm sure there are already some helpful tutorials but i have issues finding them.
I am making a website and I have already made a template for fontend and backend.
It is a very simple test template that consists only of one slider and one text element.
The slider is handmade and should have the following layout:
<section class="custom-slider">
<img src="img1.jpg">
<img src="img2.jpg">
...
</section>
Thought easy, i have my slider place in my template, just need to add plain images.
but typo3 gives me:
<section class="custom-slider">
<div id="c3" class="frame frame-default frame-type-image frame-layout-0"><header><h2 class=""></h2></header><div class="ce-image ce-center ce-above"><div class="ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure class="image"><img class="image-embed-item" src="fileadmin/_processed_/1/2/csm_slider1_c3fdcdcaf5.jpg" width="600" height="187" alt="" /></figure></div></div></div></div></div></div></div>
</section>
Now i search how i can make my own custom elements or render existing elements different. I have found a lot of tutorials but they all are based on 'Extension Builder' or 'Builder' and require a custom extention. These don't seem to work on Typo3 8.7.x. Is there a different solution or can someone give me a good tutorial link?
Thank you in advanst:)
Ps: since i will have the same problem with styled text elements i would like to ask if there is a way to declare in the themplate how different predeterment elements are rendered?
In TYPO3 8.7 (I assume) your rendering is done with FSC (fluid_styled_content), so you have to understand the mechanism of FSC to render a CE (ContentElement).
As the name suggests Fluid is used. Fluid uses different templates organized in three categories (each with it's own folder):
Layouts
Templates
Partials
The call goes to a template (in the folder 'templates') where a tag can be inserted to use a specific layout (from floder 'Layouts'). if this tag is given the rendering starts with the given layout. In the layout different sections and partials can be called. Sections belong to the template, partials need to have an own partial file (in folder 'Partials').
You can override single files from the given declaration to individulize the behaviour.
In your example you may evaluate the field layout in layout, template and partial to avoid the default wrapping of any content (your images) in different div tags.
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'
}
}
"/>
How can I get the language selection from the footer into the header area - with introduction-package in TYPO3?
The introduction-package (technically a "TYPO3 distribution") uses the extension bootstrap-package for the layout.
If you have not already you would want to define Fluid paths for overwriting certain templates: https://docs.typo3.org/p/bk2k/bootstrap-package/11.0/en-us/Configuration/TypoScript/Index.html#page-fluidtemplate.
This would add your path to the chain of Fluid directories with highest priority.
To move around the language menu you'll want to change where this partial in included (finding the partial is easy by searching for recognizable HTML-code like IDs):
Partials/Page/Navigation/Language.html
You can include it in your overwritten
Partials/Page/Navigation/Main.html like this:
<f:render partial="Navigation/Language" arguments="{_all}" />
The Partials/Page/Navigation/Main.html is just an example. You can put it where you want. But you have to make sure that the used variable languagenavigation is passed to your partial. That is done by the arguments="...". For the example given this will work because it is itself included from the main Layouts/Page/Default.html and gets also arguments="{_all}".
To learn where languagenavigation comes from have a look at Configuration/TypoScript/setup.typoscript. You'll see it being filled by a DataProcessor inside a 10 = FLUIDTEMPLATE block.
I hope that helps. Feel free to tell us how you fare :) And don't be shy to ask any further questions.
I am new to TYPO3 and tried out a little bit so far. Now I am stucked or lets say unsure if it's the right way how I would do it.
First I created a simple HTML file and put some CSS to it. When this simple site was finished, I tried a transition to TYPO3 and created some templates + typoscript code. Now I want to work on the content, so I can create this with the integrated editor in TYPO3 and remove it from my templates.
My site would look like this:
Header
News Row (4 Columns)
Another Content Row (3 Columns)
Another Content Row (3 Columns)
Footer
Header and Footer are in partials and don't get any content from the editor. For the news section I would use a plugin. The other content rows have to be filled with content from the TYPO3 editor so my first thoughts are that my backend layout must look like this:
News Row (do I need 4 columns here or just one and let the plugin work?)
left1 center1 right1
left2 center2 right2
Would the backend layout look like this? And for the implementation with typoscript do I have to write all columns in variables e.g. center < styles.content.get... and create all elements in the columns there or can I outsource every variable in one file for example?
Hope you guys understand my problem and can give me some good hints!
About the news row, use just one column and then modify the EXT:news templates to arrange the list of news on four columns;
About the other two rows, you have several options, I think
1) each "cell" is defined in your backend layout, and then yes, you would need a separate colPos for each, something like (in TypoScript):
center < styles.content.get
left < styles.content.get
left.select.where = colPos = 1
2) Same as 1) but you can use the interesting approach used by Benjamin Kott on his sitepackagebuilder . To make it short, he defines a "dynamicContent" TypoScript object that can accept as parameters the colPos and even the id of a specific page. You just write in yout Fluid Template:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
And so forth for the others. If you want to discover more, visit https://www.sitepackagebuilder.com/ and create a package (that you could use as a base for your development or just "pillage" it ;) ) You will also find several videos on this topic on the Youtube TYPO3 official channel
3) same as 1) but using the EXT:vhs that adds a specific viewhelper to render the content of a colPos:
<v:content.render column="0" />
4) Last but not the least you can use EXT:gridelements to build content element that can have other content elements as children with a "backend_layout" approach. In this approach you just need one "cell" in your backend layout, and in this cell you will put a "gridelement" CE that is sub-divided into three separate columns and in each one you can put one or more content elements (same for the third row). This approach will give you the maximum flexibility
I hope I made myself clear, if I misunderstood your question, don't hesitate to write :)
I override Templates/Styles/TWB/Templates/Category/List.html to have the category menu behave exactly as the sidebar menu in the introduction package (submenus show only if main is selected).
If I add the static template "News Styles Twitter Bootstrap (news)" I'm almost there, it is not difficult to open the sub-categories only if the main category is selected (I need a massive amount of categories/sub-categories), but it should also be open when a sub is selected:
...
<f:if condition="{0:category.item.uid,1:category.item.uid} == {0:overwriteDemand.categories,1:category.children.{overwriteDemand.categories}.parent}">
<f:if condition="{category.children}">
<f:render section="categoryTree" arguments="{categories: category.children,overwriteDemand:overwriteDemand,class:''}" />
</f:if>
</f:if>
...
I do not know how to use {overwriteDemand.categories} as key to match the value ... can anybody point to the proper syntax
update: I tried to apply a custom ViewHelper as this post suggests, but using TYPO3 V7.6.16 got stuck with the error should be compatible with TYPO3\CMS\Fluid\Core\ViewHelper\AbstractConditionViewHelper::render(), so could not try working with the variable overwriteDemand.categories in another way ...
Dynamic access to variables in fluid is just possible since TYPO3 8. Check out the Whats New Slides here: https://typo3.org/download/release-notes/whats-new/ and search for "Dynamic variable name parts" in the PDF.
In TYPO3 7, the "vhs"-Extension provides a ViewHelper to do the same job but nesting a ViewHelper within an complex f:if-condition is even more difficult. If possible, try out TYPO3 8. If it's not possible you may write your own ViewHelper to solve this logical problem.
I need a custom styling for different elements (ul li, ol li, tables, links etc.) that are added through Typo3 RTE.
Thus I want to configure the RTE so every time some content is added through RTE it is outputted in the front-end with a wrapping div e.g. <div class="added_through_rte"></div>.
Is there a way to do it?
Put this in yout TypoScript setup
tt_content.text.20.wrap = <div class="added_through_rte"> | </div>
This wraps all content from the field "text" of the table tt_content.
If you use RTE in other records, you will have to configure each one in a simmilar way.
On the other hand, you can define custom CSS classes for the most elements (ul, ol, links, headers, paragraphs etc.) managed by a RTE. This is a lot more configure work but more flexibel, so you can have many different list classes to chose from etc. This is quite a huge topic and lot to research.