TYPO3: ViewHelper für Foundation Interchange

Foundation Interchange ist eine Technik, bei der Media Queries verwendet werden, um Inhalte resonsiv zu laden. Ok, vielleicht klingt es auf englisch besser: „Interchange uses media queries to dynamically load responsive content that is appropriate for different users‘ browsers.“

Da ich Foundation einsetze und die Interchange Technik super finde, dachte, dass es an der Zeit ist, einen View Helper für Bilder zu schreiben. Bisher habe ich es nur im Template gelöst:

<img data-interchange="[{f:uri.image(image: image, width: settings.imageWidth)}, (default)], [{f:uri.image(image: image, maxWidth: settings.imageWidth)}, (large)]" />

Leider hat diese Technik einen entscheidenden Nachteil – die alt und title-Attribute des Bildes werden nicht ausgegeben. Wenn man diese abhängig vom Bild ausgeben lassen würde, bräuchte man einen ViewHelper dafür.

Ich habe einen ViewHelper entwickelt, der von ImageViewHelper in Fluid ableitet und fast genauso funktioniert. Mit einem kleinen Unterschied: anstatt die Bildgröße direkt zu übergeben, übergibt man eine Interchange-Konfiguration. Und das ist der ViewHelper:

<?php
namespace My\Extension\ViewHelpers;
 
class ImageInterchangeViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper {
 
	/**
	 * Resizes a given image (if required) and renders the respective img tag
	 *
	 * @see http://typo3.org/documentation/document-library/references/doc_core_tsref/4.2.0/view/1/5/#id4164427
	 * @param string $src a path to a file, a combined FAL identifier or an uid (integer). If $treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. If you already got a FAL object, consider using the $image parameter instead
	 * @param array $interchangeSettings
	 * @param boolean $treatIdAsReference given src argument is a sys_file_reference record
	 * @param FileInterface|AbstractFileFolder $image a FAL object
	 *
	 * @throws \TYPO3\CMS\Fluid\Core\ViewHelper\Exception
	 * @return string Rendered tag
	 */
	public function render($src = NULL, $interchangeSettings = NULL, $treatIdAsReference = FALSE, $image = NULL) {
		if (is_null($src) && is_null($image) || !is_null($src) && !is_null($image)) {
			throw new \TYPO3\CMS\Fluid\Core\ViewHelper\Exception('You must either specify a string src or a File object.', 1382284106);
		}
		$image = $this->imageService->getImage($src, $image, $treatIdAsReference);
		$interchangeData = array();
		foreach($interchangeSettings as $key => $settings) {
			$processingInstructions = array(
				'width' => $settings['width'],
				'height' => $settings['height'],
				'minWidth' => $settings['minWidth'],
				'minHeight' => $settings['minHeight'],
				'maxWidth' => $settings['maxWidth'],
				'maxHeight' => $settings['maxHeight'],
			);
			$processedImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);
			$imageUri = $this->imageService->getImageUri($processedImage);
 
			$interchangeData[] = '['.$imageUri.', ('.$key.')]';
		}
 
		$this->tag->addAttribute('data-interchange', implode(',', $interchangeData));
 
		$alt = $image->getProperty('alternative');
		$title = $image->getProperty('title');
 
		if (empty($this->arguments['alt'])) {
			$this->tag->addAttribute('alt', $alt);
		}
		if (empty($this->arguments['title']) && $title) {
			$this->tag->addAttribute('title', $title);
		}
 
		return $this->tag->render();
	}
 
}

Und so kann man ihn verwenden:

<my:imageInterchange image="{image}" interchangeSettings="{small: {width: 400}, medium: {width: 800}, default: {width: 1200}}" />

Geschrieben in TYPO3 | Kommentare deaktiviert für TYPO3: ViewHelper für Foundation Interchange

TYPO3: Externe Links in Menü mit Klasse versehen

Damit man die externen Links in einer Navigation auch als solche erkennen kann (mit CSS ein Icon davor klatschen), müssen die entsprechenden Seiten in der Navigation mit einer Klasse versehen werden. Das ist der Code dafür:

lib.navigation = HMENU
lib.navigation {
	special = directory
	special.value = {$rootPage}
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul>|</ul>
 
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
			ATagParams.stdWrap.cObject = TEXT
			ATagParams.stdWrap.cObject {
				value = class="external"
				if.equals = 3
				if.value.field = doktype
			}
		}
		[...]
	}
}

