Bild-Alternativtexte und Titel in der Neos UI erstellen

Barrierefreie Neos-Webseiten haben typischerweise bei jedem Inhaltselement mit Bild einen verpflichtenden Alternativtext. Dies nervt viele Redakteur:innen, und AI kann hier helfen.

'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
          editor: 'NEOSidekick.AiAssistant/Inspector/Editors/ImageAltTextEditor'
          editorOptions:
            imagePropertyName: 'image'
            fallbackAssetPropertyName: 'title'
            fallbackToCleanedFilenameIfNothingIsSet: true # default true
            autoGenerateIfImageChanged: true # default true
      options:
        automaticTranslation: true
    imageTitle:
      type: string
      ui:
        label: 'Bild-Titel'
        help:
          message: 'Dieser Text wird bei Mouse-Hover über dem Bild angezeigt.'
        reloadIfChanged: false
        inspector:
          group: general
          position: 110
          editor: 'NEOSidekick.AiAssistant/Inspector/Editors/ImageTitleEditor'
          editorOptions:
            imagePropertyName: 'image'
            fallbackToCleanedFilenameIfNothingIsSet: true # default true
            autoGenerateIfImageChanged: true # default true

Der Bild-Eigenschaftsname imagePropertyName bezieht sich auf den Eigenschaftsnamen des Bildes im NodeType. Der Fallback-Asset-Eigenschaftsname kann „title” oder „caption” lauten und definiert, welche Asset-Eigenschaft als Platzhalter angezeigt werden soll.

Tipp: Wir definieren diese gerne in den NodePresets, um die gleiche Konfiguration im gesamten Projekt zu verwenden.

Um genau dasselbe Verhalten in Ihrem Rendering zu erzielen, bieten wir zwei EelHelper-Methoden an:

alt = ${NEOSidekick.getImageAltText(node, 'alternativeText')}
title = ${NEOSidekick.getImageAltText(node, 'imageTitle')}

Mit Sitegeist.Kaleidoscope könnte das so aussehen:

imageSource = Sitegeist.Kaleidoscope:AssetImageSource {
   asset = ${q(node).property('image')}
   alt = ${NEOSidekick.getImageAltText(node, 'alternativeText')}
   title = ${NEOSidekick.getImageAltText(node, 'imageTitle')}
}