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

Daryl

September 09, 2021 10:44

I am able to get the image Alt data from the accessibilityProps in the gallery view, however when clicking an image which opens with the popup method, the Alt metadata no longer displays in the HTML.

Is there a way to append the Alt metadata to the image HTML?

Thanks

0

• 

  Mo Ip

  September 10, 2021 20:34

  Hi Daryl,

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

  Thanks,

  Mo

  0
• 

  Daryl

  September 13, 2021 12:29

  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
• 

  Mo Ip

  September 15, 2021 23:19

  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
• 

  Daryl

  September 17, 2021 13:13

  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
• 

  Mo Ip

  September 21, 2021 18:07

  Hi Daryl,

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

  Thanks,

  Mo

  0
• 

  Daryl

  October 09, 2021 13:04

  Hi Mo,

  Please could you update me on the status of this request as my client is eager to get this feature live

  Daryl

  0
• 

  Roee Ben Ari

  October 10, 2021 09:40

  Hi Daryl, 
  
  This change hasn't been prioritized yet. We will update here once it does. 
  
  Thank you for your patience. 

  Best,
  Roee

  0

Post is closed for comments.