Geschrieben in TYPO3 | Kommentare deaktiviert für TYPO3: Externe Links in Menü mit Klasse versehen

TYPO3: FlexForm Conditions verknüpfen

Ein Teil vom FlexForm soll nur angezeigt werden, wenn z.B. eine bestimmte Action ausgewählt ist (der Klassiker):

<settings.whatever> 
	<TCEforms> 
		<label>Das ist das Feld</label> 
		<displayCond>FIELD:switchableControllerActions:=:Event->list;</displayCond>
		<config>
		</config>
	</TCEforms>
</settings.whatever>

Wenn das Feld angezeigt werden soll, wenn eine von mehreren Actions ausgewählt ist? Dann so:

<settings.whatever> 
	<TCEforms> 
		<label>Das ist das Feld</label> 
		<displayCond>
			<OR>
				<numIndex index="0">FIELD:switchableControllerActions:=:Event->list;</numIndex>
				<numIndex index="1">FIELD:switchableControllerActions:=:Event->teaser;</numIndex>
			</OR>
		</displayCond>
		<config>
		</config>
	</TCEforms>
</settings.whatever>

Wichtig ist, dass bei numIndex jeweils ein Index angegeben ist. Danke an diesen Blogpost hier: Flexform displayCond with OR relation.

Geschrieben in TYPO3 | Kommentare deaktiviert für TYPO3: FlexForm Conditions verknüpfen

Welches Stylesheet greift denn nun?

Das Framework Foundation hat mehrere Breakpoints für Responsive Websites. Vielleicht wissen manche Frontend-Entwickler immer sofort, in welchem Abschnitt (zwischen welchen Breakpoints) sie sich nun befinden. Mir fällt es manchmal schwer, das auf den ersten Blick zu erkennen – ist das schon large oder noch medium. Und so habe ich ein CSS-Schnipsel, das ohne den Code der Seite zu verändern in der oberen Ecke anzeigt, in welche Kategorie die aktuelle Auflösung eingeordnet wird.

body:after {
	content: "other";
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	border: 1px solid silver;
	color: silver;
	z-index: 100;
	padding: 10px;
}
@media #{$large-only} {
	body:after {
		content: "large";
	}
}
@media #{$medium-only} {
	body:after {
		content: "medium";
	}
}
@media #{$small-only} {
	body:after {
		content: "small";
	}
}

Geschrieben in css | Kommentare deaktiviert für Welches Stylesheet greift denn nun?

TYPO3: Foundation und Form-Extension

Bereits seit einiger Zeit nutzt ich Foundation als Basis für meine Projekte. Da ich für ein einfaches Mail-Formular nicht gleich Powermail oder Formhandler nehmen wollte, wollte ich die Ausgabe des Formulars an den HTML-Code von Foundation anpassen, damit die Styles direkt greifen. Das hat auch fast geklappt (siehe unten).
Es ist nicht möglich, den contrainerWrap zu entfernen. Sobald ich nur noch stehen blieb, war das Formular komplett verschwunden, d.h. irgendwo wird doch ein Wrapper erwartet. Ganz ohne CSS-Anpassungen kommt man dann doch nicht aus, aber diese sind überschaubar.

Weiterhin finde ich es doof, dass Pflichtfelder nicht mit einem required-Attribut versehen werden. Und bei der Validierung sollte das Label und das Feld ebenfalls mit der Klasse „error“ versehen werden. Nach ein paar Stunden Recherche im Code von Form habe ich es schließlich aufgegeben und hoffe, dass tx_form bald auch auf Fluid-Templates umgestellt wird.

SASS:

.csc-mailform {
	.csc-form-element {
		margin-bottom: rem-calc(10);
	}
	.csc-form-element-submit input {
		@include button;
	}
	span.error {
		margin-bottom: 0;
	}
	input, select, textarea {
		margin-bottom: 0;
	}
}

TypoScript:

