Bildbeschreibungs-Generator im Neos CMS

Node-basierte Bildbeschreibungen

Webseiten, die barrierefrei sein müssen, haben klassischerweise bei jedem Inhaltselement mit Bild einen verpflichtenden Alternativtext.

'NEOSidekick.Site:Content.Image.Block':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: Bild
  properties:
    image:
      type: Neos\Media\Domain\Model\ImageInterface
      ui:
        label: 'Bild'
        reloadIfChanged: true
        inspector:
          group: general
          position: 50
    alternativeText:
      type: string
      ui:
        label: 'Alternativer Text'
        help:
          message: 'Dieser Text wird für die Barrierefreiheit und zur Suchmaschinenoptimierung genutzt.'
        reloadIfChanged: false
        inspector:
          group: general
          position: 100
      validation:
        'Neos.Neos/Validation/NotEmptyValidator': [ ]

NEOSidekick hilft mit folgendem YAML, Beschreibungstexte zu erstellen:

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

Hier müssen Redakteure bei jeder Nutzung explizit einen Beschreibungstext verfassen, und viele sind davon sehr genervt. 
 

Asset-basierte Bildbeschreibungen

Bei mehrfacher Nutzung des Bildes wird es schnell repetitiv. Deshalb kannst du das Titel- oder Beschreibungsfeld in der Medienverwaltung nutzen, um für jedes Bild einen Beschreibungstext zu verfassen.

Mit folgendem Fusion-Code wird dieser Text verwendet, wenn er am Node nicht überschrieben wird. Ob du das Titel- oder Beschreibungsfeld verwendest, ist Geschmackssache; laut unserer Slack-Umfrage bevorzugt die Mehrheit den Titel.
 

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

Mehrsprachige Webseiten

Die Eigenschaften von Assets in der Medienverwaltung haben keine Spachdimensionen. Daher kannst du den Beschreibungstext nur in einer Sprache angeben. 

Um diese Übersetzungen automatisch zu erstellen, kannst du LostInTranslation und den folgenden Fusion-Code nutzen. Hier ist Deutsch die Standardsprache, und in allen anderen Sprachen wird der Bild-Titel übersetzt.

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

Konfiguration

Um immer die gleiche Konfiguration zu verwenden, kannst du NEOSidekick in YAML konfigurieren:

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