I am creating a new page and I try to make the footer editable in the backend. Therefore I created a new tt_content textmedia element and via typoscript I save it to a variable:
footerdata = RECORDS
footerdata {
tables = tt_content
source = 165
dontCheckPid = 1
conf.tt_content = COA
conf.tt_content {
10 = TEXT
10.field = header
10.wrap = <h1>|</h1>
20 = TEXT
20.field = bodytext
20.parseFunc =< lib.parseFunc_RTE
20.wrap = <div>|</div>
}
}
And in my template I simply add this to the footer:
<f:format.raw>{footerdata}</f:format.raw>
This works nicely for headline and text, but I simply cannot find out how to do this for the images too. Anyone have any tutorials, links, etc. where I can look this up? I tried to google this problem but Typo3 7 seems to be to new to have any viable hints available.
Thanks in advance!
I don't like the RECORDS object that much; I always had the feeling it was cryptic.
I usually place such entries in a single sysfolder and then get all CONTENT for that pid.
Old school approach:
lib.address = CONTENT
lib.address {
wrap = |
table = tt_content
select.languageField = sys_language_uid
# uncomment if you want to be more specific
# select.selectFields = bodytext,image,header,header_link
# or if you want to limit by colPos
# select.where = colPos = 6
# This is your "Address" Sysfolder's pid
# It's nice to keep such hardwired values in constants
# ... but of course you can also just do = 123
# select.pidInList = {$pidAddress}
# here, the rendering is done
renderObj=COA
renderObj{
wrap = |
# That's how you process the FAL files
# This is since TYPO3 6.2 btw
5 = FILES
5 {
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
}
}
# Let's say you want the other content here
10 = COA
10 {
1=TEXT
1{
required=1
wrap=<h1>|</h1>
field=header
}
2=TEXT
2{
required=1
wrap=<div>|</div>
field=bodytext
}
}
}
}
And in your page template, access the cObject as such
<f:cObject typoscriptObjectPath="lib.breadcrumb" />
Also, here's a more modern approach that uses a fluid template as the renderObj:
lib.address = CONTENT
lib.address {
# same as above
wrap = |
table = tt_content
select.languageField = sys_language_uid
# here it's getting different
renderObj = FLUIDTEMPLATE
renderObj {
file = {$customContentTemplatePath}/MyFile.html
layoutRootPath = {$customContentLayoutPath}
partialRootPath = {$customContentPartialPath}
dataProcessing {
// https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html
// available data processors: SplitProcessor, CommaSeparatedValueProcessor, FilesProcessor, DatabaseQueryProcessor, GalleryProcessor
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10.references.fieldName = image
}
//settings {
// type = some_setting
//}
}
}
Here's an example how I would render that object with a fluid template, completely optionally using the VHS viewhelper extension (EXT:vhs)
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="small-12 medium-6 large-4 columns">
<f:for each="{files}" as="file">
<v:media.image src="{file}" srcset="1200,900,600" srcsetDefault="600" alt="{file.alternative}" treatIdAsReference="1"/>
</f:for>
<h1>{data.header}</h1>
<div>{data.bodytext}</div>
</div>
<f:comment>
// memory help for debugging:
<f:debug>{data}</f:debug>
<f:debug>{settings}</f:debug>
<f:debug>{file}</f:debug>
</f:comment>
More correctly, the renderObj should be replaced by a DataProcessor. I don't have that ready yet though.
another approach could be to use the VHS extension and use the render.record viewhelper:
https://fluidtypo3.org/viewhelpers/vhs/master/Render/RecordViewHelper.html