# Layout des Mailform anpassen #
tt_content.mailform.20.form {
	layout {
		containerWrap (
			<div class="form">
				<elements />
			</div>
		)
		elementWrap (
			<div class="row">
				<element />
			</div>
		)
		label (
			<label>
				<labelvalue />
				<mandatory />
			</label>
		)
		textblock (
			<div class="large-12 medium-12 columns">
				<textblock />
			</div>
		)
		textline (
			<div class="large-4 medium-4 columns">
				<label />
			</div>
			<div class="large-8 medium-8 columns">
				<input />
				<error />
			</div>
		)
		textarea (
			<div class="large-4 medium-4 columns">
				<label />
			</div>
			<div class="large-8 medium-8 columns">
				<textarea />
				<error />
			</div>
		)
		select (
			<div class="large-4 medium-4 columns">
				<label />
			</div>
			<div class="large-8 medium-8 columns">
				<select>
					<elements />
				</select>
				<error />
			</div>
		)
		submit (
			<div class="large-offset-4 medium-offset-4 large-8 medium-8 columns">
				<label />
				<input />
			</div>
		)
		error (
			<span class="error">
				<errorvalue />
			</span>
		)
	}
}

TYPO3: ViewHelper für Frontend-Links aus Scheduler-Tasks

Vor ein paar Monaten habe ich bereits darüber geschrieben, wie man aus z.B. einem Task, der E-Mails versendet, TYPO3 konform Links ins Frontend generieren kann. Nun habe ich das ganze in einen ViewHelper ausgelagert, damit man noch eleganter Links in Standalone-Templates generieren kann.

Hinwein: ich musste den Vendor und den Extensionnamen ändern, daher ist das nicht der tatsächlich funktionierende Code. Wenn es in der eigenen Extension nicht auf Anhieb klappt, dann Vendor und Extensionname anpassen.

Aufruf im Mail-Template:

{namespace my = My\Extension\ViewHelper}
[...]
<p><my:fe.link pageUid="{targetPageUid}" pluginName="Event" pluginArguments="{event: event}">zur Webseite mit Parameter</my:fe.link></p>
[...]

Und das ist der ViewHelper, abzulegen in ViewHelper/Fe/LinkViewHelper.php:

<?php
<?php
namespace My\Extension\ViewHelper\Fe;
 
class LinkViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper {
 
	/**
	 * @var string
	 */
	protected $tagName = 'a';
 
	/**
	 * Arguments initialization
	 *
	 * @return void
	 */
	public function initializeArguments() {
		$this->registerUniversalTagAttributes();
		$this->registerTagAttribute('name', 'string', 'Specifies the name of an anchor');
		$this->registerTagAttribute('rel', 'string', 'Specifies the relationship between the current document and the linked document');
		$this->registerTagAttribute('rev', 'string', 'Specifies the relationship between the linked document and the current document');
		$this->registerTagAttribute('target', 'string', 'Specifies where to open the linked document');
	}
 
	/**
	 * @param int $pageUid
	 * @param string $pluginName
	 * @param array $pluginArguments
	 * @return string content
	 */
	public function render($pageUid, $pluginName = NULL, $pluginArguments = NULL) {
		$this->initTSFE();
		$cObj = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Frontend\\ContentObject\\ContentObjectRenderer');
 
		$additionalParams = '';
		if(isset($pluginArguments) && is_array($pluginArguments) && isset($pluginName)) {
			foreach($pluginArguments as $key => $value) {
 
				$namespace = \TYPO3\CMS\Core\Utility\GeneralUtility::camelCaseToLowerCaseUnderscored($pluginName);
				if($value instanceof \TYPO3\CMS\Extbase\DomainObject\AbstractDomainObject) {
					if ($value->getUid() !== NULL) {
						$additionalParams.= '&tx_extension_'.$namespace.'['.$key.']='.$value->getUid();
					}
				} else {
					$additionalParams.= '&tx_extension_'.$namespace.'['.$key.']='.$value;
				}
			}
		}
 
		$uri = $cObj->typolink_URL(array('parameter' => $pageUid, 'additionalParams' => $additionalParams, 'forceAbsoluteUrl' => 1));
 
		$this->tag->addAttribute('href', $uri, FALSE);
		$this->tag->setContent($this->renderChildren());
		$this->tag->forceClosingTag(TRUE);
		return $this->tag->render();
	}
 
