====== Dynamic Content Elements (dce) ======

Ermöglicht das Anlegen eigener Inhaltselemente (wie FCE bei TemplaVoila!). Mithilfe eines Fluid-Templates lässt sich die gewünschte Ausgabe leicht einrichten.

----

===== Bilder mit FAL und Lightbox ausgeben =====

Die folgende Konfiguration ermöglicht:
  * Ausgabe von FAL-Bildern
  * Link für Großansicht mit Lightbox
  * Einstellung der Bildgrößen für Vorschaubild und Großansicht

**DCE Konfiguration:**
<code xml>
<config>
  <type>inline</type>
  <foreign_table>sys_file_reference</foreign_table>
  <foreign_field>uid_foreign</foreign_field>
  <foreign_sortby>sorting_foreign</foreign_sortby>
  <foreign_table_field>tablenames</foreign_table_field>
  <foreign_match_fields>
    <fieldname>fal</fieldname> <!-- HIER NAMEN DER VARIABLEN EINTRAGEN! -->
  </foreign_match_fields>
  <foreign_label>uid_local</foreign_label>
  <foreign_selector>uid_local</foreign_selector>
  <foreign_selector_fieldTcaOverride>
    <config>
      <appearance>
        <elementBrowserType>file</elementBrowserType>
        <elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
      </appearance>
    </config>
  </foreign_selector_fieldTcaOverride>
  <foreign_types type="array">
    <numIndex index="2">
      <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
    </numIndex>
  </foreign_types>

  <minitems>0</minitems>
  <maxitems>99</maxitems>

  <appearance>
    <useSortable>1</useSortable>
    <headerThumbnail>
      <field>uid_local</field>
      <width>45c</width>
      <height>45</height>
    </headerThumbnail>

    <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
    <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
    <showSynchronizationLink>0</showSynchronizationLink>
    <useSortable>1</useSortable>
    <enabledControls>
      <info>1</info>
      <new>0</new>
      <dragdrop>0</dragdrop>
      <sort>1</sort>
      <hide>1</hide>
      <delete>1</delete>
      <localize>1</localize>
    </enabledControls>

    <createNewRelationLinkTitle>LLL:EXT:cms/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
  </appearance>

  <behaviour>
    <localizationMode>select</localizationMode>
    <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
  </behaviour>
</config>
</code>

**DCE Template:**
<code html>
<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference"> 
  <a href="{f:uri.image(src:'{fileReference.uid}' treatIdAsReference:1 maxWidth:'800')}" rel="fancybox" class ="fancybox">
    <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" maxWidth="200" /> 
  </a>
</f:for>
</code>

----

===== FAL-Bild mit Verlinkung =====

Mit ''<dce:typolink>'' kann auf das FAL-Linkfeld zugegriffen werden. Dieses ist seit DCE 1.0.3 per default vorhanden; in älteren Versionen muss das Feld noch hinzugefügt werden:

**DCE Konfiguration:**
<code xml>
<foreign_types type="array">
  <numIndex index="2">
    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
  </numIndex>
</foreign_types>
</code>

**DCE Template:**
<code html>
<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference">
  <dce:typolink parameter="{fileReference.link}">
     <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
  </dce:typolink>
</f:for>
</code>

----

===== Kommaseparierte Liste als Array ausgeben =====

Hiermit können kommaseparierte Listen in einem DCE-Feld in ein Array umgewandelt und ausgegeben werden.

**DCE Konfiguration:**
<code xml>
<!-- Konfiguration "simple input field" (ohne 'required') -->
<config>
  <type>input</type>
  <size>30</size>
  <eval>trim</eval>
</config>
</code>

**DCE Template:**
<code html>
<f:if condition="{field.auflistung}">
  <f:then>
    <ul>
      <f:for each="{field.auflistung -> dce:explode(delimiter:',')}" as="auflistung">
        <li>{auflistung}</li>
      </f:for>
    </ul>
  </f:then>
  <f:else>
    <p>Das Feld ist leer.</p>
  </f:else>
</f:if>
</code>