Typo3 fluid image from external resource

Question

is it possible to resize images in fluid from external resource. I have an extension with datas from SOAP. So image URL looks like http://www.example.com/url/of/image/imagename.jpg.

<f:image src="{data.url.image}" with="300" />

is not working.

Answer 1

Working Version with cropping-feature for TYPO3 10.4 LTS:

<?php

declare(strict_types=1);

/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 *
 * Example: <xyz:externalImage filename="OPTINAL_FILENAME" src="EXTERNAL_URL" width="480c" height="270c" title="YOUR TITLE" alt="YOUR ALT" class="YOUR-CLASS" />
 */

namespace YourNamespaece\YourExtension\ViewHelpers;

use TYPO3\CMS\Core\Resource\ResourceFactory;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Extbase\Service\ImageService;
use TYPO3\CMS\Fluid\Core\Widget\Exception;
use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper;

class ExternalImageViewHelper extends AbstractTagBasedViewHelper {
    /**
     * @var string
     */
    protected $tagName = 'img';

    /**
     * @var \TYPO3\CMS\Extbase\Service\ImageService
     */
    protected $imageService;

    /**
     * @param \TYPO3\CMS\Extbase\Service\ImageService $imageService
     */
    public function injectImageService(ImageService $imageService)
    {
        $this->imageService = $imageService;
    }

    const UPLOAD_DIRECTORY = 'externalImages';
    const TEMP_PREFIX = 'diakonie_baukasten';

    /**
     * ResourceFactory
     *
     * @var ResourceFactory
     * @TYPO3\CMS\Extbase\Annotation\Inject
     */
    protected ResourceFactory $resourceFactory;

    /**
     * Initialize arguments.
     */
    public function initializeArguments()
    {
        parent::initializeArguments();
        $this->registerUniversalTagAttributes();
        $this->registerTagAttribute('alt', 'string', 'Specifies an alternate text for an image', false);
        $this->registerArgument('filename', 'string', 'Override filename for local file.', false, '');
        $this->registerArgument('src', 'string', 'a path to a file, a combined FAL identifier or an uid (int). 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', true, '');
        $this->registerArgument('width', 'string', '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.');
        $this->registerArgument('height', 'string', '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.');
        $this->registerArgument('minWidth', 'int', 'minimum width of the image');
        $this->registerArgument('minHeight', 'int', 'minimum height of the image');
        $this->registerArgument('maxWidth', 'int', 'maximum width of the image');
        $this->registerArgument('maxHeight', 'int', 'maximum height of the image');
        $this->registerArgument('absolute', 'bool', 'Force absolute URL', false, false);
    }

    /**
     * Resizes a given image (if required) and renders the respective img tag
     *
     * @see https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/
     *
     * @return string Rendered tag
     * @throws \Exception
     */
    public function render()
    {
        $src = (string)$this->arguments['src'];
        $filename = (string)$this->arguments['filename'];

        if ($src === '') {
            throw new Exception('You must either specify a string src', 1382284106);
        }

        // A URL was given as src, this is kept as is, and we can only scale
        if ($src !== '' && preg_match('/^(https?:)?\/\//', $src)) {
            if (filter_var($src, FILTER_VALIDATE_URL)) {
                $storage = $this->resourceFactory->getDefaultStorage();
                if (!$storage->hasFolder(self::UPLOAD_DIRECTORY)) {
                    $storage->createFolder(self::UPLOAD_DIRECTORY);
                }

                $externalFile = GeneralUtility::getUrl($src);
                if ($externalFile) {
                    $tempFileName = tempnam(sys_get_temp_dir(), self::TEMP_PREFIX);
                    $handle       = fopen($tempFileName, "w");
                    fwrite($handle, $externalFile);
                    fclose($handle);

                    if ($filename !== '') {
                        $fileNameNoExtension = preg_replace("/\.[^.]+$/", "", $src);
                        $fileExtension = str_replace($fileNameNoExtension,"", $src);
                        $src = $filename.$fileExtension;
                    }

                    $uploadFolder = $storage->getFolder(self::UPLOAD_DIRECTORY);
                    $file         = $uploadFolder->addFile($tempFileName, basename(basename($src)), 'replace');
                    $src          = $file->getPublicUrl();
                    unlink($tempFileName);

                    $image = $this->imageService->getImage($src, null, false);

                    $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' => null,
                    ];

                    $processedImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);
                    $imageUri = $this->imageService->getImageUri($processedImage, $this->arguments['absolute']);


                    $this->tag->addAttribute('src', $imageUri);
                    $this->tag->addAttribute('width', $processedImage->getProperty('width'));
                    $this->tag->addAttribute('height', $processedImage->getProperty('height'));

                    // 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', $image->hasProperty('alternative') ? $image->getProperty('alternative') : '');
                    }
                    // Add title-attribute from property if not already set and the property is not an empty string
                    $title = (string)($image->hasProperty('title') ? $image->getProperty('title') : '');
                    if (empty($this->arguments['title']) && $title !== '') {
                        $this->tag->addAttribute('title', $title);
                    }

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

                } else {
                    throw new \Exception(sprintf('External URL % cannot accessed.', $src), 1473233519);
                }
            }
        }
    }
}