	protected function initTSFE($id = 1, $typeNum = 0) {
		\TYPO3\CMS\Frontend\Utility\EidUtility::initTCA();
		if (!is_object($GLOBALS['TT'])) {
			$GLOBALS['TT'] = new \TYPO3\CMS\Core\TimeTracker\NullTimeTracker;
			$GLOBALS['TT']->start();
		}
		$GLOBALS['TSFE'] = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Frontend\\Controller\\TypoScriptFrontendController',  
			$GLOBALS['TYPO3_CONF_VARS'], $id, $typeNum);
		$GLOBALS['TSFE']->connectToDB();
		$GLOBALS['TSFE']->initFEuser();
		$GLOBALS['TSFE']->determineId();
		$GLOBALS['TSFE']->initTemplate();
		$GLOBALS['TSFE']->getConfigArray();
 
		if (\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('realurl')) {
			$rootline = \TYPO3\CMS\Backend\Utility\BackendUtility::BEgetRootLine($id);
			$host = \TYPO3\CMS\Backend\Utility\BackendUtility::firstDomainRecord($rootline);
			$_SERVER['HTTP_HOST'] = $host;
		}
	}
}
?>

Geschrieben in TYPO3 | Kommentare deaktiviert für TYPO3: ViewHelper für Frontend-Links aus Scheduler-Tasks

Datum in Sublime umformatieren

Für ein Projekt brauchte ich ein paar Demo-User, die ich mir mit dem Fake Name Generator habe erstellen lassen. Das Format für Geburtsdatum in der Datei ist dd/mm/yyyy, meine Datenbank erfordert aber yyyy-mm-dd. Da ich mit Sublime entwickele und es dort die Möglichkeit gibt, Suchen und Ersetzen auch mit regulären Ausdrücken durchzuführen, kann man es so machen.

Suchen und Ersetzen, dann RegEx aktivieren.
Find What: (\d{1,2})/(\d{1,2})/(\d{4})
Replace With: ${3}-${2}-${1}

Geschrieben in default | Kommentare deaktiviert für Datum in Sublime umformatieren

Erfolgserlebnis

Nach jahrelanger Arbeit mit TYPO3 habe ich heute endlich verstanden, wie die Syntax für die Types und Palettendefinition im TCA sich zusammensetzt. Das tolle an TYPO3 ist, dass man das Backend sehr gut customizen kann. Man kann Felder beliebig anornden, gruppieren, umbenennen etc. Natürlich habe ich schonmal Formulare für neue Backend-Elemente konfiguriert, aber bisher meist das TCA vom Extension Builder erstellen lassen und dann nur noch geringfügig angepasst. Heute habe ich endlich verstanden, wie man Paletten unabhängig von Feldern definieren kann:
Das in types: --palette--;Datum;dates
Und das in palettes: 'dates' => array('showitem' => 'begin_date, begin_time, --linebreak--, end_date, end_time', 'canNotCollapse' => '1'),
Wie man Tabs definiert, wusste ich vorher auch schon
--div--;Registrierung, registration_date
Heute hats nochmal richtig Klick gemacht – nun steht absolut umwerfenden Backend-Formularen nichts mehr im Weg.

TYPO3: Edit-Links im eigenen Backend-Modul

In TYPO3 gibt existieren ja bereits einige Möglichkeiten, um Datensätze zu bearbeiten oder zu löschen. Manchmal reichen die normalen Ansichten nicht aus und man entwickelt ein Backend-Modul. Um nicht alle Formulare zum bearbeiten und erstellen von Datensätzen (inkl. Validierung!) neu zu implementieren, gibt es eine Möglichkeit aus dem eigenen Backend-Modul links zu den „normalen“ Funktionen in TYPO3 zu setzen. So habe ich z.B. eine Reihe von Veranstaltungen, die ich in meinem Backend-Modul anzeigen möchte. Sobald der Datensatz einer Veranstaltung bearbeitet werden soll, reichen mir für die Bearbeitung die TYPO3-Bordmittel.

Ein bisschen Suche hat ergeben, dass es eine solche Möglichkeit natürlich gibt – Artikel auf docs.typo3.org. Die Vorgehensweise ist folgende: man schreibt einen ViewHelper, der die Links generiert. Der Code für den ViewHelper ist auf der verlinkten Seite aber unvollständig: es gibt eine Extension namens „examples“, die sich über den Extension Manager installieren lässt und in der Datei \Documentation\Examples\ViewHelpers\Be\EditLinkViewHelper.php den Code des kompletten ViewHelpers enthält.

