TYPO3 Text Media Element should get class from selected sys category - class

I want to reach the following:
I'm creating an new content element "text media", fill out title, text and perhaps select an image. I also created categories which I select under the tab "categories".
Now I want to integrate these selected categories in the fluid template to make it work as an javascript filter.
How can I achieve this task?
Thanks!

You can use a DataProcessor to get the category data. You need to extend the TypoScript for the textmedia element.
Category example: https://git.spooner.io/spooner/just_news/blob/master/Configuration/TypoScript/RenderingDefinitions/news_list.ts#L23
DataProcessor documentation: https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html#dataprocessing
Here you can see the default textmedia TS, added object 30:
# Text & Media:
# Any number of media wrapped right around a regular text element.
#
# CType: textmedia
tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
templateName = Textmedia
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = assets
}
20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
# Get categories
30 = TYPO3\CMS\Frontend\DataProcession\DatabaseQueryProcessor
30 {
put the login in...
}
}
stdWrap {
editIcons = tt_content: header [header_layout], bodytext, assets [imageorient|imagewidth|imageheight], [imagecols|imageborder], image_zoom
editIcons {
iconTitle.data = LLL:EXT:fluid_styled_content/Resources/Private/Language/FrontendEditing.xlf:editIcon.textmedia
}
}
}

Related

How to make a custom content element containing header, bodytext, image from tt_content inline in TYPO3 / TCA overrides?

I want to get an array of custom content objects into my fluid template, so I can build an unordered List.
This is what I want to build:
unordered list of li elements containing image, header, bodytext
In my backend I build a custom element like this:
my custom content element with fields image, header, bodytext from tt_content
What I want to achieve is, that I have a container and in it I can have my custom content element. When expanding it, I can add header, image and bodytext. So that i basically get an array of custom content Elements that I can loop over in my fluid template.
It should look like this:
each entry should be my custom content element with image, header, bodytext when expanding.
Thanks a lot for help!
You can use the extension gridelements to create a container that can hold unlimited content elements and use its template to loop over the partial which creates your content element.
If you want to do it the TYPO3 way instead of using Grid Elements..
I see you already know how to make a custom content element. To make children within your content element you could make an extra SQL field xxx_foreign.
You need to make 2 content elements. The child you know how to make.
The TCA for the inline field of the parent and needed extra colPos in the backendLayout you can find here
Then you will need in typoscript a dataprocessor I will give an example in which the child contains assets (media). In that case you need a nested solution:
tt_content {
xxx_education_block < lib.xxxCustomContentElements
xxx_eheducation_block {
templateName = xxxEducationBlock
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
10 {
if.isTrue.field = xxx_educations
table = tt_content
pidInList.field = pid
where = xxx_foreign=###uid### AND deleted=0 AND hidden=0
orderBy = sorting
markers {
uid.field = uid
}
as = xxxEducations
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
if.isTrue.field = assets
references {
fieldName = assets
}
as = assets
}
}
}
}
}
}
To add this to the content wizard:
mod.wizards.newContentElement.wizardItems.blocks {
header = Xxx blokken
after = common
elements {
xxx_education_block {
iconIdentifier = content-bullets
title = XXX - Education intro block
description = Introblock xxx
tt_content_defValues {
CType = xxx_education_block
}
}
}
show := addToList(xxx_education_block)
}
If you do a debug in Fluid you should now be able to iterate over the children and the assets of the children.

TYPO3 get file object from sys_file_reference

