Feature: Display asset title and caption in image title and alt text editor

[nezaniel]

Hi there,

The desired workflow would be as follows:

Given an Image node type with properties image, alt and title, we want to fetch alt and title from the image asset (caption and title) but want to enforce that they are actually set. Thus in the the inspector, we configure the MagicTextAreaEditor, but if the asset already has title (or caption respectively), it should display those asset properties instead (or even make them editable from the inspector).

I've tried this with ui: inspector: editor: 'NEOSidekick.AiAssistant/Inspector/Editors/MagicTextAreaEditor' editorOptions: module: 'alt_tag_generator' arguments: content: 'SidekickClientEval: node.properties.image.caption' and content: 'SidekickClientEval: AssetCaption(node.properties.image, node.properties.image__alt)' from https://github.com/NEOSidekick/NEOSidekick.AiAssistant/pull/14

but neither works (at least the way I configured it)

Is there already an way to achieve this or a similar result or is this a new feature request?

All the best Bernhard

[rolandschuetz]

Hello @nezaniel ,

content: 'SidekickClientEval: node.properties.image.caption' is the same as content: 'ClientEval: node.properties.image.caption' and Neos does not support this. AssetCaption is still WIP, are you on the github feature branch or where did you found that?

We plan to create a property placeholder to show the current asset title or caption with AssetCaption. Setting it automatically will lead to various edge cases:

• When an editor selects an image, and our JS automatically sets the alt text, but then the editor switches to a different image, do we always delete it?
  • Why save duplicated content as asset title and node property? What when an editor improves the asset title, wouldn't you want the new title?
  • ...

I propose showing the asset values as placeholder values and encouraging the editors to generate new values with Sidekick. In our upcoming release, we consider the current page content very strongly and can generate really good alternative text.

This brings me to an interesting thought we could generate those automatically every time a new image is set. I will look into that.

Another question for our AI generations, what would you expect as asset title, how could that text differ from alternative text?

[nezaniel]

content: 'SidekickClientEval: node.properties.image.caption' is the same as content: 'ClientEval: node.properties.image.caption' and Neos does not support this. AssetCaption is still WIP, are you on the github feature branch or where did you found that? Exactly, I tried out said feature branch

We plan to create a property placeholder to show the current asset title or caption with AssetCaption. Setting it automatically will lead to various edge cases:

* When an editor selects an image, and our JS automatically sets the alt text, but then the editor switches to a different image, do we always delete it?

* Why save duplicated content as asset title and node property? What when an editor improves the asset title, wouldn't you want the new title?

The use case here would not be automatically setting the property value to the asset title / caption but conditional validation. We want to have a generated caption for the original image and to be able to override it for cropped variants. But one of the two has to be available. So I'd like to display the original's caption with an optional override and if the caption is empty the override becomes mandatory.

I propose showing the asset values as placeholder values and encouraging the editors to generate new values with Sidekick. In our upcoming release, we consider the current page content very strongly and can generate really good alternative text.

This brings me to an interesting thought we could generate those automatically every time a new image is set. I will look into that.

yep, that's the direction I was thinking, just with said conditional validation

Another question for our AI generations, what would you expect as asset title, how could that text differ from alternative text?

I'd expect the title to be shorter and less context-sensitive. The idea of using the page context for alt text makes sense to me, especially with images that are visualizations rather than illustrations.

[rolandschuetz]

Hello Bernhard, I think we can solve your use case together. Let's have a short video call and discuss what we can implement in NEOSidekick and what you can implement on your end.

When is a good time for you next week? https://calendly.com/rolandschuetz/abstimmungscall?back=1&month=2024-07

[rolandschuetz]

Feature Request:

• Separate React Editor that that requires a manually set title, if there is no title set on the media asset

• Title Generator

  We will update this ticket with our progress

[rolandschuetz]

@nezaniel You can access a bunch of new features, when you require in composer "neosidekick/ai-assistant": "feature-sitegeist-image-features",

• In an Inspector TextEditor we can set the asset title or asset caption as placeholder
• NEOSidekick can generate image titles, and we improved the image alternative text generation including logo recognition and much more (newsletter on this coming soon)
• We have separate Inspector Editors that are easier to configure
• In this branch you can access the band new "SEO Bild Alternativtext Generator" backend module

The one thing, where I did not find a good solution is validation. The validation does not happen in the editor, it happens in Validators, but those do not have any content. They only get the value and a static configuration not supporting ClientEval. So I don't see how I can get enough context to (potencially async) check if an image asset has a title set. Do you have any ideas?

So how do the new editor work?

Here's an example of how to configure an image title and alternative text:

    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'
            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'
            autoGenerateIfImageChanged: true # default true

The imagePropertyName referrs to the property name of the image on the NodeType. The fallbackAssetPropertyName can be 'title' or 'caption' and defines which asset property should be shown as placeholder.

Let me know, if you need additional features or have ideas how to change the naming.

[rolandschuetz]

I thought of another feature this evening and added the property autoGenerateIfImageChanged. It makes changing images smoother.

[rolandschuetz]

@nezaniel Could you already give it a try?

[rolandschuetz]

@nezaniel To have it consistent, I also added an Eelhelper that used the YAML configuration of the property, you an use it like this:

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

With Kaleidoscope it could look like this:

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