Alt text for authored images.

[vijayk87714775]

In a dialog say there is an image field and an alt text field .'

Is it possible not to show alt text field when image is not authored.??
and when an image is authored , alt text field should be available  and become mandatory .!

Thanks in advance.

Regards,

Vijay.

[Techaspect_Solu · Accepted solution]

Hi,

We were able to implement your use case successfully by writing a custom js. Please find the sample dialog.xml and custom js code below, which might help you in implementing your use case.

Sample dialog.xml:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="Rotating Image Component"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[poc.clientlibs]"

    helpPath="https://www.adobe.com/go/aem6_2_docs_component_en#Title">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <image-tab

                jcr:primaryType="nt:unstructured"

                jcr:title="Image Details"

                sling:resourceType="granite/ui/components/foundation/section">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                    margin="{Boolean}false"/>

                <items jcr:primaryType="nt:unstructured">

                    <column

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <rotating-image

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container"

                                showhidetargetvalue="rotating-image">

                                <items jcr:primaryType="nt:unstructured">

                                    <heading

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/heading"

                                        class="coral-Heading coral-Heading--4"

                                        level="{Long}4"

                                        text="Rotating Image"/>

                                    <well

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/container">

                                        <layout

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/layouts/well"/>

                                        <items jcr:primaryType="nt:unstructured">

                                            <rotating-image

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                class="rotating-image"

                                                fieldLabel="Rotating Image"

                                                name="./rotatingImage"

                                                rootPath="/content"/>

                                            <alt-text

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                                class="rotating-image-alt-text"

                                                fieldLabel="Alt Text"

                                                name="./altText"

                                                rootPath="/content"/>

                                        </items>

                                    </well>

                                </items>

                            </rotating-image>

                        </items>

                    </column>

                </items>

            </image-tab>

        </items>

    </content>

</jcr:root>

Sample js:

$(document).on("foundation-contentloaded", function(e) {

        try {

            var $input = $('.rotating-image input');

            var showHideAlt = function(inp) {

                var $inp = $(inp),

                $altText = $inp.closest('[data-showhidetargetvalue="rotating-image"]').find('.rotating-image-alt-text'),

                $altTextWrap = $altText.closest('.coral-Form-fieldwrapper');

                if($(inp).val() !== '') {

                    $altText.attr("aria-required", "true");

                    $altTextWrap.show();

                } else {

                    $altText.removeAttr("aria-required");

                    $altTextWrap.hide();

                }

            }

            $input.off('.altTextTrigger').on('change.altTextTrigger keyup.altTextTrigger', function() {

                showHideAlt($(this));

            });

            $input.each(function(){

                showHideAlt($(this));

            });

        } catch(e) {

          console.log('error from foundation-contentlaoded event in example.js')

        }

    });

We hope this helps!

Regards,

TechAspect Solutions