Need a custom component of two images in a dialog with there respective alt from image description

[keshava219]

I have a requirement like two images in a dialog should return the unique alt text with respective there descritption

Went for core component there is only one image using there while doing the custom component I'm not able to return or show the unique after changing the file reference of the two images 

Please provide me any reference to achieve this approach

[Anmol_Bhardwaj]

Please go through this answer by @kautuk_sahni  : 
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-2-alt-text-for-image... 
As explained, we need to add alt text, it is not governed by the image, but through authoring.

However, If you don't want to use altText through authoring , you can always get a property from the image node and return it in place of altText, this way, it doesn't matter how many images you have, the property will be unique for everyone.

You can create a modal for this, which will accept an image and return altText aling with anything else you need.

[keshava219]

Hi AnmolBhardwaj,

                   Thanks for the reply , In this example showing only one image of core and by  model i can written in page but my question is that in dialog can we see alt text functionality by writting custom JS like things

[arunpatidar]

Hi,

You can check the logic of image core component, there alt text can be used from asset description.

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/image.ht...

In your model, you can read asset metadata and can be used via Model.

example

if (getValueFromDAM != null && getValueFromDAM.equals("true")) {
            String fileReference = resource.getValueMap().get("fileReference", String.class);
            if (StringUtils.isNotBlank(fileReference)) {
                final Resource assetResource = request.getResourceResolver().getResource(fileReference);
                if (assetResource != null) {
                    Asset asset = assetResource.adaptTo(Asset.class);
                    if (asset != null) {
                        copyMetaProp = PropertiesUtil.toString(asset.getMetadata(DamConstants.DC_RIGHTS), null);
                    }
                }
            }
        }

[keshava219]

Hi @arunpatidar , Yeah got it but on dialog while selecting two images second alt not  reflect on dialog just like in second image it reflecting to first image alt . Have any reference for multiple alt custom JS? please 

[arunpatidar]

Hi, This is bacause the javascript listener is created only for one field, you need to write same for second field as well

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

[keshava219]

Hi @arunpatidar , 

           Trying to another variable with different method in the same file but its not working 

isDecorative = dialogContent.querySelector('coral-checkbox[name="./isDecorative"]');
altTupleAfter = new CheckboxTextfieldTuple(dialogContent, 'coral-checkbox[name="./afterAltValueFromDAM"]', 'input[name="./afterAlt"]');
altTuple = new CheckboxTextfieldTuple(dialogContent, 'coral-checkbox[name="./altValueFromDAM"]', 'input[name="./alt"]');
$altGroup = $dialogContent.find(".cmp-image__editor-alt");
$altTextField = $dialogContent.find(".cmp-image__editor-alt-text");
$linkURLGroup = $dialogContent.find(".cmp-image__editor-link");

by including this above bold line variable 

[arunpatidar]

hi,you need to change the property name as well as according to the second field. Can you try adding console log in javascript and debug.

e.g.

altTuple = new CheckboxTextfieldTuple(dialogContent, 'coral-checkbox[name="./altValueFromDAM2"]', 'input[name="./alt2"]');

[keshava219]

should i use same 

altTuple = new CheckboxTextfieldTuple(dialogContent, 'coral-checkbox[name="./altValueFromDAM2"]', 'input[name="./alt2"]');

"altTuple " with the same or i used different variable like "altTupleAfter" with different field name but its not working

[milind_bachani]

@keshava219 - While I agree to the solutions given by @arunpatidar & @Anmol_Bhardwaj. I would like to know why is it important to have authoring of both the images in single authoring dialog.

You can avoid writing custom JS and leveraging the core image component and drop the same component in the page twice with which you can have image1->altText1 & image2->altText2 separately.

Another way would be to create a multifield which has imagePath & imageAltText and you can handle as many images as you want in single dialog.

Thanks.