Append contextual mediaAltSource in the zoomProps and type: "popup"

Comments

5 comments

  • Avatar
    Mo Ip

    Hi Daryl,

    Would you please share with me your code on how you do the setup?

    Thanks,

    Mo

    0
    Comment actions Permalink
  • Avatar
    Daryl

    Hi Mo Ip,

    Here is the code for the widget:

    <script type="text/javascript">
    var myWidget = cloudinary.createUploadWidget({
    cloudName: 'dchen1f5n',
    folder: 'customer_gallery',
    sources: [
    "local",
    "camera",
    "facebook",
    "instagram"
    ],

    styles: {
    palette: {
    window: "#FFFFFF",
    windowBorder: "#90A0B3",
    tabIcon: "#FF001D",
    menuIcons: "#5A616A",
    textDark: "#000000",
    textLight: "#FFFFFF",
    link: "#FF001D",
    action: "#FF620C",
    inactiveTabIcon: "#880E1C",
    error: "#F44235",
    inProgress: "#FF001D",
    complete: "#20B832",
    sourceBg: "#E4EBF1"
    },
    fonts: {
    default: {
    active: true
    }
    }
    },
    uploadPreset: 'customer_gallery'}, (error, result) => {
    if (!error && result && result.event === "success") {
    console.log('Done! Here is the image info: ', result.info);
    }
    }
    )

    document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
    }, false);
    </script>

     

    And the code to render:

     

    <script type="text/javascript">
    const myGallery= cloudinary.galleryWidget({
    container: "#my-gallery",
    cloudName: "dchen1f5n",
    mediaAssets: [{tag: "approved"}],
    zoomProps: {
    type: "popup",
    steps: 3,
    stepLimit: true,
    level: 1.3,
    },
    accessibilityProps: {
    mediaAltSource: "contextual",
    mediaAltId: "caption"
    },
    thumbnailProps: { width: 300, height: 300, spacing: 5, navigationColor: "green"},
    displayProps: {
    mode: "expanded",
    topOffset: 70,
    columns: 5,
    },
    });

    myGallery.render();
    </script>

    Here you can see the alt tag gets output in the gallery view:

    But when the image is clicked for Zoom view, here is the output and there is no alt tag:

     

    Thanks

    0
    Comment actions Permalink
  • Avatar
    Mo Ip

    Hi Daryl,

    I created https://jsfiddle.net/dynamomo/b36h41v0/ using your code on the product gallery.

    Under <div data-test="img-zoom-wrap" class="css-b7jmoi"> for all 3 images, they are correctly showing the alt text where https://res.cloudinary.com/dchen1f5n/image/upload/v1630496814/customer_gallery/53BACAD5-CE55-4804-8CC1-9BA4E93E7980_srhi5z.jpg has alt text but the other two do not.

    I hope this helps and let me know if you need further assistance.

    Regards,

    Mo

    0
    Comment actions Permalink
  • Avatar
    Daryl

    Hi Mo,

    I understand the Alt Tags show in the gallery view grid in the img tag. However I would like for them to show when the image is clicked and in the Zoom view. If you inspect the img tag for the image https://res.cloudinary.com/dchen1f5n/image/upload/v1630496814/customer_gallery/53BACAD5-CE55-4804-8CC1-9BA4E93E7980_srhi5z.jpg

    You will see there is no Alt Tag

    Daryl

    0
    Comment actions Permalink
  • Avatar
    Mo Ip

    Hi Daryl,

    I have opened an internal ticket and our Dev team will evaluate it.

    Thanks,

    Mo

    0
    Comment actions Permalink

Please sign in to leave a comment.