TYPO3: ViewHelper für Foundation Interchange

Geschrieben von in TYPO3 am

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}}" />

Kommentare sind geschlossen.