Create image descriptions in media management

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, '')}
}

Multilingual websites

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

To create these translations automatically, you can use LostInTranslation and the following Fusion code. Here German 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.noGerman = ${site.context.dimensions.language[0] != 'de'}
 fallback.@process.translate = ${value ? Sitegeist.LostInTranslation.translate(value, site.context.dimensions.language[0], 'de') : value}
}

Configuration

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

NEOSidekick:
  AiAssistant:
    altTextGeneratorModule:
      # Defines whether only assets 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