Expand my Community achievements bar.

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

Avatar

Level 4

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

keshava219_0-1649833449261.png

 

 

9 Replies

Avatar

Community Advisor

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.

Avatar

Level 4

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

 

Avatar

Community Advisor

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

 

 



Arun Patidar

Avatar

Level 4

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 

keshava219_0-1649837150384.png

keshava219_1-1649837267913.png

 

 

Avatar

Community Advisor

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

 



Arun Patidar

Avatar

Level 4

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 

Avatar

Community Advisor

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"]');



Arun Patidar

Avatar

Level 4

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

Avatar

Employee Advisor

@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.