I want to be able to add a fallback video file in the Backend. So the Backend User can add the same video in a different file format, for the browsers that dont support the primary file format.
Example: the primary video file format ist .webm and the secondary file format is a .mp4.
I've created the TCA Overrider for sys_file_reference.php
$temporaryColumn = array(
'tx_framework_video_fallback' => [
'label' => 'LLL:EXT:gizmo_framework/Resources/Private/Language/locallang_be.xlf:Pages.videoOptionFallbackVideo.Title',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig('tx_framework_video_fallback', [
'appearance' => [
'createNewRelationLinkTitle' => 'LLL:EXT:gizmo_framework/Resources/Private/Language/locallang_be.xlf:Pages.videoOptionPoster.addPoster'
],
],
//Filter for File Types ex. images
'mp4,gif,mov')
],
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
'sys_file_reference',
$temporaryColumn
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
'sys_file_reference',
'videoOverlayPalette',
'--linebreak--,tx_framework_video_fallback',
'after:autoplay'
);
And here is the ext_table.sql
CREATE TABLE `sys_file_reference` (
'tx_framework_video_fallback' int(11) unsigned DEFAULT '0' NOT NULL,
);
And I load the video via the content element typoscript
tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
templateName = Textmedia
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = assets
}
20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
}
}
So far so good I can add a video in the content element in the backend and it will display in the Front End.
But I'm not able to load the video that I have linked to the sys_file_reference. It is being safed correctly and added to the sys_file_reference table.
I've tried to load the fallback video within the dataProcessor of the content element typoscript
tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
templateName = Textmedia
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = assets
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10{
references.table = sys_file_reference
references.fieldName = tx_framework_video_fallback
as = fallbackMediaReference
}
}
}
20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
}
}
I've also tried to use the DatabaseQueryProcessor, but I've never got the file object of the video.
How do I have to setup the dataProcessing to load the secondary file which is linked to the sys_file_reference of the primary file.
Thanks for your help!
Since there is currently no additional dataProcessing available within the Files processor, you will either have to go for your own custom dataProcessor or create a workaround.
The workaround could indeed be based on the DatabaseQueryProcessor, since that will give you the additional data processor that's still missing in the FilesProcessor. On the other hand you could go for an additional FLUIDTEMPLATE setup to be used while rendering the file list provided by your FilesProcessor.
If you prefer the DatabaseQueryProcessor you will have to use a join query to get the necessary files, which might be a bit more complicated.
https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Functions/Select.html
If you go for the additional FLUIDTEMPLATE you can just add that with the f:cObject view helper while rendering the primary file list and hand over the reference record as data.
https://docs.typo3.org/other/typo3/view-helper-reference/9.5/en-us/typo3/fluid/latest/CObject.html
If you want that problem to be solved within the FilesProcessor itself, you might want to support this issue, which has been started during the last TYPO3 initiative week https://forge.typo3.org/issues/88627
Here is my answer using the FLUIDTEMPLATE f:cObject. Thanks for the hint Jo Hasenau!
I hope I can help someone with the same problem.
Fluidtemplate.html:
<f:cObject typoscriptObjectPath="lib.fallbackMedia" data="{file}"/>
setup.typoscript
lib.fallbackMedia = FILES
lib.fallbackMedia {
//references the table, field and which uid it should get
references{
table = sys_file_reference
fieldName = tx_framework_video_fallback
uid.data = uid
}
//renders the references as an IMG Resource
renderObj = COA
renderObj {
10 = IMG_RESOURCE
10 {
file.import.dataWrap = {file:current:storage}:{file:current:identifier}
stdWrap.dataWrap = <source src="|" type="{file:current:mime_type}">
}
}
}
For more information on the FILES cObject: https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Files/Index.html
In the fluid template you are now able to build the HTML Video Tag with multiple sources.

Fluid menu element with image from page resources?

I've created a new fluid menu element and I need it to show an image for each page. The image is stored in the page resources.
When I debug the template, each menu item shows data.media => 1 but media cannot be expanded any further. How can I get the image to render in my template?
TS:
ext_menu_image < lib.contentElement
ext_menu_image {
templateName = MenuImage
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
special = directory
special.value.field = pages
levels = 1
as = menuItems
expandAll = 1
titleField = nav_title // title
}
}
}
Template:
<f:for each="{menuItems}" as="page">
{f:uri.image(image:page.data.media.???)}
</f:for>
By default the MenuProcessor just puts the data directly from the table into the array in Fluid. The media field in the pages table, just holds the number of relations. So you need another data processor so it is translated to a file. This should do it:
ext_menu_image < lib.contentElement
ext_menu_image {
templateName = MenuImage
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
special = directory
special.value.field = pages
levels = 1
as = menuItems
expandAll = 1
titleField = nav_title // title
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = media
}
}
}
}
}

TYPO3: Backend Layout Condition in TypoScript

