Image description generator in Neos CMS

Image alternative texts are essential for SEO and accessibility. With good image descriptions, you can help Google and screen readers to understand your images.

The simple approach

Node-based image descriptions

Websites that must be accessible, traditionally have a mandatory alternative text for each content element with an image.

'Neos.Neos:Content': true
label: Image
type: Neos\Media\Domain\Model\ImageInterface
label: 'Image'
reloadIfChanged: true
group: general
position: 50
type: string
label: 'Alternative Text'
message: 'This text is used for accessibility and search engine optimization.'
reloadIfChanged: false
group: general
position: 100
'Neos.Neos/Validation/NotEmptyValidator': [ ]

NEOSidekick helps to create description texts with the following YAML:

editor: 'NEOSidekick.AiAssistant/Inspector/Editors/MagicTextAreaEditor'
module: 'alt_tag_generator'
url: 'SidekickClientEval: AssetUri('

With this approach editors have to explicitly write a description text for each usage of an image, and many are very annoyed by this.

The editor-oriented approach

Asset-based image descriptions

If the image is used several times, it quickly becomes repetitive. Therefore, you can use the title or description field in the media management to write a description text for each image.

This text is used with the following fusion code if it is not overwritten at the node. Whether you use the title or description field is a matter of taste; according to our Slack survey, the majority prefer the title.

prototype(NEOSidekick.Site:Integration.Helper.ImageAlt) < prototype(Neos.Fusion:Value) {
image = ${q(node).property('image')}
alternativeText = ${q(node).property('alternativeText')}
value = ${this.alternativeText || this.image.title || String.replace(String.replace(this.image.resource.filename, '_', ' '), '.' + this.image.resource.fileextension, '')}


Our image generator can help you create dozens of image descriptions in no time.

Extension of the assest-based approach

Multilingual websites

The properties of assets in the Neos media management does not have language dimensions. Therefore, you can only specify the description text in one language.

To create translations automatically, you can use LostInTranslation and the following Fusion code. In this example, Englisch is the default language, and in all other languages the image title is translated.

prototype(NEOSidekick.Site:Integration.Helper.ImageAlt) < prototype(Neos.Fusion:Value) {
image = ${q(node).property('image')}
alternativeText = ${q(node).property('alternativeText')}

value = ${this.alternativeText || this.fallback}
fallback = ${this.image.title || String.replace(String.replace(this.image.resource.filename, '_', ' '), '.' + this.image.resource.fileextension, '')}
fallback.@process.translate.@if.notEnglish = ${site.context.dimensions.language[0] != 'en'}
fallback.@process.translate = ${value ? Sitegeist.LostInTranslation.translate(value, site.context.dimensions.language[0], 'en') : value}



To always use the same configuration, you can configure NEOSidekick in YAML:

# Defines whether only asset that are used in content should be processed, null let's the user choose
# Allowed: true, false, null
onlyAssetsInUse: null
# The AssetInterface property to write the generated value to, null let's the user choose
# Allowed: title, caption, null
propertyName: null
# Predefines how many images should be processed per page, to avoid overload, null let's the user choose
# Allowed: 5, 10, 15, 20, 25, null
limit: 10
# The language to write the text in, see allowed language keys in README
language: null


Start making your images SEO-friendly now!

For the feature launch, everyone can use the automatic generation of image alternative texts on a fair-use basis.