TYPO3 get file object from sys_file_reference - typo3

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.

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.

HMENU/GMENU render pages.media field

I am migrating typoscript from TYPO3 6.2 ELTS to 7.x ELTS.
Following code works in 6.2 thanks to activateContentAdapter which is removed in TYPO3 7. https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/7.2/Breaking-66034-DropContentAdapter.html
Is that possible to still use HMENU/GMENU or should I rewrite it totally other way?
lib.navigation.socialmedia = HMENU
lib.navigation.socialmedia{
wrap = <ul>|</ul>
special = directory
special.value = 123
1 = GMENU
1{
NO{
wrap = <li class="first">|</li>|*|<li class="middle">|</li>|*|<li class="last">|</li>
altImgResource.import = uploads/media/
altImgResource.import.field = media
altImgResource.import.listNum = 0
ATagTitle.field = subtitle // title
}
}
}
you still could use GMENU but you need to change the filehandling. As mentioned files are no longer just copied to uploads/media/ but there is a file-handle (sys_filerecord) whose uid is used everywhere.
First substitution: treatIdAsReference
This is a usage for rendering an icon of the first media entry in a text menu (TMENUITEM) before the text (1).
The rendering is inside of the FILESobject which represents an (possible) array. SO it might be a little bit complicated to insert it into an IMGRESOURCEobject (2).
if you just want the resource adapt the renderObj, as this example renders the image (cropped) and generates an <img>tag.
NO.stdWrap.prepend = FILES
NO.stdWrap.prepend {
references {
table = pages
uid.data = current:originalUid // current:uid
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
import.data = file:current:uid
treatIdAsReference = 1
width = 150c
height = 150c
}
altText.data = file:current:alternative
titleText.data = file:current:title
params = class="menu-img"
stdWrap.typolink.parameter.field = uid
}
maxItems = 1
}
(1) with the options of CSS3 and HTML5 and the preferred way of accessibility you have multiple ways to use a clean text menu without 'hiding' text in graphics.
(2) you might use altImgResource.cObject = FILES and render an IMGRESOURCE instead of an IMAGE.
meanwhile (since TYPO3 9) you have menu_processors and you would render the menu with fluid, where you 'navigate' through the pagetree with all properties of each page, including images.

Typoscript 9.5 render FILES Object like Contentelement

i get via CONTENT an Element from the page and want to render the image from this like all other images in the page.
i have installed sms for responsive images but when i render this image via typoscript an normal <img> will be outputtet.
how must i change my typoscript to render like in the partial file Media/Rendering/Image?
20 = FILES
20{
references {
table = tt_content
fieldName = image
uid.data = field:uid
}
begin = 0
maxItems = 1
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
file.width = 1920c
file.treatIdAsReference = 1
stdWrap.outerWrap = |
}
}
thank you very much!
As the example you mention is rendered in Fluid, I'd suggest to use Fluid as well. The ViewHelper for responsive images is used in Fluid.
Try to get away from rendering via TypoScript and use Fluid templates.

TYPO3 Text Media Element should get class from selected sys category

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
}
}
}

Pass content from TypoScript to fluid template in TYPO3 7.6

I would like to read content via TypoScript and render it through a custom Fluid template. Without css_styled_content or fluid_styled_content.
temp.test = CONTENT
temp.test {
table = tt_content
select.languageField = 1
select.selectFields = bodytext,image,header,header_link
select.where = colPos = 1
renderObj = FLUIDTEMPLATE
renderObj {
file = path/to/Teaser.html
}
}
This works with strings, say
<f:debug>{data.header}</f:debug>
But not with
<f:debug>{data.image}</f:debug>
returning only the number of images.
Now, in a classic TypoScript RenderObj (maybe a COA), you would have added something like
10 = FILES
10 {
required = 1
references {
table = tt_content
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:originalUid // file:current:uid
file.width=654
file.height = 327c
//stdWrap.typolink.parameter.data = file:current:link
altText.data = file:current:description // file:current:title // file:current:alternative
}
}
While nowadays, we want to do that in the Fluid template. But how to resolve the FAL image to pass it to the fluid template?
You should be able to use the TYPO3\CMS\Frontend\DataProcessing\FilesProcessor data processor that will fetch the file data for you so you can access it with {files} in your template.
renderObj = FLUIDTEMPLATE
renderObj {
file = path/to/Teaser.html
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10.references.fieldName = image
}
}
The main problem is all image information are stored in a different table called "sys_file_reference". Selecting "tt_content.image" will not help you here. There are 2 ways to solve this problem, IMHO.
1) Create your own viewhelper. This VH can be utilized to query the images as it is done here.
2) Create a small TypoScript lib and use it as f:cObject in your fluid template. This is described here.
I'm not saying that my solution is the best one. But it's the only one I'm aware of. Looking forward seeing better solutions ;)