Neos CMS: Image variants in Neos 8

Manage Image Variants Centrally in Neos CMS 8.3: A Practical Helper for Responsive Images

🔍 Problem

With the AssetVariantGenerator, Neos CMS provides a robust foundation for automatically creating image variants – e.g. for responsive designs and different breakpoints

… or specific image formats. However, in everyday editorial work, there is often a lack of a simple way to access specific variants directly. Especially when a web agency or internet agency implements modern, responsive websites, efficient solutions for image handling are essential.

🧩 The Solution: An Eel Helper for Image Variants

The following helper makes it possible to retrieve image variants based on a preset name and provide their URLs. This is ideal for projects where a web agency focuses on a clean separation between logic and presentation.

// File: 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;
}
```

} 

⚙️ Registration in Settings.yaml

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

🛠 Usage in the Fusion Template

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

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

📦 Defining Presets

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

✅ Advantages

• Centralized, reusable logic for image handling
• Clean separation of layout and data – ideal for any web agency
• Performance-friendly through targeted generation

🧩 Optional: Include Image Metadata

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

🏁 Conclusion

With this Eel helper, image variants can be used efficiently and flexibly in Neos – ideal for responsive websites with a clear structure. Especially for an internet agency or web agency that relies on modern CMS solutions, this approach provides a clean and scalable implementation.