Answer 2

Maybe an own ViewHelper which fetch the external image and save it to an temporary folder could help. After this you can modify the image.

Something like this (not tested):

<?php
  namespace MyNamespaece\MyExt\ViewHelpers;

  use TYPO3\CMS\Core\Utility\GeneralUtility;
  use TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper;
  use TYPO3\CMS\Core\Resource\FileInterface;
  use TYPO3\CMS\Extbase\Domain\Model\AbstractFileFolder;

  class ExternalImageViewHelper extends ImageViewHelper
  {

  const UPLOAD_DIRECTORY = 'externalImages';
  const TEMP_PREFIX = 'MyExt';

  /**
   * ResourceFactory
   *
   * @var \TYPO3\CMS\Core\Resource\ResourceFactory
   * @inject
   */
  protected $resourceFactory = null;

  /**
   * Resizes a given image (if required) and renders the respective img tag
   *
   * @see https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/
   *
   * @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
   *
   * @return string
   * @throws \Exception
   * @throws \TYPO3\CMS\Core\Resource\Exception\InsufficientFolderAccessPermissionsException
   * @throws \TYPO3\CMS\Core\Resource\Exception\InsufficientFolderWritePermissionsException
   * @throws \TYPO3\CMS\Fluid\Core\ViewHelper\Exception
   */
  public function render($src = null, $width = null, $height = null, $minWidth = null, $minHeight = null, $maxWidth = null, $maxHeight = null, $treatIdAsReference = false, $image = null)
  {
    if (filter_var($src, FILTER_VALIDATE_URL)) {
      $storage = $this->resourceFactory->getDefaultStorage();
      if (!$storage->hasFolder(self::UPLOAD_DIRECTORY)) {
        $storage->createFolder(self::UPLOAD_DIRECTORY);
      }

      $externalFile = GeneralUtility::getUrl($src);
      if ($externalFile) {
        $tempFileName = tempnam(sys_get_temp_dir(), self::TEMP_PREFIX);
        $handle       = fopen($tempFileName, "w");
        fwrite($handle, $externalFile);
        fclose($handle);

        $uploadFolder = $storage->getFolder(self::UPLOAD_DIRECTORY);
        $file         = $uploadFolder->addFile($tempFileName, basename(basename($src)), 'changeName');
        $src          = $file->getPublicUrl();
        unlink($tempFileName);
      } else {
        throw new \Exception(sprintf('External URL % cannot accessed.', $src), 1473233519);
      }
    }

    return parent::render($src, $width, $height, $minWidth, $minHeight, $maxWidth, $maxHeight, $treatIdAsReference, $image);
  }
}

Please Note: This ViewHelper has no check if the image is allready fetched! So an check should be integrated. Otherwise this viewhelper fetch the image at each page refresh!

As mentioned in the comments I want to clarify that this ViewHelper should not be used in any production environment. It should only demonstrate how the way to such an viewhelper could be. Compiled templates are not supported. Also no needed check if the file already exists is implemented. Your hosting environment could be flooded with downloads and can break you file quota!

Answer 3

The short answer is: This is not possible. The long answer is: Of course it is possible if you fetch the image first. There are various ways to do it:

• At runtime as rpflamm suggested by using a ViewHelper
• Do it in your controller/service when you fetch the SOAP call. IMO this would be the best way. Persist then the image and use the local path
• If the images you fetch are not that big, of course a resizing via CSS is also an option