I'd like to change the way elements are rendered depending on the page's backend layout.
Changing the fluid styled content template depending on the backend layout works as following:
[globalVar = TSFE:page|backend_layout = 1][globalVar = TSFE:page|backend_layout = 2]
lib.fluidContent.templateRootPaths.10 = EXT:ds_res/Resources/Private/Templates/ContentTemplates/
[global]
If it's 1 or 2, then use the other templates.
However, this only works if the BE layout is set directly at the page and not when it's inherited from its parent.
How to fix this?
Running TYPO3 7.6.15
In TYPO3 7.5 "Backend Layout"-Conditions has been simplified with "pagelayout" in Typoscript. Example:
page.10 = FLUIDTEMPLATE
page.10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = pagelayout
default = TEXT
default.value = EXT:sitepackage/Resources/Private/Templates/Home.html
3 = TEXT
3.value = EXT:sitepackage/Resources/Private/Templates/1-col.html
4 = TEXT
4.value = EXT:sitepackage/Resources/Private/Templates/2-col.html
}
}
Instead of:
field = backend_layout
field.data = levelfield:-2,backend_layout_next_level,slide
field.ifEmpty = default
Maybe this also works in your conditions like this:
[globalVar = TSFE:page|pagelayout = 1]
However, you should not change the used template file with [xy]-conditions and prefer using a CASE shown in the example above. Each number is the UID of a backend_layout by the way.
In TYPO3 9.5+ you can use typoscript conditions like:
[page["backend_layout"] == 'pagets__2']
page.bodyTagCObject.value.wrap = <body id="uid|" class="fullpage">
[end]
Edit:
As Bernd has mentioned use backend_layout only if you need the real defined field. If you need the computed value (e.g. for a sub page getting its layout from the backend_layout_next_level from a parent page) use pagelayout with a case like:
bodyTagCObject = TEXT
bodyTagCObject.value.field = uid
bodyTagCObject.value.wrap.cObject = CASE
bodyTagCObject.value.wrap.cObject{
key.data = pagelayout
default = TEXT
default.value = <body id="uid|" class="standard">
pagets__2 = TEXT
pagets__2.value = <body id="uid|" class="fullpage">
}
We use this solution
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
templateName = TEXT
templateName.stdWrap {
cObject = TEXT
cObject {
data = levelfield:-2,backend_layout_next_level,slide
override.field = backend_layout
split {
token = pagets__
1.current = 1
1.wrap = |
}
}
ifEmpty = Index
}
layoutRootPaths {
10 = EXT:yourext/Resources/Private/Layouts
}
partialRootPaths {
10 = EXT:yourext/Resources/Private/Partials
}
templateRootPaths {
10 = EXT:yourext/Resources/Private/Templates
}
}
This approach is when u do not have the Backendlayouts in the DB (made through the backend) but include them from files. As there is no uid then you go by the templatename.
Example:
If you use this PageTS:
mod.web_layout.BackendLayouts {
Blankpage {
title = Blankpage
name = Blankpage
icon = EXT:yourext/Resources/Public/Icons/BackendLayouts/Blankpage.jpg
config {
backend_layout {
colCount = 1
rowCount = 2
rows {
1 {
columns {
1 {
name = Nameofthecolumn
colPos = 0
colspan = 1
}
}
}
2 {
columns {
1 {
name = Nameofthesecondcolumn
colPos = 1
colspan = 1
}
}
}
}
}
}
}
You will need a Template.html with the name Blankpage.html within your EXT-Templates.
So you can add more Templates and Backendlayouts without touching the TS again. Simply add PageTS and a html-template.
There is a feature available which avoids having that code duplicated
page.10 = FLUIDTEMPLATE
page.10 {
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key.data = pagelayout
....
As you can not handle the inherited layouts in conditions you need to use typoscript. My solution is this:
page.10 = FLUIDTEMPLATE
page.10 {
templateRootPaths.1 = {$resDir}/Private/Templates
partialRootPaths.1 = {$resDir}/Private/Partials
layoutRootPaths.1 = {$resDir}/Private/Layouts
templateName = TEXT
templateName.cObject = CASE
templateName.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
#Default Template
default = TEXT
default.value = subpage
# homepage
pagets__homepage = TEXT
pagets__homepage.value = homepage
pagets__subpage = TEXT
pagets__subpage.value = subpage
}
variables {
:
pageLayout = TEXT
pageLayout.data = levelfield:-1, backend_layout_next_level, slide
pageLayout.override.field = backend_layout
// since TYPO3 7 this already is computed by the core and this gives the same:
pageLayout = TEXT
pageLayout.data = pagelayout
:
}
}
Avoid using file for better implementation with ..RootPaths.
As we use backendlayouts defined in files (which gets included in the pageTSconfig) the key names starting with pagets__, you also might use the numbers of backend_layout records.
I use the constant {$resDir} to define the root of resources which can be changed in an easy way. In a siteextension this could be:
resDir = EXT:site_project1/Resources
I also define a fluid variable with the currently active page layout for further differentiation in the templates.
If you want the ...RootPaths to be different for each layout you need to build cObject with a CASE obejct similar to my selection of the template name.
In general: all this could be handled in the fluid templates if you have the backend layout available in your variables: you only need to have one starting template, which calls a layout where all further calls to partials are individualized by the current layout like
<f:render partial="{pageLayout}/header" arguments="{_all}" />
TYPO3 11.x:
[tree.pagelayout == 2]
...
[global]
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/11.0/Feature-88276-TypoScriptConditionForPageLayout.html

Get rid of "csc-frame" div wrap in TYPO3

Here is my code:
lib.navigation{
10 = RECORDS
10 {
source = uid
tables = tt_content
}
}
Here I'm just creating a menu through content element and I wanted to remove the default div with class=csc-frame csc-frame-frame1 from the rendered content
I used like this:
lib.navigation{
10 = RECORDS
10 {
conf.tt_content.stdWrap.innerWrap.cObject.default = TEXT
source = uid
tables = tt_content
}
}
but this will remove only csc_default div.
This might do the trick. Make sure to include it before the navigation definition.
tt_content.stdWrap.innerWrap.cObject.default >