Author Image

Ruud Silvrants

Developer

TYPO3 tovenaar. Duikt ook in webapplicaties. Rots in de branding. Laat zich niet opjagen. Is nooit te beroerd om te helpen. Heeft eindelijk teckel Meggie zindelijk gekregen.  
 

Blog Header

Dataprocessing in TYPO3 Fluid

Zijn je designers een beetje handig met fluid maar niet met geavanceerde typoscript? Wordt je ook moe van extra viewhelpers alleen om je data van tt_content of pages gestructureerd te krijgen? Benieuwd naar de manier waarop TYPO3 fluid styled content de data aanbiedt aan je fluid templates? Leer dan meer over dataprocessing in TYPO3!

Dataprocessing zijn php classes die het vereenvoudigen om je data te manipuleren of toevoegen voordat deze aan je fluid templates wordt meegegeven. Het voorbereiden van de data dus. Deze manier van voorbereiden zorgt dat de data op de gewenste manier in fluid beschikbaar is, wat overzichtelijkheid bevordert. Daarnaast vergt het minder typoscript om bepaalde elementen te genereren. Dit maakt het, zeker voor beginners, makkelijker om meer uit TYPO3 te halen.

Hoe werkt een TYPO3 dataprocesser?

We nemen een FilesProcessor als voorbeeld. Deze processor haalt alle bestanden op uit een content element (CE) en geeft deze mee aan je Fluid template.  De configuratie voor de processor is als volgt gedefinieerd in TypoScript.

tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
    templateName = Textmedia
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
           references.fieldName = assets
           as = bestanden
        }
        #other processors
}

Configureren in TypoScript

Het eerste stuk is het configureren van het CE in TypoScript. Aan deze configuratie kan een array met key `dataProcessing` en de gewenste processors toegevoegd worden. Deze array bevat een lijst met class referenties (volledige namespaces gebruiken), die ieder de interface menuProcessor bevat. Dit menu zal alle onderliggende paginas als een directory ophalen met een diep`DataProcessorInterface` implementeren.

Array

Iedere dataProcessor kan daarnaast ook nog een array met instellingen bevatten, waarvan enkele verplicht zijn. Welke instellingen verplicht zijn en welke er mogelijk zijn is afhankelijk van de processor. Sommige data processors kunnen zelfs weer een array met data processors bevatten die dan over de data worden uitgevoerd. De documentatie van iedere processor beschrijft welke instellingen mogelijk zijn en is vaak goed beschreven in de php class zelf.

Instellingen filesProcessor

De instellingen voor deze filesProcessor, om de bestanden op te halen en mee te geven aan je CE, zijn `references.fieldName` en `as`. De `references.fieldName` geeft aan welk veld in je database de referenties naar je bestanden bevat. `As` geeft aan als welke variabele de data beschikbaar moet zijn in je Fluid template. Per default is deze variabele `assets`, maar het is wenselijk om deze aan te passen naar een betekenisvolle variabele toe passend waarvoor het gebruikt wordt.

MenuProcessor

Een andere processor die ik niet onbesproken wil laten is de `menuProcessor`. Deze processor vereenvoudigd naar mijn mening het maken van een menu in TYPO3 aanzienlijk. Zeker als je nog niet veel ervaring hebt in typoscript. Om een menu van pagina’s te maken met bijbehorende afbeeldingen gaat als volgt:

Configuratie van het menu in TypoScript:

page.10 {
   dataProcessing {
       10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
       10 {
           special = directory
           special.value = your_menu_pid
           levels = 2
           as = navigation
           dataProcessing {
               10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
               10 {
                   references.fieldName = media
               }
           }
       }
   }
}

In het kort; bovenstaande configuratie configureert dat de pagina een van de 2 levels voor het pid `your_menu_pid`. Deze data wordt toegevoegd aan je pagina als de variabele `navigation` en voor iedere onderliggende pagina wordt er de afbeeldingen opgehaald door middel van de FilesProcessor. Voor meer informatie over de configuratie van het menu zie link: https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html#special-directory

Om het menu nu te kunnen opbouwen kun je in je template het volgende fluid snippet gebruiken, en je hebt een eenvoudig menu staan.

<f:if condition="{navigation}">
   <ul>
       <f:for each="{navigation}" as="menuItem">
           <li>
               <a href="{menuItem.link}" target="{menuItem.target}">
                   {menuItem.title}
               </a>
               <f:if condition="{menuItem.children}">
                   <ul class="dropdown-menu">
                       <f:for each="{menuItem.children}" as="childMenuItem">
                           <li>
                               <a href="{childMenuItem.link}" target="{childMenuItem.target}">
                                   {childMenuItem.title}
                               </a>
                           </li>
                       </f:for>
                   </ul>
               </f:if>
           </li>
       </f:for>
   </ul>
</f:if>

Een overzicht van de huidige dataprocessor in TYPO3 (versie 8.7 LTS) zijn te vinden in de typo3 core extensie `frondend`:

  • CommaSeparatedValueProcessor
  • DatabaseQueryProcessor
  • FilesProcessor
  • GalleryProcessor
  • MenuProcessor
  • SplitProcessor

Lees meer