Zum Inhalt springen

Lightbox + Vorschaubild Generierung

Erstellt am 3. November 2011 · 1 Antwort · letzte Antwort am 3. November 2011

Tags: ViewHelper, Bilder, Frage

Typo3Cuckoo ·

Hi,

mit der aktuellen TYPO3 Version 4.5.7 ist es ja recht einfach eine Lightbox einzubinden. Das funktioniert auch schon sehr gut 🙂

Ich habe eine Bildergalerie-Extension programmiert, die mir die Bilder in einer Lightbox anzeigt (also ganz normal ein Haufen Thumbnails auf der Webseite und wenn man auf ein Thumbnail klickt öffnet sich das Bild in der Lightbox).

Das Problem dabei ist jedoch, dass einige Bilder bis zu 5MB groß sind und diese werden dann in der Lightbox geladen. Das darf natürlich nicht sein!

Wie kann ich automatisch eine verkleinerte Version der Originaldatei generieren und diese dann mit der Lightbox so verlinken, dass wenn man ein Thumbnail anklickt nicht die Originaldatei geladen wird sondern eben die verkleinerte Version?

Zu Zeiten der traditionellen Extensionentwicklung hab ich das über ein, in PHP aufgebautes Typoscript-Array erreicht. Das sah dann in etwa so aus:

<?php

// Dieses Bild wird in der Lightbox geladen
$previewImageTSConf = array(
	'file' => $img_path,
	'file.' => array(
		'maxW' => $this->image_preview_width,
		'maxH' => $this->image_preview_height,
	),
);

// Das sind die Thumbnails, welche beim Anklicken das Preview-Bild in der Lightbox laden
$imgTSConfig = array(
	'altText' => $image_data['alttext'],
	'titleText' => $image_data['title'],
	'file' => $img_path,
	'file.' => array(
		'maxW' => $this->image_thumb_width,
		'maxH' => $this->image_thumb_height,
		'width' => $this->image_thumb_width.'c',
		'height' => $this->image_thumb_height.'c',
	),
	'imageLinkWrap' => 1,
	'imageLinkWrap.' => array(
		'enable' => 1,
		'typolink.' => array(
			'parameter' => $this->cObj->IMG_RESOURCE($previewImageTSConf),
			'title' => $image_data['title'],
			'ATagParams' => 'class="mbgal_mediathek" id="mb'.$count.'"',
		),
	),
);

$image_obj = $this->cObj->IMAGE($thumbnailImageTSConf);

?>

Wie macht man das jetzt mit Extbase und Fluid?
cObject-Viewhelper vielleicht?

Vielen Dank schon mal 🙂

Typo3Cuckoo ·

Extbase is einfach geil! Hab die Lösung gefunden 🙂

Es gibt den Uri.Image-Viewhelper (Tx_Fluid_ViewHelpers_Uri_ImageViewHelper), der einem die URL zu einem generierten Bild liefert.

Hier der Ausschnitt aus meine Fluid Template (Inline Notation):

<f:link.page pageUid="{f:uri.image(src:'{media.filePath}{media.fileName}', minWidth:300, maxWidth:800, minHeight:300, maxHeight:800)}">
	<f:image src="{media.filePath}{media.fileName}" width="242.c-0" height="136.c-0"/>
</f:link.page>