Using images as hyperlinks; Adding Alt and Title strings; Setting Image size

Using images as hyperlinks; Adding Alt and Title strings; Setting Image size

Here I am sharing my experence as tutorial; could be helpful 

Using images as hyperlinks; Adding Alt and Title strings; Setting Image size

Scope: Following Tutorial applies to images added as field type image (not file upload).

Step 1.Please prepare image named “TestImage.jpg” with approximate size 100X100 px.

Step 2. Create form “Images” with 2 fields:
      Field 1: Type: Image; Field Name: Image; Field deluge Name: Image
      Field 2: Type: Multi Line; Field Name: “Multi Line”; Field Deluge Name: Multi_Line

Step 3. Report “Images Report” is automatically created. Open it in browser Tab1. Please add record and upload prepared “TestImage.jpg”.
Right click on the image and copy image url
https://creator.zoho.com/ sharedByActual / appLinkNameActual/Images_Report/378180000000208003/Image/image-download/1415566005901_TestImage.jpg

Here:
sharedByActual – is your actual Zoho name
appLinkNameActual – is the name of your application
378180000000208003 – is the FormID (your FormID should be different)

 

Step 4. On another browser tab   Tab2: Add following script for form Image for  On Edit On Success:

(a)        MyImage=input.Image;
            input.Multi_Line=MyImage;

 

Step 5. On Tab1 – Edit record – update
You will see image placeholder.

Edit record one more time: You will see following string in “Multi Line” field
<img src = "/sharedBy/appLinkName/viewLinkName/fieldName/image/1415566005901_TestImage.jpg" border = "0"></img>

Step 6. On Tab2: Change  script for form Image for  On Edit On Success:

(b)         MyImage = input.Image;
            FindString = "/sharedBy/appLinkName/viewLinkName/fieldName/image/";
            ReplaceString = "https://creator.zoho.com" + zoho.appuri + "Images_Report/" + 378180000000208003 + "/Image/image-download/";
            MyImage = MyImage.replaceFirst(FindString,ReplaceString);
            input.Multi_Line = MyImage;

 

Step 7. On Tab1 – Edit record – update.
After update you should see same TestImage.jpg    2 times – once in Image column and once in Multi Line column.

Step 8. Changing image properties  width, height (and other) attributes.
On Tab2: Change  script for form Image for  On Edit On Success:

(C)        MyImage = input.Image;
            FindString = "/sharedBy/appLinkName/viewLinkName/fieldName/image/";
            ReplaceString = "https://creator.zoho.com" + zoho.appuri + "Images_Report/" + 378180000000208003 + "/Image/image-download/";
            MyImage = MyImage.replaceFirst(FindString,ReplaceString);
            AltString = "Alt String is here";
            TitleString = "Title String is here";
            FindString = "img";
            ReplaceString = "img alt='" + AltString + "' title='" + TitleString + "' width='50' vspace='0' hspace='0' height='50' align='middle' ";
            MyImage = MyImage.replaceFirst(FindString,ReplaceString);
            input.Multi_Line = MyImage;

Step 9. On Tab1 – Edit record – update.
After update you should see same TestImage.jpg    2 times – once in Image column and once in Multi Line column.  Image on the right should be smaller size.  Hover over to see Title string

Step 10. Lets add hyperlink.

On Tab2: Change  script for form Image for  On Edit On Success:

(D)        MyImage = input.Image;
            FindString = "/sharedBy/appLinkName/viewLinkName/fieldName/image/";
            ReplaceString = "https://creator.zoho.com" + zoho.appuri + "Images_Report/" + 378180000000208003 + "/Image/image-download/";
            MyImage = MyImage.replaceFirst(FindString,ReplaceString);
            AltString = "Alt String is here";
            TitleString = "Title String is here";
            FindString = "img";
            ReplaceString = "img alt='" + AltString + "' title='" + TitleString + "' width='50' vspace='0' hspace='0' height='50' align='middle' ";
            MyImage = MyImage.replaceFirst(FindString,ReplaceString);
            TargetLink = "https://www.zoho.com";
            FindString = "<img";
            ReplaceString = ("<a href='" + TargetLink) + "'   target='_blank' >    <img";
            MyImage = MyImage.replaceFirst(FindString,ReplaceString);
            nput.Multi_Line = MyImage;

Step 11. On Tab1 – Edit record – update.

After update you should see same TestImage.jpg    2 times – once in Image column and once in Multi Line column.  Image on the right now should be hyperlink; click to follow.

Web presentation of single and double quotes could be non correct. 
Please consult attached files for correct punctuation.