Generate image alternative text and titles in the Neos UI

With a few lines of YAML your editors have an easier way to consistantly fill these fields:

'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
          editor: 'NEOSidekick.AiAssistant/Inspector/Editors/ImageAltTextEditor'
            editorOptions:
              imagePropertyName: 'image'
              fallbackAssetPropertyName: 'title'
              fallbackToCleanedFilenameIfNothingIsSet: true # default true 
              autoGenerateIfImageChanged: true # default true
    imageTitle:
      type: string
      ui:
        label: 'Image title'
        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

The image property name imagePropertyName refers to the property name of the image in the NodeType. The fallback asset property name can be “title” or “caption” and defines which asset property should be displayed as a placeholder.

Tip: We like to define these in the NodePresets to use the same configuration throughout the project.

To achieve exactly the same behavior in your rendering, we offer two EelHelper methods:

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