Is there a fluid pendant to the new TS option Feature: #82091 - Allow inline rendering in SVG content object or a workaround?
The only solution i see(atm) is to write my own viewhelper or i am missed something?
You can define a typoscript object in your root template:
lib.inlineSvg = SVG
lib.inlineSvg {
renderMode = inline
src.field = src
}
(see SVG cObject). Then in your fluid you can do this:
<f:cObject typoscriptObjectPath="lib.inlineSvg" data="{src: 'path/to/the/file.svg'}" />
Of course this limits you to cases in which you have the actual path to the image. You cannot (directly) reference a FAL object. You can, however, just get the files public url:
<f:cObject typoscriptObjectPath="lib.inlineSvg" data="{src: filereference.publicUrl}" />
or
<f:cObject typoscriptObjectPath="lib.inlineSvg" data="{src: filereference.originalResource.publicUrl}" />
depending on whether you are in Extbase cotext or not (see the documentation). You can also pass all other options the cObject takes in the data argument of the f:cObject ViewHelper (e.g. width).
Related
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 want to add class="img-responsive" to the markup of each media element of text/media content elements.
I found a corresponding section in fluid_styled_content/Resources/Private/Partials/MediaGallery.html and added the class for test: Bingo.
<f:section name="media">
<f:media
file="{column.media}"
width="{column.dimensions.width}"
height="{column.dimensions.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
additionalConfig="{settings.media.additionalConfig}"
class="img-responsive"
/>
</f:section>
I guess adding a custom partialRootPath with lib.fluidContent.partialRootPaths.200 and copying all the partials would work as documented.
However, I'd like to avoid copying 20 partials from fluid_styled_content just to change one line in one file.
Can I override a single partial of TYPO3 fluid_styled_content, or even better a single section of the partial?
Using TYPO3 7.6
Set lib.contentElement.partialRootPaths.200 = EXT:your_extension_key/Resources/Private/Partials/ in TypoScript as described in the question.
Copy a single partial file MediaGallery.html from fluid_styled_content to EXT:your_extension_key/Resources/Private/Partials/
Have enough breaks during work to avoid stackoverflow.
I'm using Typo3 6.2.15 with bootstrap_package.
I have inserted language bar after shopping basket. How to insert after navbar instead?
lib.navigation.basket.20 < lib.language
Screenshot from DOM: link
Have a look at template EXT:bootstrap_package/Resources/Private/Layouts/Page/Default.html. There you should see the lines
<f:render partial="Navigation/Main" arguments="{_all}"/>
<f:cObject typoscriptObjectPath="lib.navigation.breadcrumb"/>
You can overwrite this template in TypoScript constants:
page.fluidtemplate.layoutRootPath = EXT:yourExt/Resources/Private/Layouts/Page/
In the new template you now can make any modifications you want.
The best will be, you create a new TypoScript object for the basket:
lib.basket = TEXT
lib.basket.value = whatever
Then, you can arrange the contents in the layout template as you wish:
<f:cObject typoscriptObjectPath="lib.basket"/>
<f:render partial="Navigation/Main" arguments="{_all}"/>
<f:cObject typoscriptObjectPath="lib.language"/>
Don't assign the TypoScript objects to other TypoScript objects (like you do with "lib.navigation.basket.20 < lib.language"), modify the templates (but do not modify the original templates EXT:bootstrap_package, create your own template storage)!
In the typo3 template I'm using the following line to get the last 5 added items from the backend and this works.
<f:cObject typoscriptObjectPath="lib.lastaddeditmes" />
Only the number of item I want to have it flexible and set in the fluid template. So for example like below where the qty is set to three, is this possible?
<f:cObject typoscriptObjectPath="lib.lastaddeditmes(3)" />
You can't do that in the view, instead you can make a copy of lib.lastaddeditmes in TypoScript and then use it in other place like:
lib.lastaddeditmesOnlyThree < lib.lastaddeditmes
lib.lastaddeditmesOnlyThree.someSetting.items = 3
and in view:
<f:cObject typoscriptObjectPath="lib.lastaddeditmesOnlyThree" />
Remember that TypoScript is just a configuration syntax (not programming language) so it shouldn't give you any huge performance drop.
Should be simple enough. I'm trying to add an input field to a fluid partial in the extension "yag" (yet another gallery).
Input: <f:form.textfield id="live-filter" name="test" />
Output: <input id="live-filter" type="text" name="test" />
Somehow the code get's filtered along the way, but I don't know why.
TYPO3 v. 6.2
YAG v. 3.2.1
Edit: A wild guess would be some output filtering in TYPO3 itself, but where? I didn't set anything by purpose.
You need to traverse the path upwards to check if there is any fluid tag wrapped around it, that does escaping. In general, all tags do escaping.
Also check the code around <f:render partial....
It could also be that the TypoScript code that does calls the fluid template, has a .htmlspecialchars = 1 set.
Since TYPO3 8 there is another pitfall: Custom Viewhelpers do htmlspecialchars on the output unless told otherwise. The solution is:
<?php
namespace Vendor\ArTest\ViewHelpers;
class YourViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHelper{
/**
* As this ViewHelper renders HTML, the output must not be escaped.
*
* #var bool
*/
protected $escapeOutput = false;
As of TYPO3 ver. 9.5 and up to ver. 10.4 you could also wrap the output in the Fluid template into <f:format.htmlentitiesDecode> Tags like this:
<f:format.htmlentitiesDecode>
<f:form.textfield id="live-filter" name="test" />
</f:format.htmlentitiesDecode>
Further information on this can be found in the TYPO3 View Helper Reference.