Neos CMS: Image Varianten in Neos 8

Bildvarianten in Neos CMS 8.3 zentral verwalten: Ein praktischer Helper für responsive Images

🔍 Problemstellung

Neos CMS bietet mit dem AssetVariantGenerator eine robuste Grundlage, um automatisch Bildvarianten zu erstellen – z. B. für responsive Designs, unterschiedliche Breakpoints

… oder spezielle Bildformate. Im Redaktionsalltag fehlt jedoch häufig ein einfacher Weg, gezielt auf bestimmte Varianten zuzugreifen. Gerade wenn eine Webagentur oder Internetagentur moderne, responsive Websites umsetzt, sind effiziente Lösungen für Bildhandling unerlässlich.

🧩 Die Lösung: Ein Eel-Helper für Bildvarianten

Der folgende Helper ermöglicht es, Varianten eines Bildes anhand eines Preset-Namens auszulesen und deren URLs bereitzustellen. Ideal für Projekte, in denen eine Web Agentur auf saubere Trennung von Logik und Präsentation achtet.

// Datei: Classes/Eel/ImageVariantHelper.php
namespace Vendor\Package\Eel;

use Neos\Eel\ProtectedContextAwareInterface;
use Neos\Flow\Annotations as Flow;
use Neos\Media\Domain\Model\ImageInterface;
use Neos\Media\Domain\Service\AssetVariantGenerator;
use Neos\Flow\ResourceManagement\ResourceManager;

class ImageVariantHelper implements ProtectedContextAwareInterface
{
    /**
     * @Flow\Inject
     * @var AssetVariantGenerator
     */
    protected $assetVariantGenerator;

    /**
     * @Flow\Inject
     * @var ResourceManager
     */
    protected $resourceManager;

    public function getVariants(ImageInterface $image, string $presetName): array
    {
        if (!$image instanceof ImageInterface) {
            return [];
        }

        $variants = $this->assetVariantGenerator->createVariants($image);
        $result = [];

        foreach ($variants as $variant) {
            if ($variant->getPresetIdentifier() !== $presetName) {
                continue;
            }

            $resource = $variant->getResource();
            if ($resource !== null) {
                $uri = $this->resourceManager->getPublicPersistentResourceUri($resource);
                $result[$variant->getPresetVariantName()] = $uri;
            }
        }

        return $result;
    }

    public function allowsCallOfMethod($methodName)
    {
        return true;
    }
}

⚙️ Registrierung in Settings.yaml

Neos:
  Fusion:
    defaultContext:
      ImageVariants: 'Vendor\Package\Eel\ImageVariantHelper'

🛠 Nutzung im Fusion-Template

imageUri = ${ImageVariants.getVariants(image, 'ResponsivePreset')['desktop']}

srcset = ${Array.map(ImageVariants.getVariants(image, 'ResponsivePreset'), (key, value) -> value + ' ' + key)}

📦 Presets definieren

Neos:
  Media:
    variants:
      ResponsivePreset:
        desktop:
          width: 1200
        tablet:
          width: 800
        mobile:
          width: 480

✅ Vorteile

• Zentrale, wiederverwendbare Logik für Bild-Handling
• Saubere Trennung von Layout und Daten – ideal für jede Webagentur
• Performance-freundlich durch gezielte Generierung

🧩 Optional: Bildmetadaten mitliefern

$result[$variant->getPresetVariantName()] = [
    'uri' => $uri,
    'width' => $resource->getWidth(),
    'height' => $resource->getHeight()
];

🏁 Fazit

Mit diesem Eel-Helper lassen sich Bildvarianten in Neos effizient und flexibel einsetzen – ideal für responsive Websites mit klarer Struktur. Besonders für eine Internetagentur oder Web Agentur, die auf moderne CMS-Lösungen setzt, bietet der Ansatz eine saubere und skalierbare Umsetzung.