Tech Tip: Isolate src from Image Element Returned by 4D Transformation Tag

PRODUCT: 4D | VERSION: 19 | PLATFORM: Mac & Win

Published On: October 11, 2022

When surrounding a record's image with the 4DTEXT or 4DHTML transformation tag in an HTML document, 4D returns the whole image element with an alt attribute:

or

gets turned into…

Because 4D returns a whole image element, there is no way to customize the alt attribute or add other attributes (e.g., id, class, style, etc.) with just transformation tags. Javascript must be used to locate all image elements on a page, check if the image source is from the 4D server, and lastly set the attributes to image elements from 4D.

You can use the following Javascript and HTML code to locate your webpage’s images sourced from 4D and set the desired attributes onto them.

Example: Image Gallery

HTML & Javascript Code

<html>
  <body>
    
    
    
      
    

    <script>
      // get all image elements
      var images = document.getElementsByTagName("img");

      // iterate through image elements
      for (var i = 0; i < images.length; i++) {
        var imageSrc = images[i].src; // isolate image src
        if(imageSrc.includes("4DImg/")) { // check if image is from 4D server
          images[i].setAttribute("class", "galleryImage"); // set attributes
          images[i].setAttribute("alt", "Image in Image Gallery");
        }
      }
    </script>
  </body>
</html>

Page Source Code