Lebens- und Trauerhilfe e.V. – Düren
Seit Jahren war Verein ohne eigenen Webauftritt. Die Domäne war auf die Seiten des Bistums Aachen umgelenkt worden. Das sollte sich ändern!
⇒ mehrEine 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:
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>
Ich hoffe, dass Euch diese Doku. ein wenig weiter hilft? Kommentar dazu entweder auf Facebook oder per Mail.