MASK-Multicolumn

1: CE "multicolumn" erstellen

2: Backend-Ansichten

Eine kurze Beschreibung, wie man mit der Ext. MASK ein Multi-Spalten-CE erstellen kann. Voraussetzung ist natürlich, dass die Extension »Mask« geladen ist und als statisches Objekt im Template inkludiert wird.

Es folgen zuerst drei Screenshots bzgl. Mask und der Seite mit dem Mehrspalter im BE:

3: Fluidvorlage Backend

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>

 

4: Fluidvorlage Frontend

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>

 

5: Frontend Ansicht

Ich hoffe, dass Euch diese Doku. ein wenig weiter hilft? Kommentar dazu entweder auf Facebook oder per Mail.