Wenn man die Extension „examples“ installiert und testet, dann stellt man schnell fest, dass sie buggy ist. Der Link an sich funktioniert, aber der Link zurück liefert den Fehler „invalid form/module token“. Außerdem ist es eigentlich nicht schön, dass man die returnUrl im Template setzen muss, meistens will man ja nur dahin zurück, wo man hergekommen ist. Also habe ich den ViewHelper angepasst: Die ReturnUrl wird automatisch gesetzt und das moduleToken ebenfalls.

public function render($parameters, $returnUrl = '') {
	$uri = 'alt_doc.php?' . $parameters;
	if (!empty($returnUrl)) {
		$uri .= '&returnUrl=' . rawurlencode($returnUrl);
	} else {
		$returnUrl = 'mod.php?M='.$_GET['M'].'&moduleToken='.$_GET['moduleToken'];
		$uri .= '&returnUrl=' . rawurlencode($returnUrl);
	}
 
	$this->tag->addAttribute('href', $uri);
	$this->tag->setContent($this->renderChildren());
	$this->tag->forceClosingTag(TRUE);
	return $this->tag->render();
}

Geschrieben in TYPO3 | Kommentare deaktiviert für TYPO3: Edit-Links im eigenen Backend-Modul

TYPO3: Frontend Links aus Backend Modul

Aus einem Task sollen Links zu Seiten generiert und per E-Mail verschickt werden. Wenn man den Fluid ViewHelper verwendet, dann werden Links ins Backend generiert. Es ist in dem Fall nicht das gewünschte Verhalten, aber sinnvoll. Sehr viel habe ich leider nicht dazu gefunden: einem Beitrag auf wissen.netzhaut.de und einen Beitrag im Forum auf typo3.net, der sich auf den Artikel vorher bezieht. Der Artikel auf netzhaut.de enthält noch die alten Klassennamen, diese müssen daher auf Namespaces angepasst werden. Weiterhin habe ich die Funktion umbenannt und noch ein paar Dinge verschönert. In meinem Fall nutze ich den Code in einem Scheduler-Task. Das ist meine Lösung:

class SendReminderTask extends \TYPO3\CMS\Scheduler\Task\AbstractTask {
	public function execute() {
		[...]
 
		$this->initFrontend();
 
		foreach($documents as $document) {
			[...]
 
			$cObj = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Frontend\\ContentObject\\ContentObjectRenderer');
			$linkConf = array(
				'parameter' => $this->extConf['targetPageUid'],
				'forceAbsoluteUrl' => 1,
				'additionalParams' => \TYPO3\CMS\Core\Utility\GeneralUtility::implodeArrayForUrl(NULL, array(
					'tx_myextension[action]' => 'extend',
					'tx_myextension[document]' => $document->getUid(),
					'tx_myextension[hash]' => $document->getHash(),
				)),
				'linkAccessRestrictedPages' => 1
			);
			$link = $cObj->typolink_URL($linkConf);
 
			[...]
		}
 
		return TRUE;
	}
 
	/*
	 * init frontnend to render frontend links in task
	 */
	protected function initFrontend() {
		$id = 1;
		$type = 0;
		if (!is_object($GLOBALS['TT'])) {
			$GLOBALS['TT'] = new \TYPO3\CMS\Core\TimeTracker\TimeTracker;
			$GLOBALS['TT']->start();
		}
		$GLOBALS['TSFE'] = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Frontend\\Controller\\TypoScriptFrontendController',  $GLOBALS['TYPO3_CONF_VARS'], $id, $typeNum);
		$GLOBALS['TSFE']->connectToDB();
		$GLOBALS['TSFE']->initFEuser();
		$GLOBALS['TSFE']->determineId();
		$GLOBALS['TSFE']->initTemplate();
		$GLOBALS['TSFE']->getConfigArray();
 
		if (\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('realurl')) {
			$rootline = \TYPO3\CMS\Backend\Utility\BackendUtility::BEgetRootLine($id);
			$host = \TYPO3\CMS\Backend\Utility\BackendUtility::firstDomainRecord($rootline);
			$_SERVER['HTTP_HOST'] = $host;
		}
	}
}

Geschrieben in TYPO3 | Kommentare deaktiviert für TYPO3: Frontend Links aus Backend Modul