Image description generator in Neos CMS

Node-based image descriptions

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

'NEOSidekick.Site:Content.Image.Block':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: Image
  properties:
    image:
      type: Neos\Media\Domain\Model\ImageInterface
      ui:
        label: 'Image'
        reloadIfChanged: true
        inspector:
          group: general
          position: 50
    alternativeText:
      type: string
      ui:
        label: 'Alternative Text'
        help:
          message: 'This text is used for accessibility and search engine optimization.'
        reloadIfChanged: false
        inspector:
          group: general
          position: 100
      validation:
        'Neos.Neos/Validation/NotEmptyValidator': [ ]

NEOSidekick helps to create description texts with the following YAML:

    alternativeText:
      ...
      ui:
        inspector:
          editor: 'NEOSidekick.AiAssistant/Inspector/Editors/MagicTextAreaEditor'
          editorOptions:
            module: 'alt_tag_generator'
            arguments:
              url: 'SidekickClientEval: AssetUri(node.properties.image)'

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

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

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}
}

Configuration

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

NEOSidekick:
  AiAssistant:
    altTextGeneratorModule:
      # 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