MASK-Multicolumn

Hier nun die modifizierte und fertige Fluid-Vorlage für den Mehrspalter im Backend (siehe Abb. 2 in Tab 2):

<!--  "bu" einbinden wegen "getBackendUser()" in VH "qpx:editLink" -->
{namespace bu = TYPO3\CMS\Beuser\ViewHelpers}
{namespace qpx=kupix\qpxviewhelper\ViewHelpers}

<style type="text/css">
   a { color:inherit !important; }
</style>


<p style="font-weight:bold; font-size:18px; color:#FF8000;"><f:format.nl2br>{data.header}</f:format.nl2br></p>

<div style="display:table;">
   {f:if(condition: data.tx_mask_column_equal_height, then: '<b>Gleich lange Spalten? </b>Ja<br>', else: '<b>Gleich lange Spalten? </b>Nein<br>')}
   {f:if(condition: data.tx_mask_columns_margin,      then: '<b>Abstand zw. den Spalten</b> {data.tx_mask_columns_margin}<br>')}
   {f:if(condition: data.tx_mask_column_embeded,      then: '1. Spalte ist <b>eingebettet</b><br>', else: '1. Spalte ist <b>nicht eingebettet</b><br>')}
   <br> 
</div>

<table class="table table-bordered table-condensed" style="width:100%;">
   <tr>
      <f:for each="{data.tx_mask_card_columns}" as="data_item" iteration="colnr">
         <th style="width:{data_item.tx_mask_column_width};">
            <qpx:editLink element="{data_item}" table="tx_mask_card_columns">
               {colnr.cycle}. Spalte 
               <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-open" data-identifier="actions-open">
                  <span class="icon-markup">
                     <img src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-open.svg" width="16" height="16">
                  </span>
               </span>
            </qpx:editLink>
         </th>
      </f:for>
   </tr>

   <tr>
      <f:for each="{data.tx_mask_card_columns}" as="data_item">
         <td style="vertical-align:top;
            background-color:{data_item.tx_mask_column_bg_color};
            color:{data_item.tx_mask_column_color};
            padding:{data_item.tx_mask_column_padding};
            {f:if(condition: data_item.tx_mask_column_width, then: 'width:{data_item.tx_mask_column_width};')}
         ">

            <b>Breite: </b>{data_item.tx_mask_column_width}<br>
            <f:if condition="{data_item.tx_mask_column_padding}">
               <b>Padding: </b>{data_item.tx_mask_column_padding}<br>
            </f:if>
            <f:if condition="{data_item.tx_mask_column_animation}">
               <b>Animation:<br></b>
               <b> - Typ: </b>{data_item.tx_mask_column_animation}<br>
            </f:if>
            <f:if condition="{data_item.tx_mask_column_animation_delay} && {data_item.tx_mask_column_animation}">
               <b> - Verzögerung: </b>{data_item.tx_mask_column_animation_delay}<br>
            </f:if>
            <f:if condition="{data_item.tx_mask_column_animation_slow} && {data_item.tx_mask_column_animation}">
               <b> - Geschwindigkeit: </b>langsam
            </f:if>

            <p style="text-align:center">… … … … … …</p>

            <f:if condition="{data_item.tx_mask_column_content}">
               <f:for each="{data_item.tx_mask_column_content}" as="data_item_item">
                  <qpx:editLink element="{data_item_item}">
                     <strong>{data_item_item.header}</strong> 
                     <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-open" data-identifier="actions-open">
                        <span class="icon-markup">
                           <img src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-open.svg" width="16" height="16">
                        </span>
                     </span>
                     <br>
                     {f:if(condition:'{data_item_item.subheader}',  then:'{data_item_item.subheader}<br>')}
                     <i>({data_item_item.CType})</i><br>
                     {data_item_item.bodytext -> f:format.crop(maxCharacters:500, respectWordBoundaries:'1') -> f:format.html()}
                  </qpx:editLink>
                  <br>
               </f:for>
            </f:if>

         </td>
      </f:for>
   </tr>
</table>

Hier nun die modifizierte und fertige Fluid-Vorlage für den Mehrspalter im Frontend  (siehe Abb. 5 in Tab 5):

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
{namespace qpx=kupix\qpxviewhelper\ViewHelpers}

<div id="c{data.uid}"
   class="
      {f:if(condition: '{data.frame_class} != none', then: ' frame frame-{data.frame_class} frame-layout-{data.layout}')}
      {f:if(condition: data.space_before_class, then: ' frame-space-before-{data.space_before_class}')}
      {f:if(condition: data.space_after_class, then: ' frame-space-after-{data.space_after_class}')}
      {qpx:CeCatName(uid:'{data.uid}',tableCell:'title',table:'tt_content')}
   "

   <f:alias map="{comeFromDynbox:0}">
      <f:render partial="PartParallaxStyleAndData" arguments="{_all}" />
   </f:alias>
>

   <f:render partial="Header/Header" arguments="{
      header: data.header,
      layout: data.header_layout,
      style:  data.header_style,
      positionClass: '{f:if(condition: data.header_position, then: \'ce-headline-{data.header_position}\')}',
      link: data.header_link,
      default: settings.defaultHeaderType}"
   />

   <f:if condition="{data.tx_mask_card_columns}">
      <div class="
         qpx_multicolumn
         {data.tx_mask_card_columns -> f:count()}_columns
         {f:if(condition: data.tx_mask_column_equal_height, then: ' equal_height')}
         {f:if(condition:'{data.tx_mask_column_animation} < 999', then:' animatedParent')}
      ">
         <f:for each="{data.tx_mask_card_columns}" as="data_item" iteration="colnr">
            <div
               class="
                  mcol
                  mcol{colnr.cycle}
                  {f:if(condition:'{data_item.tx_mask_column_animation}', then: 'animated {data_item.tx_mask_column_animation}')}
                  {f:if(condition:'{data_item.tx_mask_column_animation_delay} && {data_item.tx_mask_column_animation}', then: ' {data_item.tx_mask_column_animation_delay}')}
                  {f:if(condition:'{data_item.tx_mask_column_animation_slow}  && {data_item.tx_mask_column_animation}',then:' slow')}
               "

               style="
                  {f:if(condition: data.tx_mask_columns_margin,        then: 'margin-right:{data.tx_mask_columns_margin};')}
                  {f:if(condition: data_item.tx_mask_column_width,     then: 'width:{data_item.tx_mask_column_width};')}
                  {f:if(condition: data_item.tx_mask_column_bg_color,  then: 'background-color:{data_item.tx_mask_column_bg_color};')}
                  {f:if(condition: data_item.tx_mask_column_color,     then: 'color:{data_item.tx_mask_column_color};')}
                  {f:if(condition: data_item.tx_mask_column_padding,   then: 'padding:{data_item.tx_mask_column_padding};')}
               "
            >
               <f:if condition="{data_item.tx_mask_column_content}">
                  <f:for each="{data_item.tx_mask_column_content}" as="data_item_item">
                     <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item_item.uid}</f:cObject><br />
                  </f:for>
               </f:if>

            </div>
         </f:for>
      </div> <!-- .qpx_multicolumn -->
   </f:if>
</div>

</html>