Extbase / Fluid: Image ViewHelper erweitern für Lazyloading

11.03.2014 23:33:00 • Categories: Javascript, Extbase/Fluid • Tags: Jquery, Extbase, Fluid, Lazyloading

Extbase / Fluid: Image ViewHelper erweitern für Lazyloading

Mobile ist im kommen. Vielleicht kann es auch auf umfangreichen Seiten mit vielen Bilder nötig sein, Bilder erst zu laden wenn diese im sichtbaren Bereich erscheinen um Ladezeiten zu verkürzen bzw. aufzuteilen. Twitter und Facebook nutzen diese Technik und bei der Bildersuche in Suchmaschinen dürfte dieses Feature schon mal aufgefallen sein.

Im jQuery Plugin Fundus gibt es eine Lösung: Lazy Load Plugin for jQuery . Weitere Argumente für Lazy Loading sind auf dieser Homepage zu finden ;-)

Und zu guter letzt auch noch ein LazyImage ViewHelper für Fluid. Dieser erweitert den Standard ViewHelper und tauscht das "src"-Attribut gegen das "data-original"-Attribut für das jQuery Plugin.

<?php
namespace YourVendor\YourExtKey\ViewHelpers;
/***

Copyright notice


All rights reserved


This script is part of the TYPO3 project. The TYPO3 project is
free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.


The GNU General Public License can be found at
http://www.gnu.org/copyleft/gpl.html.


This script is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.


This copyright notice MUST APPEAR in all copies of the script!
***/

class LazyImageViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper {
/**
 * Initialize arguments.
 *
 * @return void
 */
public function initializeArguments() {
    parent::initializeArguments();
    $this-&gt;registerTagAttribute('data-original', 'string', 'original image for lazy loading', FALSE);
}

/**
 * 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 string $width width of the image. This can be a numeric value representing the fixed width of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
 * @param string $height height of the image. This can be a numeric value representing the fixed height of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
 * @param integer $minWidth minimum width of the image
 * @param integer $minHeight minimum height of the image
 * @param integer $maxWidth maximum width of the image
 * @param integer $maxHeight maximum height of the image
 * @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, $width = NULL, $height = NULL, $minWidth = NULL, $minHeight = NULL, $maxWidth = NULL, $maxHeight = NULL, $treatIdAsReference = FALSE, $image = NULL) {
    if (is_null($src) &amp;&amp; is_null($image) || !is_null($src) &amp;&amp; !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-&gt;imageService-&gt;getImage($src, $image, $treatIdAsReference);
    $processingInstructions = array(
        'width' =&gt; $width,
        'height' =&gt; $height,
        'minWidth' =&gt; $minWidth,
        'minHeight' =&gt; $minHeight,
        'maxWidth' =&gt; $maxWidth,
        'maxHeight' =&gt; $maxHeight,
    );
    $processedImage = $this-&gt;imageService-&gt;applyProcessingInstructions($image, $processingInstructions);
    $imageUri = $this-&gt;imageService-&gt;getImageUri($processedImage);

    $this-&gt;tag-&gt;addAttribute('data-original', $imageUri);
    $this-&gt;tag-&gt;addAttribute('width', $processedImage-&gt;getProperty('width'));
    $this-&gt;tag-&gt;addAttribute('height', $processedImage-&gt;getProperty('height'));

    $alt = $image-&gt;getProperty('alternative');
    $title = $image-&gt;getProperty('title');

    // The alt-attribute is mandatory to have valid html-code, therefore add it even if it is empty
    if (empty($this-&gt;arguments['alt'])) {
        $this-&gt;tag-&gt;addAttribute('alt', $alt);
    }
    if (empty($this-&gt;arguments['title']) &amp;&amp; $title) {
        $this-&gt;tag-&gt;addAttribute('title', $title);
    }

    return $this-&gt;tag-&gt;render();
}
}
?>

< Zurück | ^ nach oben