GIFBUILDERS

An own Image-ViewHelper

First we create a custom ViewHelper in our sitepackage (or the extension we want to use). Since we do not want to reinvent the wheel, we inherit from the standard class and only make changes where necessary.

<?php
namespace MarcWillmann\Sitepackage\ViewHelpers;

use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\Imaging\GifBuilder;
use TYPO3\CMS\Core\Imaging\ImageManipulation\CropVariantCollection;
use TYPO3\CMS\Extbase\Exception;
use TYPO3\CMS\Core\Resource\Exception\ResourceDoesNotExistException;

class ImageViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper
{


    /**
     * Initialize arguments.
     */
    public function initializeArguments()
    {
        parent::initializeArguments();
        $this->registerArgument('gifBuilderEffect', 'string', 'e.g. blur=20 | gamma=1.3', false, '');

    }
}

Hereby we register an additional argument, which can be used to pass the desired effect in the template later.

The method render is almost 1:1 taken from the original file

public function render()
    {
        if (($this->arguments['src'] === null && $this->arguments['image'] === null) || ($this->arguments['src'] !== null && $this->arguments['image'] !== null)) {
            throw new Exception('You must either specify a string src or a File object.', 1382284106);
        }

        try {
            $gifBuilderEffect = $this->arguments['gifBuilderEffect'];

            $image = $this->imageService->getImage($this->arguments['src'], $this->arguments['image'], $this->arguments['treatIdAsReference']);
            $cropString = $this->arguments['crop'];
            if ($cropString === null && $image->hasProperty('crop') && $image->getProperty('crop')) {
                $cropString = $image->getProperty('crop');
            }
            $cropVariantCollection = CropVariantCollection::create((string)$cropString);
            $cropVariant = $this->arguments['cropVariant'] ?: 'default';
            $cropArea = $cropVariantCollection->getCropArea($cropVariant);
            $processingInstructions = [
                'width' => $this->arguments['width'],
                'height' => $this->arguments['height'],
                'minWidth' => $this->arguments['minWidth'],
                'minHeight' => $this->arguments['minHeight'],
                'maxWidth' => $this->arguments['maxWidth'],
                'maxHeight' => $this->arguments['maxHeight'],
                'crop' => $cropArea->isEmpty() ? null : $cropArea->makeAbsoluteBasedOnFile($image),
            ];
            $processedImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);

            if ($gifBuilderEffect) {
                $conf = [
                    1 => 'IMAGE',
                    '1.' => [
                        'file' => $processedImage->getForLocalProcessing(false)
                    ],
                    20 => 'EFFECT',
                    '20.' => [
                        'value' => $gifBuilderEffect
                    ]
                ];
                $conf['XY'] = '[1.w],[1.h]';
                /** @var GifBuilder $gifCreator */
                $gifCreator = GeneralUtility::makeInstance(GifBuilder::class);
                $gifCreator->init();
                $gifCreator->start($conf, []);
                $imageUri = $gifCreator->gifBuild();
            }
            else {
                $imageUri = $this->imageService->getImageUri($processedImage, $this->arguments['absolute']);
            }

            if (!$this->tag->hasAttribute('data-focus-area')) {
                $focusArea = $cropVariantCollection->getFocusArea($cropVariant);
                if (!$focusArea->isEmpty()) {
                    $this->tag->addAttribute('data-focus-area', $focusArea->makeAbsoluteBasedOnFile($image));
                }
            }
            $this->tag->addAttribute('src', $imageUri);
            $this->tag->addAttribute('width', $processedImage->getProperty('width'));
            $this->tag->addAttribute('height', $processedImage->getProperty('height'));

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

            // The alt-attribute is mandatory to have valid html-code, therefore add it even if it is empty
            if (empty($this->arguments['alt'])) {
                $this->tag->addAttribute('alt', $alt);
            }
            if (empty($this->arguments['title']) && $title) {
                $this->tag->addAttribute('title', $title);
            }
        } catch (ResourceDoesNotExistException $e) {
            // thrown if file does not exist
            throw new Exception($e->getMessage(), 1509741911, $e);
        } catch (\UnexpectedValueException $e) {
            // thrown if a file has been replaced with a folder
            throw new Exception($e->getMessage(), 1509741912, $e);
        } catch (\RuntimeException $e) {
            // RuntimeException thrown if a file is outside of a storage
            throw new Exception($e->getMessage(), 1509741913, $e);
        } catch (\InvalidArgumentException $e) {
            // thrown if file storage does not exist
            throw new Exception($e->getMessage(), 1509741914, $e);
        }

        return $this->tag->render();
    }

The interesting part is this one, the better overview taken out of the snippet above:

[...]
$processedImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);

if ($gifBuilderEffect) {
    $conf = [
        1 => 'IMAGE',
        '1.' => [
            'file' => $processedImage->getForLocalProcessing(false)
        ],
        20 => 'EFFECT',
        '20.' => [
            'value' => $gifBuilderEffect
        ]
    ];
    $conf['XY'] = '[1.w],[1.h]';
    /** @var GifBuilder $gifCreator */
    $gifCreator = GeneralUtility::makeInstance(GifBuilder::class);
    $gifCreator->init();
    $gifCreator->start($conf, []);
    $imageUri = $gifCreator->gifBuild();
}
else {
    $imageUri = $this->imageService->getImageUri($processedImage, $this->arguments['absolute']);
}

In case a GIFBUILDER statement is passed to ViewHelper with the newly introduced parameter, we apply it after the normal image manipulations are finished.