错字3 7.4。 通过typoscript获取tt_content textmedia图像

Question

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!

Answer 1

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.