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.
Related
Unfortunately I'm still using TYPO3 7.6, but it's the same in principle like the latest TYPO3 CMS, so I also use Fluid_styled_content .. uff!
I've included the lazy load javascript plugin into my TYPO3-Website and now I try to change the FLUID-partial typo3conf/ext/myext/Resources/Private/Extensions/Fsc/Partials/MediaGallery.html - but I've a probem with this .. because my changing in line 'file' throws an error. I try it with or without " or \" ..
<f:section name="media">
<f:media
file="{f:uri.image(src: \"EXT:/myext/Resources/Public/img/icons/blank.gif\", treatIdAsReference:1}"
class="lazyload"
data="{src: '{f:uri.image(image: column.media)}'}"
width="{column.dimensions.width}"
height="{column.dimensions.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
/>
</f:section>
I've changed file="{column.media}" , because I want to load my 'blank.gif' instead of the image himself.
Argument 1 passed to TYPO3\CMS\Core\Resource\Rendering\RendererRegistry::getRenderer() must implement interface TYPO3\CMS\Core\Resource\FileInterface, string given, called in C:\www\typo3_src-7.6.31\typo3\sysext\fluid\Classes\ViewHelpers\MediaViewHelper.php on line 90
The output is like this:
<img data-src="/fileadmin/user_upload/admins.jpg" class="lazyload" src="/fileadmin/user_upload/admins.jpg" width="280" height="176" alt="">
Lazy load is working perfect, but I have to load the blank.gif.
Is there a solution to manipulate the FSC-partials or do I need a new ViewHelper, like this?
I am doing first steps with Fluid templates and grid elements in Typo3 8.7.12. So far so good I have a functioning fluid template that works just fine.
Now I wanted to integrate grid elements (first time using it).
I installed the "gridelements" extension and loaded the static template to the page template. I created some grid elements with the wizard. They are showing in the BE and I can fill them with content. All good so far.
Then I added the following to my SETUP (as found here):
tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
4 < lib.gridelements.defaultGridSetup
4 {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/fluid/templates/grid_2-1-2.html
}
}
}
Then I added the columns (column numbers are defined correctly) in my HTML template:
<div class="col-md-6 col-xs-12">
{data.tx_gridelements_view_column_10->f:format.raw()}
</div>
<div class="col-md-6 col-xs-12">
{data.tx_gridelements_view_column_11->f:format.raw()}
</div>
Is there anything more to it? Template is rendered but not the content of the Grid Element CE's.
Did you include the Gridelements static file containing the TypoScript setup for lib.gridelements.defaultGridSetup already?
if so, when checking your setup with the TypoScript Object Browser, what is the value of the userFunc within
tt_content.gridelements_pi1.20.10.userFunc
BTW: You might want to follow the instructions in that article to get a fully Fluid based output for your Gridelements: https://coders.care/blog/tutorial/gridelements-and-cms-8/
I got confused with the template files. I accidentally re-rendered the entire template within the template instead of the grid element template. Thanks to Joey‘s input I finally figured it out.
I use TYPO3 7.6.2 and fluid_styled_content. With Gridelements my Code look like this:
<div class="col-md-12 col-sm-12">
<div id="c8">
<h6>Test</h6>
</div>
</div>
How can I remove the "div id="? If I use "css_styled_content" there is no problem.
Thanks
The whole rendering is defined inside the fluid templates (as the extension name suggests). So you are able to overwrite the folder containing the layouts / templates and modify them to your needs.
In case of "fluid_styled_content" the configuration is done in TypoScript, so add lib.fluidContent.layoutRootPaths.30 = /path/to/your/layouts, copy the original layouts from EXT:fluid_styled_content/Resources/Private/Layouts/ to your path and modify them to fit your needs.
In your case you have to remove the line:
<div id="c{data.uid}">
in all three layouts.
Further information are available at https://docs.typo3.org/typo3cms/extensions/core/7.6/Changelog/7.3/Feature-66111-AddTemplaterootpathsSupportToCobjectFluidtemplate.html
#Daniel
Thanks for the hint.
Works for me too, but I had to add
lib.fluidContent.templateRootPaths.30 = EXT:extension/Resources/Private/Templates/
to my configuration, because, in my case I want to edit Textmedia.html and thats in Templates folder.
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.